Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
80 views

All Rights Reserved © Valores Corporativos Softtek S.A. de C.V. 2015.internal

This document contains information about JavaScript and the Document Object Model (DOM). It begins with an introduction to JavaScript, including when scripts are executed, using external files, and basic syntax like variables, data types, and functions. It then covers the DOM, explaining how to access and manipulate HTML elements via their IDs, names, and tags. Common properties are described, such as ID, name, and style, which allows modifying CSS. The document provides examples of DOM manipulation through changing image sources and innerHTML.

Uploaded by

Abhinav Choudhary
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
80 views

All Rights Reserved © Valores Corporativos Softtek S.A. de C.V. 2015.internal

This document contains information about JavaScript and the Document Object Model (DOM). It begins with an introduction to JavaScript, including when scripts are executed, using external files, and basic syntax like variables, data types, and functions. It then covers the DOM, explaining how to access and manipulate HTML elements via their IDs, names, and tags. Common properties are described, such as ID, name, and style, which allows modifying CSS. The document provides examples of DOM manipulation through changing image sources and innerHTML.

Uploaded by

Abhinav Choudhary
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 65

All Rights Reserved Valores Corporativos Softtek S.A. de C.V. 2015.Internal.

Disclaimer
Document Name:
Data Classification: INTERNAL
Disclaimer
The contents of this document are property of Softtek, and are for internal use only. Any reproduction in whole
or in part is strictly prohibited without the written permission of Softtek.
This document is subject to change. Comments, corrections or questions should be directed to the author.

Revision Chart
The following chart list the revisions made to this document. Use this to describe the changes and additions
each time this document is re-published. The description should be detailed as possible and include the names
of the reviewers who request the changes.

Version
No.

Version Date

Types of Changes

All Rights Reserved Valores Corporativos Softtek S.A. de C.V. 2015. Internal.

Owner/Author

Date of Review /
Expiration

All Rights Reserved Valores Corporativos Softtek S.A. de C.V. 2015. Internal.

JavaScript
JavaScript is a front-end scripting language
developed by Netscape for dynamic content
Lightweight, but with limited capabilities
Can be used as object-oriented language

Client-side technology
Embedded in your HTML page
Interpreted by the Web browser

Simple and flexible


Powerful to manipulate the DOM
4

JavaScript Advantages
JavaScript allows interactivity such as:
Implementing form validation
React to user actions, e.g. handle keys
Changing an image on moving mouse over it
Sections of a page appearing and disappearing
Content loading and changing dynamically
Performing complex calculations
Custom HTML controls, e.g. scrollable table
Implementing AJAX functionality
5

What Can JavaScript Do?


Can handle events
Can read and write HTML elements and
modify the DOM tree
Can validate form data
Can access / modify browser cookies
Can detect the users browser and OS
Can be used as object-oriented language
Can handle exceptions
Can perform asynchronous server calls
(AJAX)
6

The First Script


first-script.html
<html>
<body>
<script type="text/javascript">
alert('Hello JavaScript!');
</script>
</body>
</html>

Another Small Example


small-example.html
<html>
<body>
<script type="text/javascript">
document.write('JavaScript rulez!');
</script>
</body>
</html>

Using JavaScript Code


The JavaScript code can be placed in:
<script> tag in the head
<script> tag in the body not recommended
External files, linked via <script> tag the
head
Files usually have .js extension
<script src="scripts.js"
type="text/javscript">
<! code placed here will not be executed!
-->
</script>
Highly recommended

The .js files get cached by the browser

JavaScript When is
Executed?

JavaScript code is executed during the page


loading or when the browser fires an event

All statements are executed at page loading


Some statements just define functions that can
be called later

Function calls or code can be attached as


"event handlers" via tag attributes
Executed when the event is fired by the
browser
<img src="logo.gif"
onclick="alert('clicked!')" />
10

Calling a JavaScript
Function from Event
Handler Example

<html>
image-onclick.html
<head>
<script type="text/javascript">
function test (message) {
alert(message);
}
</script>
</head>
<body>
<img src="logo.gif"
onclick="test('clicked!')" />
</body>
</html>

11

Using External Script Files


Using external script files:

<html>
external<head>
JavaScript.html
<script src="sample.js" type="text/javascript">
</script>
</head>
The <script> tag is always
<body>
empty.
<button onclick="sample()" value="Call
JavaScript
function from sample.js" />
</body>
External
JavaScript file:
</html>
function sample() {
alert('Hello from sample.js!')
}

sample.j
s

12

The
JavaScript
Syntax

JavaScript Syntax
The JavaScript syntax is similar to C# and
Java
Operators (+, *, =, !=, &&, ++, )
Variables (typeless)
Conditional statements (if, else)
Loops (for, while)
Arrays (my_array[]) and associative arrays
(my_array['abc'])
Functions (can return value)
Function variables (like the C# delegates)
14

Data Types
JavaScript data types:
Numbers (integer, floating-point)
Boolean (true / false)

String type string of characters


var myName = "You can use both single or
double quotes for strings";

Arrays

var my_array = [1, 5.3, "aaa"];

Associative arrays (hash tables)


var my_hash = {a:2, b:3, c:"text"};
15

Everything is Object
Every variable can be considered as object
For example strings and arrays have member
functions:
objects.html

var test = "some string";


alert(test[7]); // shows letter 'r'
alert(test.charAt(5)); // shows letter
's'
alert("test".charAt(1)); //shows letter
'e'
alert("test".substring(1,3));
//shows
var arr = [1,3,4];
'es'
alert (arr.length); // shows 3
arr.push(7); // appends 7 to end of
array
alert (arr[3]); // shows 7

16

String Operations
The + operator joins strings
string1 = "fat ";
string2 = "cats";
alert(string1 + string2);

// fat cats

What is "9" + 9?
alert("9" + 9);

// 99

Converting string to number:


alert(parseInt("9") + 9);

// 18

17

Arrays Operations and


Properties

Declaring new empty array:


var arr = new Array();

Declaring an array holding few elements:


var arr = [1, 2, 3, 4, 5];

Appending an element / getting the last element:


arr.push(3);
var element = arr.pop();

Reading the number of elements (array length):


arr.length;

Finding element's index in the array:


arr.indexOf(1);
18

Standard Popup Boxes


Alert box with text and [OK] button
Just a message shown in a dialog box:
alert("Some text here");

Confirmation box

Contains text, [OK] button and [Cancel] button:


confirm("Are
Prompt
box

you sure?");

Contains text, input field with default value:


prompt ("enter amount", 10);
19

Sum of Numbers Example


sum-ofnumbers.html
<html>
<head>
<title>JavaScript Demo</title>
<script type="text/javascript">
function calcSum() {
value1 =
parseInt(document.mainForm.textBox1.value);
value2 =
parseInt(document.mainForm.textBox2.value);
sum = value1 + value2;
document.mainForm.textBoxSum.value = sum;
}
</script>
</head>

20

Sum of Numbers Example


(2)

sum-of-numbers.html
(cont.)
<body>

<form name="mainForm">
<input type="text" name="textBox1" />
<br/>
<input type="text" name="textBox2" />
<br/>
<input type="button" value="Process"
onclick="javascript: calcSum()" />
<input type="text" name="textBoxSum"
readonly="readonly"/>
</form>
</body>
</html>
21

prompt.html

JavaScript Prompt
Example

price = prompt("Enter the price",


"10.00");
alert('Price + VAT = ' + price * 1.2);

22

Conditional Statement (if)


unitPrice = 1.30;
if (quantity > 100) {
unitPrice = 1.20;
}

Symbo
l>

Meaning
Greater than

<

Less than

>=
<=

Greater than or equal


to
Less than or equal to

==

Equal

!=

Not equal
23

Conditional Statement (if)


(2)

The condition may be of Boolean or integer type:

conditional-statements.html
var a = 0;
var b = true;
if (typeof(a)=="undefined" ||
typeof(b)=="undefined") {
document.write("Variable a or b is undefined.");
}
else if (!a && b) {
document.write("a==0; b==true;");
} else {
document.write("a==" + a + "; b==" + b + ";");
}
24

Switch Statement
The switch statement works like in C#:
switch (variable) {
switch-statements.html
case 1:
// do something
break;
case 'a':
// do something else
break;
case 3.14:
// another code
break;
default:
// something completely different
}
25

Loops
Like in C#
for loop
while loop
do while loop
var counter;
for (counter=0; counter<4; counter++) {
alert(counter);
}
while (counter < 5) {
alert(++counter);
}
loops.html
26

Functions
Code structure splitting code into parts
Data comes in, processed, result returned

function average(a, b,
c)
{
var total;
total = a+b+c;
return total/3;
}

Parameters come
in here.
Declaring
variables is
optional. Type is
never declared.
Value returned
here.
27

Function Arguments
and Return Value

Functions are not required to return a value


When calling function it is not obligatory to
specify all of its arguments
The function has access to all the arguments
passed via arguments array

function sum() {
var sum = 0;
for (var i = 0; i < arguments.length; i ++)
sum += parseInt(arguments[i]);
return sum;
}
functions-demo.html
alert(sum(1, 2, 4));
28

Document
Object Model
(DOM)

Document Object Model


(DOM)

Every HTML element is accessible via the


JavaScript DOM API
Most DOM objects can be manipulated by the
programmer
The event model lets a document to react when
the user does something on the page
Advantages
Create interactive pages
Updates the objects of a page without reloading it

30

Accessing Elements
Access elements via their ID attribute
var elem = document.getElementById("some_id")

Via the name attribute

var arr =
document.getElementsByName("some_name")
Via
tag name
var imgTags = el.getElementsByTagName("img")

Returns array of descendant <img> elements


of the element "el"

31

DOM Manipulation
Once we access an element, we can read
and write its attributes
DOM-manipulation.html
function change(state) {
var lampImg =
document.getElementById("lamp");
lampImg.src = "lamp_" + state + ".png";
var statusDiv =
document.getElementById("statusDiv");
statusDiv.innerHTML = "The lamp is " +
state";
}

<img src="test_on.gif"

32

Common Element
Properties

Most of the properties are derived from the


HTML attributes of the tag

E.g. id, name, href, alt, title, src, etc

style property allows modifying the CSS


styles of the element
Corresponds to the inline style of the element
Not the properties derived from embedded or
external CSS rules

Example: style.width, style.marginTop,


style.backgroundImage
33

Common Element Properties


(2)

className the class attribute of the tag


innerHTML holds all the entire HTML code
inside the element
Read-only properties with information for the
current element and its state
tagName, offsetWidth, offsetHeight,
scrollHeight, scrollTop, nodeType,
etc

34

Accessing Elements
through the DOM Tree
Structure

We can access elements in the DOM through


some tree manipulation properties:
element.childNodes
element.parentNode
element.nextSibling
element.previousSibling
element.firstChild
element.lastChild

35

Accessing Elements
through the DOM Tree
Example
var el = document.getElementById('div_tag');
alert (el.childNodes[0].value);
alert (el.childNodes[1].
getElementsByTagName('span').id);

<div id="div_tag">
<input type="text" value="test text" />
<div>
<span id="test">test span</span>
</div>
</div>
accessing-elements-

demo.html

Warning: may not return what you expected


due to Browser differences
36

The HTML DOM


Event Model

The HTML DOM Event Model


JavaScript can register event handlers
Events are fired by the Browser and are sent to
the specified JavaScript event handler function
Can be set with HTML attributes:
<img src="test.gif"
onclick="imageClicked()"
Can
be accessed through/>the

DOM:

var img =
document.getElementById("myImage");
img.onclick = imageClicked;
38

The HTML DOM Event Model


(2)

All event handlers receive one parameter

It brings information about the event


Contains the type of the event (mouse click,
key press, etc.)
Data about the location where the event has
been fired (e.g. mouse coordinates)
Holds a reference to the event sender
E.g. the button that was clicked

39

The HTML DOM Event Model


(3)

Holds information about the state of [Alt], [Ctrl]


and [Shift] keys
Some browsers do not send this object, but
place it in the document.event
Some of the names of the events object
properties are browser-specific

40

Common DOM Events


Mouse events:
onclick, onmousedown, onmouseup
onmouseover, onmouseout, onmousemove

Key events:
onkeypress, onkeydown, onkeyup
Only for input fields

Interface events:
onblur, onfocus
onscroll
41

Common DOM Events (2)


Form events
onchange for input fields
onsubmit
Allows you to cancel a form submission
Useful for form validation

Miscellaneous events
onload, onunload
Allowed only for the <body> element
Fires when all content on the page was loaded /
unloaded
42

onload Event Example


onload event

onload.html

<html>
<head>
<script type="text/javascript">
function greet() {
alert("Loaded.");
}
</script>
</head>
<body onload="greet()" >
</body>
</html>
43

The Built-In
Browser Objects

Built-in Browser Objects


The browser provides some read-only data
via:
window
The top node of the DOM tree
Represents the browser's window

document
holds information the current loaded document

screen
Holds the users display properties

browser
Holds information about the browser
45

DOM Hierarchy Example

window

navigator

screen

document

form

history

location

form

button

form

46

Opening New Window


Example
window.open()
windowopen.html

var newWindow = window.open("",


"sampleWindow",
"width=300, height=100, menubar=yes,
status=yes, resizable=yes");
newWindow.document.write(
"<html><head><title>
Sample Title</title>
</head><body><h1>Sample
Text</h1></body>");
newWindow.status =
"Hello folks";

47

The Navigator Object


alert(window.navigator.userAgen
t);

The
browser
window

The navigator in
the browser
window

The
userAgent
(browser ID)

48

The Screen Object


The screen object contains information
about the display
window.moveTo(0, 0);
x = screen.availWidth;
y = screen.availHeight;
window.resizeTo(x, y);

49

Document and Location


document object
Provides some built-in arrays of specific
objects on the currently loaded Web page
document.links[0].href = "yahoo.com";
document.write(
"This is some <b>bold text</b>");

document.location

Used to access the currently open URL or


redirect the browser
document.location =
"http://www.yahoo.com/";

50

Form Validation Example


form-validation.html
function checkForm()
{
var valid = true;
if (document.mainForm.firstName.value == "") {
alert("Please type in your first name!");
document.getElementById("firstNameError").
style.display = "inline";
valid = false;
}
return valid;
}

<form name="mainForm" onsubmit="return


checkForm()">
<input type="text" name="firstName" />

</form>

51

The Math Object


The Math object provides some
mathematical functions

math.html

for (i=1; i<=20; i++) {


var x = Math.random();
x = 10*x + 1;
x = Math.floor(x);
document.write(
"Random number (" +
i + ") in range " +
"1..10 --> " + x +
"<br/>");
}
52

The Date Object


The Date object provides date / calendar
functions

dates.html

var now = new Date();


var result = "It is now " + now;
document.getElementById("timeField")
.innerText = result;
...
<p id="timeField"></p>

53

Timers: setTimeout()
Make something happen (once) after a fixed
delay
var timer = setTimeout('bang()',
5000);

5 seconds after this


statement executes, this
function is called
clearTimeout(timer);

Cancels the
timer
54

Timers: setInterval()
Make something happen repeatedly at fixed
intervals
var timer = setInterval('clock()',
1000);

This function is called


continuously per 1
second.
clearInterval(timer);

Stop the
timer.
55

Timer Example
timer-demo.html
<script type="text/javascript">
function timerFunc() {
var now = new Date();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
document.getElementById("clock").value =
"" + hour + ":" + min + ":" + sec;
}
setInterval('timerFunc()', 1000);
</script>
<input type="text" id="clock" />
56

Debugging JavaScript

Debugging JavaScript
Modern browsers have JavaScript console
where errors in scripts are reported
Errors may differ across browsers

Several tools to debug JavaScript


Microsoft Script Editor
Add-on for Internet Explorer
Supports breakpoints, watches
JavaScript statement debugger; opens the
script editor

58

Firebug
Firebug Firefox add-on for debugging
JavaScript, CSS, HTML
Supports breakpoints, watches, JavaScript
console editor
Very useful for CSS and HTML too
You can edit all the document real-time: CSS,
HTML, etc
Shows how CSS rules apply to element

Shows Ajax requests and responses


Firebug is written mostly in JavaScript
59

Firebug (2)

60

JavaScript Console Object


The console object exists only if there is a
debugging tool that supports it
Used to write log messages at runtime

Methods of the console object:


debug(message)
info(message)
log(message)
warn(message)
error(message)
61

All Rights Reserved Valores Corporativos Softtek S.A. de C.V. 2015. Internal.

62

All Rights Reserved Valores Corporativos Softtek S.A. de C.V. 2015. Internal.

63

Q&A
All Rights Reserved Valores Corporativos Softtek S.A. de C.V. 2015.Internal.

All Rights Reserved Valores Corporativos Softtek S.A. de C.V. 2015. Internal.

You might also like