{"id":135,"date":"2013-04-17T16:27:46","date_gmt":"2013-04-17T06:27:46","guid":{"rendered":"http:\/\/www.jasonshanks.com\/?p=135"},"modified":"2013-04-21T23:59:02","modified_gmt":"2013-04-21T13:59:02","slug":"wk-7tut-6-introductory-javascript","status":"publish","type":"post","link":"https:\/\/www.jasonshanks.com\/2013\/lectures-and-tuts\/kib204-web_interface_design\/wk-7tut-6-introductory-javascript\/","title":{"rendered":"Wk 7\/Tut 6 : Introductory Javascript"},"content":{"rendered":"<p>[Courtesy of <a href=\"http:\/\/dave.if90.net\/category\/kib204\/tutorials-kib204\/week-7\/\" target=\"_blank\">Dave Wallace<\/a>]<\/p>\n<p>JavaScript is a\u00a0<strong>client-side<\/strong>\u00a0scripting language. \u00a0This means it is downloaded from the web-server and interpreted by the browser itself. \u00a0This is in contrast to a\u00a0<strong>server-side<\/strong>scripting language, like PHP, which is executed on the web-server and then sends the output of that script (usually some HTML) to the browser.<\/p>\n<p>JavaScript allows us, among other things, to manipulate the web page (without reloading the browser window), and respond to events, such as user input.<\/p>\n<p>JavaScript is probably the most widely used programming language in the world. \u00a0As such, it a very\u00a0beneficial skill to have for any web designer.<\/p>\n<p>There are many excellent JavaScript resources available, so I will keep my notes here brief. \u00a0I will demonstrate some of the commonly used features of javascript before pointing you to some useful resources for broadening your understanding of this powerful language.<\/p>\n<p>My demonstration will cover:<\/p>\n<ul>\n<li>how to include JavaScript in your HTML file<\/li>\n<li>alerts<\/li>\n<li>outputting information to the web browser\u2019s console<\/li>\n<li>comments<\/li>\n<li>variables<\/li>\n<li>conditional statements<\/li>\n<li>loop structures<\/li>\n<li>functions<\/li>\n<li>arrays<\/li>\n<li>Document Object Model (DOM) Manipulation with jQuery<\/li>\n<li>event handling with jQuery<\/li>\n<\/ul>\n<h2>More JavaScript Resources<\/h2>\n<p>You shouldn\u2019t set out to master the entirety of JavaScript from the outset. \u00a0A few hours of studying some of the following resources should give you enough of an understanding of the language to be able to read and modify other examples. \u00a0Being the language of the web, there is plenty of example code out there,\u00a0<a href=\"https:\/\/www.google.com.au\/search?q=how+to+get+the+current+date+in+javascript&amp;aq=f&amp;oq=how+to+get+the+current+date+in+javascript&amp;aqs=chrome.0.57j62l3.5439&amp;ie=UTF-8\" target=\"_blank\">just a Google away<\/a>.<\/p>\n<ul>\n<li><a href=\"http:\/\/wwwlyndacom.ezp01.library.qut.edu.au\/JavaScript-tutorials\/Essential-Training-2011\/81266-2.html?srchtrk=index%3a2%0alinktypeid%3a2%0aq%3ajavascript%0apage%3a1%0as%3arelevance%0asa%3atrue%0aproducttypeid%3a2\" target=\"_blank\">JavaScript Essential Training (2011) on Lynda<\/a><\/li>\n<li><a href=\"http:\/\/www.codecademy.com\/\" target=\"_blank\">http:\/\/www.codecademy.com\/<\/a>\u00a0&#8211; learn how to code in JavaScript interactively<\/li>\n<li><a href=\"http:\/\/api.jquery.com\/\" target=\"_blank\">jQuery Documentation<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2>Exercises<\/h2>\n<p>Please download these\u00a0<a href=\"https:\/\/www.jasonshanks.com\/wp-content\/uploads\/2013\/04\/Javascript_examples.zip\">Javascript example files<\/a>\u00a0courtesy of <a title=\"Week 7 - Javascript &amp; JQuery\" href=\"http:\/\/exploringinterfaces.wordpress.com\/2012\/04\/18\/week-7-javascript-and-jquery\/\" target=\"_blank\">Cassie Selin<\/a> we will go over.<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2>jQuery Repositories<\/h2>\n<p>Beyond the extensive list of jQuery functions you can use by calling it&#8217;s base library, there are countless repositories of jQuery code written at this point, many of which are free and open-source to use in your projects.<\/p>\n<p>Some Examples to get you started:<\/p>\n<ul>\n<li><a href=\"http:\/\/plugins.jquery.com\/\" target=\"_blank\">jQuery Plugin Registry<\/a>\u00a0: the official source that is always a good place to start.<\/li>\n<li><a href=\"http:\/\/dev7studios.com\/nivo-slider\/\" target=\"_blank\">Nivo Slider<\/a>\u00a0: not free, but a\u00a0a quite robust example of an image slider with solid documentation, style \u00a0&amp; options<\/li>\n<li><a title=\"qTip\" href=\"http:\/\/craigsworks.com\/projects\/qtip\/\" target=\"_blank\">qTip<\/a> : an advanced tooltip module with tons of UI options.<\/li>\n<\/ul>\n<div id=\"themify_builder_content-135\" data-postid=\"135\" class=\"themify_builder_content themify_builder_content-135 themify_builder\">\n\n    <\/div>\n<!-- \/themify_builder_content -->","protected":false},"excerpt":{"rendered":"<p>[Courtesy of Dave Wallace] JavaScript is a\u00a0client-side\u00a0scripting language. \u00a0This means it is downloaded from the web-server and interpreted by the browser itself. \u00a0This is in contrast to a\u00a0server-sidescripting language, like PHP, which is executed on the web-server and then sends the output of that script (usually some HTML) to the browser. JavaScript allows us, among [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[17],"tags":[],"builder_content":"","_links":{"self":[{"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/posts\/135"}],"collection":[{"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/comments?post=135"}],"version-history":[{"count":9,"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/posts\/135\/revisions"}],"predecessor-version":[{"id":137,"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/posts\/135\/revisions\/137"}],"wp:attachment":[{"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/media?parent=135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/categories?post=135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/tags?post=135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}