Lecture 5 - Comm Lab: Web @ ITP

Communications Lab :: Web Lecture 5: JavaScript

Reminders Assignment #4 due today Final Projects - sign up for a 10-minute talk to plan it out

Today JavaScript Introduction Syntax details: variables, types, conditionals, loops Using the console Accessing HTML Modifying HTML Debugging JavaScript

What is JavaScript JavaScript is text that is fed into a browser that can interpret it and then it is enacted by the browser Because JavaScript code can run locally in a user's browser (rather than on a remote server), the browser can respond to user actions quickly, making an application more responsive Works with document structure created by HTML

JavaScript Drag and Drop Form validation Dynamic drop-down menus (http://sandbox.scriptiny.com/dropdown-menu/) Pop-up windows Alerts

Examples http://www.macs.hw.ac.uk/~ceehsa1/languages/javascript/puzzle1/index.html http://www.macs.hw.ac.uk/~ceehsa1/languages/javascript/puzzle2/index.html http://www.squarebox.co.uk/hcalc.html?0.01745240589744836 http://www.bodo.com/j17.htm http://www.bodo.com/j19.htm

Java is to JavaScript what Car is to Carpet

Using JavaScript Inline In the <head> tag of your HTML Within the <body> tag of HTML By including an external file (.js)

Using JavaScript Inline <html> <head> ... </head> <body> ... <a href= "javascript: alert()" ></a> <a href="#" onclick="alert()" ></a> ... </body> </html>

Using JavaScript 2. In the <head> tag of your HTML <html> <head> ... < script type=" text/javascript "> alert(); </ script > ... </head> <body> ... </body> </html>

Using JavaScript 3. Within the <body> tag of HTML <html> <head> ... </head> <body> ... < script type="text/javascript"> alert (); </ script> </body> </html>

Using JavaScript 4. By including an external file <html> <head> ... </head> <body> ... <script type="text/javascript" src="my_javascript_file.js"> </script> </body> </html

JavaScript in Console Open Developer Tools in Chrome (right-click > Inspect Element) Test your JavaScript in the browser!

JavaScript Syntax The <script> tag tells the browser to run JavaScript for the text included between the tags Each JavaScript line is an instruction sent to the browser. Each JavaScript line ends in a semicolon (;) You can group several lines of code together with curly braces ( { .... })

JavaScript Variables var car = "ford"; var x = 0; var y; Variable can have a value associated with it The value of the variable can change during the execution The keyword "var" has to be used in order to declare the variable . Declaring the variable is done at the top of the script

JavaScript Operations x = 5 + 34; y = 3 - 2; result = 200 / 40; speed = (43 * (23 + 43)) / 4; x++; // x = x + 1; y--; // y = y - 1; x+=y; // x = x + y;

JavaScript Comments // This is a comment /* This is a ... two-line comment! */

JavaScript Variable Types Numbers var x = 0; Strings - used for representing text var message = "Please try again." var car = 'Ford' You can use either "" or '' Arrays - a list of values var arr = [3, 4, 5]; var pets = new Array();

JavaScript Strings Used for variables that hold text You can add strings together var text = "I love " + "mushrooms"; var vegetable = "kale"; text = "I love " + vegetable; // The value of text will be "I love kale"

JavaScript Arrays var pets= new Array() ; pets [0] ="cat"; pets [1] ="dog"; pets [2] ="fish"; var pets= new Array( "cat","dog","fish" ) ; var pets= [ "cat","dog","fish" ] ;

JavaScript Arrays var fave_pet = pets[2] // will get "fish" pets[2] = parrots; // This reassigns the value var pet_count = pets.length; // Returns 3

JavaScript Conditionals if (condition) { // code will run if condition is true }

JavaScript Conditionals if (condition){ // code will run if condition is true } else { // code will run if condition is false }

JavaScript Conditionals if (condition1) { // code will run if condition1 is true } else if (condition2) { // code will run if condition2 is true } else { // code will run if neither condition1 nor condition2 is true }

JavaScript Conditionals x == 4 // is value of x equal to number 4? x != 4 // is value of x different from number 4? x > 4 // is value of x greater than number 4? x < 4 // is value of x smaller than 4? x >= 4 // is value of x greater or equal to number 4? x <= 4 // is value of x smaller or equal to 4? if (x == 4) { ...... }

JavaScript For Loops for (var i=0; i<5; i++) { // lines of code to run for each element // i = 0 first time loop runs // i = 1 second time, i = 2 the third time ..... } Declare a variable named "i" Assign the value of 0 to variable i Set the upper limit for i. In this case, i cannot exceed 5. i++ increments i by 1 each time the loop runs

JavaScript Alert alert ("Hey there!");

JavaScript Functions A function contains a block of code that will only run when the function is called Declaring a function: function someFunction (variable1, variable2,..) { // Code in here will run }

JavaScript Functions To call a function: someFunction (value1, value2, ...); // declared by us alert ("Hello world!"); // function native to JavaScript

JavaScript Functions <html> <head> <script type="text/javascript"> function displayMessage() { alert("Confirmed!"); } </script> </head> <body> <a href="#" onclick="displayMessage()" >Click me</a> </body> </html>

JavaScript Events JavaScript detects when a certain action is taking place. Examples of actions detected: The mouse was clicked The mouse moves The mouse is over an HTML element User pressed a key A page has loaded A page is resizing

JavaScript Events Mouse is over an HTML element <a href="#" onmouseover="alert('You are over link!')" >... User clicks on the HTML element <a href="#" onclick="alert('You are clicking link!')" >...

JavaScript Events The body of the HTML has loaded: <html> <head> <script type="text/javascript"> function bodyLoaded() { alert("Page is loaded"); } </script> </head> < body onload="bodyLoaded()" > .... </body> </html>

JavaScript and HTML <p>Once upon a time...</p> <p>What a great story!</p> document. getElementsByTagName ("p");

JavaScript and HTML <div id="title">Once upon a time...</div> document. getElementById ("title");

JavaScript and HTML <a href="#" class="utility">Link</a> <a href="#" class="utility">Another Link</a> document. getElementsByClassName ("utility");

JavaScript and HTML Other properties: parentNode childNodes firstChild lastChild nextSibing previousSibling

JavaScript and HTML <div id="story"> <p id="title">Once upon a time...</p> </div> var p = document. getElementById ("title"); var parent = p.parentNode; // will be <div id="story">

JavaScript and HTML <p>Once upon a time...</p> <p>What a great story!</p> paragraphs = document .getElementsByTagName ("p"); //Array paragraphs.length; // Returns 2 paragraphs in array for (i=0; i<paragraphs.length; i++) { ... }

JavaScript and HTML document .anchors // Array containing all links document. anchors[2] // Third link element on page (<a>) document .forms[0] // Returns the first form HTML element document .forms // Array of all form elements on page document .images.length // How many image tags on page document .images // Array of all image elements on page

JavaScript and HTML Get the contents of an HTML element: <html> <head> <script type="text/javascript"> function getValue() { var header_value = document.getElementById("header"); alert(header_value .innerHTML ); } </script> </head> <body> <h1 href="#" id="header" onclick="getValue()">Click me!</h1> </body> </html>

JavaScript and HTML Return the class name of an HTML element: <div id="title" class="large">Savings</div> document.getElementById("title") .className ; // Will return "large"

JavaScript and HTML Create HTML elements dynamically: var body = document.getElementsByTagName('body')[0]; var newdiv = document .createElement('div') ; newdiv .setAttribute ('id',"images"); newdiv .innerHTML = "Images: <img src='plant.jpg' onclick='alert('Plant!')'/>"; body .appendChild(newdiv) ;

JavaScript & HTML & CSS Change the CSS style of an HTML element: <div id="title" class="large">Savings</div> document.getElementById("title") .style .fontSize = "14px;" element.style.color element.style.background element.style.backgroundImage element.style.backgroundPosition

JavaScript & HTML & CSS Making an HTML element appear and disappear: <div id="title" class="large">Savings</div> document.getElementById("title") .style.display = "none"; document.getElementById("title") .style.display = "block";

JavaScript & HTML & CSS CSS selectors are separated by dash - : background - image font - size In Javascript, they are camelCased : background I mage font S ize

Debugging JavaScript var image = "cat.jpg"; console.log ("Value of var 'image' is ", image); console.log ("Value of var 'image' is " +image); This prints in Developer Inspector tools Console tab: JavaScript ERRORS are also found here.

JavaScript Exercises Make a few boxes using CSS and HTML. When you click on them, change their color. Choose a random different color every time, use an array to store them.

Resources Code Academy JavaScript Tutorial: http://www.codecademy.com/ W3Schools JavaScript examples: http://www.w3schools.com/js/js_ex_dom.asp

Next Class... Assignment #5 Due Be ready to present your final project idea We'll do a recap of some of the concepts we covered Some more advanced Sinatra concepts.

Lecture 5 - Comm Lab: Web @ ITP

More Related Content

What's hot (20)

Viewers also liked (11)

Similar to Lecture 5 - Comm Lab: Web @ ITP (20)

Recently uploaded (20)

Lecture 5 - Comm Lab: Web @ ITP

Editor's Notes