06/02/2017
1
Brief Introduction to JavaScript
CSCU9B2 Web Tech Lecture 4
Material from
http://www.w3schools.com/js/
JavaScript
• JavaScript is the programming language of the Web
• It can be used to make web pages dynamic • JavaScript is a Scripting Language • It runs within the browser
– it is a client-side scripting language
• JavaScript is programming code that can be inserted into HTML pages
• JavaScript is easy to learn…
CSCU9B2 Making the Most of the WWW 2
06/02/2017
2
JavaScript Can…
• Change HTML Content
• Change HTML Attributes
• Change HTML Styles (CSS)
• Can Validate Data
– Forms entry
• Examples…
– http://www.w3schools.com/js/js_examples.asp
CSCU9B2 Making the Most of the WWW 3
JavaScript Is Not Java
• JavaScript (JS) and Java are two completely different languages, in both concept and design.
• Java (invented by Sun) is a more complex programming language in the same category as C, C++, C#.
CSCU9B2 Making the Most of the WWW 4
06/02/2017
3
HTML <script> element
• JavaScript in HTML must be inserted between <script> and </script> tags.
• JavaScript can be put in the <body> and in the <head> section of an HTML page.
• The lines between the <script> and </script> contain the JavaScript:
<script> alert("My First JavaScript"); </script>
• The browser will interpret and execute the JavaScript code between the <script> and </script> tags.
CSCU9B2 Making the Most of the WWW 5
External JavaScripts
• Scripts can be placed in external files. External files often contain code to be used by several different web pages.
• JavaScript files have the file extension .js. • To use an external script, point to the .js file in
the "src" attribute of the <script> tag: • Example:
<head> <script src="myScript.js"></script> </head>
CSCU9B2 Making the Most of the WWW 6
06/02/2017
4
JavaScript Basics
• Variables: number, strings, booleans, arrays
• Object variables
• Manipulating variables: – Calculations
– Comparisons
• Controlling logic flow (conditional statements) – If…else
– For loops
• Functions
CSCU9B2 Making the Most of the WWW 7
JavaScript Syntax
• JavaScript is case sensitive
– Most programming languages are
• White space is ignored
• // is used to comment a line
• /* to comment multiple lines*/
CSCU9B2 Making the Most of the WWW 8
06/02/2017
5
JavaScript Variables
• Variables are containers for holding data: var x;
x=5; var y=6; var z=x+y; //what value is z?
• Variable names must begin with a letter – Variable names can also begin with $ and _
• (but we will not use these)
• Variable names are case sensitive – y and Y are different variables
CSCU9B2 Making the Most of the WWW 9
JavaScript Data Types
• Numbers, strings and booleans: var pi=3.14; var person="John Doe"; var answer='Yes I am!';
var lastname="Doe", age=30, job=true;
– Numbers may or may not have a decimal point
– Strings are delimited by single or double quotes
– Booleans are true or false
CSCU9B2 Making the Most of the WWW 10
06/02/2017
6
JavaScript Arithmetic
• Adding numbers: var x=5+7+2;
• Adding strings: concatenation var person="John"+" "+ "Doe";
– person holds “John Doe”
CSCU9B2 Making the Most of the WWW 11
Arithmetic Operators
Operator Description Example Result of x Result of y
+ Addition x=y+2 7 5
- Subtraction x=y-2 3 5
* Multiplication x=y*2 10 5
/ Division x=y/2 2.5 5
% Modulus (division remainder) x=y%2 1 5
CSCU9B2 Making the Most of the WWW 12
06/02/2017
7
JavaScript Arrays
• Collection of data items: var cars = ["Saab", "Volvo", "BMW"];
var name = cars[0];
cars[2] = “Astra";
– Indexing starts from 0
• Can mix data types in an array: var person = ["John", "Doe", 46];
CSCU9B2 Making the Most of the WWW 13
Properties and Methods
• Data items are “objects” that have properties and methods
• Strings: var myName = "Fred Joe Bloggs";
var strLen = myName.length;
var pos = myName.indexOf("Joe");
• Arrays: var person = ["John", "Doe", 46];
var last = person.pop(); // pops last element
CSCU9B2 Making the Most of the WWW 14
06/02/2017
8
Real World Objects: Car • All cars have common properties and actions
– The properties include name, model, etc. (values differ from car to car)
– Actions (methods) can be performed: e.g. start, drive
CSCU9B2 Making the Most of the WWW 15
Defining Objects in JS
• You can define your own object in JavaScript
• “Person” example with properties: person=new Object(); person.firstName="John"; person.lastName="Doe"; person.age=50; person.eyeColor="blue";
– Or var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
CSCU9B2 Making the Most of the WWW 16
06/02/2017
9
Document Object Model (DOM)
• Your web page as “objects”:
CSCU9B2 Making the Most of the WWW 17
The DOM and JavaScript • In the DOM, all HTML elements are defined as objects. • A method is an action you can do (select an HTML element by id). • A property is a value that you can get or set (like changing the
content of an HTML element). <html> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello World!"; document.write(“<p>Bye for now…</p>”); </script> </body> </html>
– write and getElementById are methods, – innerHTML is a property.
• http://www.w3schools.com/jsref/prop_html_innerhtml.asp CSCU9B2 Making the Most of the WWW 18
06/02/2017
10
Controlling Logic Flow
• Conditional statements:
• Execute different codes depending on a prior result
– If…else and Switch statements
• Repeatedly execute some code with different values
– For and While loops
CSCU9B2 Making the Most of the WWW 19
If...else Statement
if (condition1) { code to be executed if condition1 is true } else if (condition2) { code to be executed if condition2 is true } else { code to be executed if neither condition1 nor condition2 is true }
CSCU9B2 Making the Most of the WWW 20
06/02/2017
11
Example
• If the time is less than 10:00, you will get a "Good morning" greeting, • if not, but the time is less than 20:00, you will get a "Good day"
greeting, • otherwise you will get a "Good evening" greeting:
if (time<10) { x="Good morning"; } else if (time<20) { x="Good day"; } else { x="Good evening"; }
CSCU9B2 Making the Most of the WWW 21
Switch Statement
switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 }
CSCU9B2 Making the Most of the WWW 22
06/02/2017
12
Switch Statement Example
var day=new Date().getDay(); switch (day) { case 0: x="Today is Sunday"; break; case 1: x="Today is Monday"; break; case 2: x="Today is Tuesday"; break; case 3: x="Today is Wednesday"; break; //..rest of week omitted. }
CSCU9B2 Making the Most of the WWW 23
The For Loop
for (statement 1; statement 2; statement 3) { the code block to be executed } • Statement 1 is executed before the loop (the
code block) starts. • Statement 2 defines the condition for running
the loop (the code block). • Statement 3 is executed each time after the loop
(the code block) has been executed.
CSCU9B2 Making the Most of the WWW 24
06/02/2017
13
For Loop Example
for (var i=0; i<5; i++) { x=x + "The number is " + i + "<br>"; } • From the example above, you can read: • Statement 1 sets a variable before the loop starts (var
i=0). • Statement 2 defines the condition for the loop to run (i
must be less than 5). • Statement 3 increases a value (i++) each time the code
block in the loop has been executed.
CSCU9B2 Making the Most of the WWW 25
The For/In Loop
• Example: var txt=""; var person={fname:"John",lname:"Doe",age:25}; for (var x in person) { txt=txt + person[x]; }
(result is txt=“JohnDoe25”)
CSCU9B2 Making the Most of the WWW 26
06/02/2017
14
The While Loop
while (condition) { code block to be executed } • Example:
i=0; while (i<5) { x=x + "The number is " + i + "<br>"; i++; }
CSCU9B2 Making the Most of the WWW 27
Comparison Operators
Operator Description Comparing Returns
== equal to x==8 false
x==5 true
!= not equal x!=8 true
> greater than x>8 false
< less than x<8 true
>= greater than or equal to x>=8 false
<= less than or equal to x<=8 true
CSCU9B2 Making the Most of the WWW 28
Assume x is 5
06/02/2017
15
Logical Operators
Operator Description Example
&& and (x < 10 && y > 1) is true
|| or (x==5 || y==5) is false
! not !(x==y) is true
• These 3 operators are “logically complete”
– They are enough to build any Boolean function.
CSCU9B2 Making the Most of the WWW 29
JavaScript Functions
Often the JavaScript takes the form of a function in the head of the HTML
function increment (number) { return (number + 1) }
The function is then called from somewhere in the body of the HTML:
var xx = increment(something) ;
CSCU9B2 Making the Most of the WWW 30
06/02/2017
16
Example: Event Handling
<!DOCTYPE html> <html> <head> <script> function myFunction() { alert("Hello World!"); } </script> </head> <body> <button onclick="myFunction()">Try it</button> </body> </html>
CSCU9B2 Making the Most of the WWW 31
http://www.w3schools.com/js/js_htmldom_events.asp
Function Syntax 1
• Without arguments:
function myFunction1() { some code to be executed }
• To call the function:
myFunction1();
CSCU9B2 Making the Most of the WWW 32
06/02/2017
17
Function Syntax 2
• With arguments:
function myFunction2(var1,var2) { some code to be executed }
• To call the function:
myFunction2(argument1,argument2)
CSCU9B2 Making the Most of the WWW 33
Function Syntax 3
function myFunction() { var x=5; return x; }
var myVar=myFunction();
• myVar holds the value 5
CSCU9B2 Making the Most of the WWW 34
06/02/2017
18
Other Resources
• http://www.cs.stir.ac.uk/courses/CSCU9B2/resources/
– JavaScript examples.
• To probe further try the W3schools Javascript introduction (http://www.w3schools.com/js/)
• For further information, try searching the web for Javascript tutorials, or Javascript reference, or Javascript examples, ... or any of the books on the subject!
CSCU9B2 Making the Most of the WWW 35
Top Related