Javascript
advertisement
Javascript
Outline
• Introduction
• Fundamental of JavaScript
• Javascript events management
• DOM and Dynamic HTML (DHTML)
Introduction - Outline
• Introduction
– What is Javacript?
– What Javascript can do?
– Examples usage of Javascript
– How to use Javascript?
What is Javascript
• Official name: ECMAScript maintain by
ECMA organisations
• Invented by Brendan Eich at Netscape
(with Navigator 2.0)
• Development is still in progress!
What is Javascript
• Java and Javascript is not the SAME – only
similar to Java and C++
• The fundamentals of Javascript are
similar to Java and/or C++
What is Javascript?
• was designed to add interactivity to HTML
•
•
•
•
•
•
•
pages
Is a scripting language
an interpreted language (means that scripts
execute without preliminary compilation)
Case-sensitive
Must be embedded into HTML
Browser dependent
Execute whenever the HTML doc. which contain
the script open by browser.
Free to use without license
What Javascript can do?
• JavaScript can read and write HTML elements
• JavaScript can react to events
• JavaScript can be used to validate data
• JavaScript can be used to detect the visitor's
browser
Examples usage of Javascript
• Event management
• Form management & verification
• Dynamic HTML (DHTML)
• Client-Server application – AJAX
• activity 01
How to use Javascript?
– activity 02
• Inside the head tag (head section)
• Within the body tag (body section)
• In an external file (external script)
How to use Javascript?
- head section
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event");
}
</script>
</head>
<body onload="message()">
</body>
</html>
How to use Javascript?
- body section
<html>
<body>
<script type="text/javascript">
document.write("Hello World! from Javascript");
</script>
</body>
</html>
How to use Javascript?
- external script
<html>
<head>
<script src="myjs.js">
</script>
</head>
<body>
<input type="button" onclick="popup()" value="Click Me!">
</body>
</html>
// JavaScript Document (myjs.js)
function popup() {
alert("Hello World")
}
How to use Javascript?
• All code inside head tag (except in
function) will be executed first before the
html <body> load
• js-sequence.html
Use in alert box
Debugging
• Activity 03
• Chrome > menu > more tools >
developer tools > console
• Firefox > developer > developer toolbar >
click wrench > console
Simple JS application –
input/output – activity 4
Javascript Fundamental
• A light Java/C++
• All other things are more or less the same:
– Keyword, variables
– Operator
– Conditional statement
– Looping etc.
• Case sensitive
• No strong typing in JS for variable
Javascript Variables – activity 5
• Variables name – case sensitive
• No type!
• Can change type during execution
– Activity 05 - a
• Use double qoute for character and string
variable
• Cannot use reserve word for variable
name!
OUTPUT:
10
rosely
25
JS – Reserve Word
Javascript variables operation
• Arithmetic operations – same as Java/C++
• + operators is overloaded, can be used for string
• Number + string (or vice versa), result string
– Activity 05 - b
– A = 2 + 5 (result 7)
– A = 2 + “5” (result 25)
– A = A + 2 (result 252)
OUTPUT:
2
25
252
JS Operators
JS Operators
Javascript – Conditional
expressions – activity 06
• If else, switch statement – same as
C++/Java
• Boolean
– Value 0, false = false
– Value 1, true = true
• String comparison, use the quote!
– if (password == “007”)
• Check the example!
Javascript – Loop – Activity 7
• for loop, while loop – same as C++/Java
• Use break statement to exit loop
• JavaScript For...In Statement
– used to loop (iterate) through the elements of
an array or through the properties of an
object.
– var mycars = new Array();
– for (x in mycars)
• document.write(mycars[x] + "<br />");
• Activity 07
Javascript Array
– activity 08 (.1, .2, .3)
• Array is a built-in object in JS
– http://www.w3schools.com/jsref/jsref_obj_array.asp
• Means have methods and properties
• Important properties:
– length (total elements)
– For traversing array elements
• Example method:
– sort() : sorting array elements
– join() : combine all array elements into a string
Javascript Array - creating
var a = new Array(12);
var b = new Array();
var c = new Array(12,10,11);
var d = [12,10,11]; // same as c
var e = [1,,,10]; // 4 elements array, only first & last
element initialized
Javascript array: inserting values
var A =new Array();
A[0]= 10;
A[1]= 20;
A[2]=“Ali”;
A[3]=2.34;
Result:
A[0]
10
A[1]
20
A[2]
Ali
A[3]
2.34
JS Array: creating and accessing
JS Array: sort method
Javascript Array - Multidimensional
– activity 08.4
• Technically, JavaScript doesn't support multi•
•
dimensional arrays
Because array is an object, you can put object
inside of another object, so emulating a multi
dimensional array
So it is possible to have a different dimension
(column) for each row!
Javascript Array - Multidimensional
• var myarray=new Array(3)
• Create a multidimensional array
Javascript Array - Multidimensional
Javascript Array - Multidimensional
Javascript Function – Activity 9
• Functions in Javascript behave similar to
numerous programming languages (C,
C++, PHP, etc).
• No type!
• Put in head section or external
• Variables inside a function is local
• Use return to return value and exiting the
function (return without value) without
finishing
Javascript Functions
Involves two steps:
• Define: to define what processes should be taken
• Call/Invoke: to execute the functions
Syntax of function definition:
function function_name (param1, param2, .., param_n)
//parameters are optional
{
//function’s code goes here
return value_or_object; //optional
}
Javascript function – activity 09
Javascript – Window & Boxes
Activity 10
– Alert message
– Prompt (getting input)
– Confirm message
– Redirection
JS: Alert
• Creating message box
• No input, only Ok button to continue
• Useful for debugging
– alert (“hello world”);
– var name = “rosely”;
– alert (“hello ” + name);
– var age = 17;
– alert (“your age is: “ + age);
JS: Prompt
• Getting input from user
– name = window.prompt ("Please enter your name", “polan");
JS: Confirm
• Confirmation are most often used to
confirm an important action that is taking
place on a website.
• For example they may be about to submit
an order or about to visit a link that will
take them away from the current website.
JS: Comment
• Same as Java/C++
– // single line comment
– /*
– this
– is
– a multi line comment */
JS: Redirect
• To send user to your new website location
• In case of changing website
address/domain