jQuery Workshop – Interactive functions

Today we were introduced to jQuery, a multi-platform code library built in JavaScript. jQuery is used primarily to make the scripting of clients in HTML less complex. The first thing we were taught to do was how to make interactive buttons that changed colour on interaction from the user. The way in which I did this way felt somewhat similar to HTML, but I felt that the addition of jQuery helped produce some more visually appealing results during this test.

Screen Shot 2015-03-18 at 09.45.30

Only two folders are required: css and script

As seen below, we had to go to code.jquery.com and obtain the code ourselves and then put it all into a separate file called “jquery.js”. This JavaScript file is used to enable jQuery to work on our HTML and CSS files. The following screenshots show the step-by-step development of my test webpage. Screen Shot 2015-03-18 at 09.48.57 Screen Shot 2015-03-18 at 09.49.10 Screen Shot 2015-03-18 at 09.53.32 Screen Shot 2015-03-18 at 09.53.51 Screen Shot 2015-03-18 at 09.54.42 Screen Shot 2015-03-18 at 10.07.29 Screen Shot 2015-03-18 at 10.24.15 Screen Shot 2015-03-18 at 10.24.19 Screen Shot 2015-03-18 at 10.24.20 Screen Shot 2015-03-18 at 10.27.41 Screen Shot 2015-03-18 at 10.29.59 Screen Shot 2015-03-18 at 10.31.43 Screen Shot 2015-03-18 at 10.32.23 Screen Shot 2015-03-18 at 10.33.49 Screen Shot 2015-03-18 at 10.34.33 Screen Shot 2015-03-18 at 10.36.41 Screen Shot 2015-03-18 at 10.36.51 Screen Shot 2015-03-18 at 10.36.55

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s