1. Web Programming Language
Chapter 8

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

3. 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”

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

5. 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>

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

7. 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>

8. 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 = var b = var c = a + b console.log(c) </script>

9. 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 = b = c = a + b console.log(c) </script>

10. 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.

11. 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>

12. 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>

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

14. 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)

15. 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

16. 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

17. 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>

18. 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>

19. 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>

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

21. 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>

22. 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>

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

24. 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>

25. 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>

26. 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;

27. 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?

28. 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>

29. 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.

30. 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!

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

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

33. 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>

34. Form Validation
In JavaScript! :P