Web Programming Language Chapter 8

Introducing JavaScript Variables Operators Control Statements Arrays Functions getElementById() Form Validation Example

JavaScript A VERY important web programming language! To begin with:- “A client side scripting language that is used to bring a webpage to life, running code within the browser and having access to all elements in the document”

Hello World <script type=“text/javascript”> document.write(“Hello World”) </script>

Where to js? Much like css, it is a good idea to move your js to a separate file; <script src=”js/script.js”></script>

JavaScript JavaScript is running on the client machine… <script type=“text/javascript”> document.write(Date()) </script>

JavaScript Variables Weakly Typed Language Any type of data; integers, floating point numbers, strings, characters, arrays, objects… Variable Names – alphanumeric + _ <script type=“text/javascript”> var a = 5; var b = 6; var c = a + b; console.log(c); </script>

JavaScript – Semi Colons Semicolons separate statements, but if you don’t include them, JavaScript will attempt to insert them for you at each new line… <script type=“text/javascript”> var a = 5 var b = 6 var c = a + b console.log(c) </script>

JavaScript var You don’t need to explicitly declare variables using ‘var’. But if you don’t, the variable is essentially global, and may encounter another variable with the same name… Var explicitly declares the variable within a set scope. <script type=“text/javascript”> a = 5 b = 6 c = a + b console.log(c) </script>

JavaScript console The console is a very important tool for developers using JavaScript. Outputting values to the console is very useful for debugging JavaScript code. The console can be accessed through the developer tools in most browsers.

JavaScript Strings Concatenation using + <script type=“text/javascript”> var firstname = “John”; var surname = “Smith”; var fullname = firstname + surname; var name = fullname; console.log(fullname); </script>

JavaScript Strings Can be created using “ or ‘ Quotes can be included in a string using the escape character \ <script type=“text/javascript”> var str1 = “I’m John”; var str2 = ‘I\’m John’; </script>

JavaScript Comments Comment your code!!!! (FFS) Using // Or /*…*/

JavaScript Operators Arithmetic Operators Purpose Notes + Addition -   - Subtraction * Multiplication / Division % Modulus Returns the remainder from a division ++ Increment (add one to the value) Unary operator -- Decrement (minus one from the value)

JavaScript Operators II Assignment Operators Example Equivalent = a = b   += a += b a = a + b -= a -= b a = a – b *= a *= b a = a * b /= a /= b a = a / b %= a %= b a = a % b

JavaScript Operators III Logical Operators Purpose == Equal to != Not equal to <  Less than >  Greater than <= Less than or equal to >= Greater than or equal to === Equal to, both in terms of value and type !== Not equal to, both in terms of value and type && AND || OR ! Not

JavaScript Control Statements WOW!!! <script type=“text/javascript”> if (a > 100) { document.write(“a is greater than 100”); } else if (a<100) { document.write(“a is less than 100”); } else { document.write(“a is 100”); } </script>

JavaScript Control Statements Ternary Operator <script type=“text/javascript”> document.write(a<5 ? “a is less than 5” : “a is not less than 5”); </script>

JavaScript Control Statements Switch! <script type=“text/javascript”> switch(choice) { case 1: document.write(“1 Selected”); break; case 2: document.write(“2 Selected”); break; case default: document.write(“None Selected”); break; } </script>

JavaScript Control Statements For! <script type=“text/javascript”> for(count = 1; count <=5; count++) { document.write(count + “ times 5 is “ + count*5 + “<br>”; } </script>

JavaScript Control Statements While <script type=“text/javascript”> var count = 0; while (count < 5) { document.write(count + “ times 5 is “ + count*5 + “<br>”; count++; } </script>

JavaScript Control Statements Do….While! <script type=“text/javascript”> var count = 0; do { document.write(count + “ times 5 is “ + count*5 + “<br>”; count++; } while (count < 5) </script>

JavaScript Arrays <script type=“text/javascript”> var students = [“John”, “Peter”, “Mark”]; document.write(students[0]); </script>

JavaScript Multidimensional Arrays <script type=“text/javascript”> var students = [["John", 50], ["Peter", 80], ["Mark", 70]]; for(var i=0; i<3; i++) { document.write(students[i][0] + " got " + students[i][1] + "<br>"); } </script>

JavaScript – Associative Arrays <script type=“text/javascript”> countries = {"uk": "United Kingdom", "th": "Thailand", "us": "United States"} for (country in countries) document.write(country + " = " + countries[country] + "<br>") </script>

JavaScript – Accessing the Document The document contains an array of links! The href property of the 1st link on the page would be as follows:- document.links[0].href; You could find out how many links there are on the page as follows:- var numlinks = document.links.length;

JavaScript Functions Break your code into functions! <script type=“text/javascript”> function average(n1, n2, n3) { return (n1+n2+n3)/3; } document.write(average(5,6,7)); </script> But what if there were more than 3 parameters?

JavaScript Functions - arguments Each function contains an arguments object, with an array of parameters sent to the function. <script type=“text/javascript”> function average() { var total = 0; for(index in arguments) { total += arguments[index]; } return total / arguments.length; } document.write(average(5,6,7,8)); </script>

JavaScript Array Functions As well as ‘length’, there are further array functions Function Name Purpose push() Add an element to the end of an array. pop() Remove the last element from the array. reverse() Reverses the order of the array. sort() Sorts the array.

JavaScript – getElementById() A VERY important function! Get elements from the DOM!!! <p id="intro">Hello World</p> <script type="text/javascript"> var el = document.getElementById("intro"); el.style.color = "blue"; </script> Wow!

JavaScript – getElementById() So IMPORTANT – that you hardly ever see it! <script type="text/javascript"> function $(id) { return document.getElementById(id) } </script>

JavaScript – getElementById() It is often aliased by $ <p id="intro">Hello World</p> <script type="text/javascript"> $("intro").style.color = "blue"; </script>

JavaScript - innerHTML innerHTML can return or change the contents of an HTML tag <p id="intro">Hello World</p> <script type="text/javascript"> $("intro").innerHTML = "Goodbye"; </script>

Form Validation In JavaScript! :P