Scribd
Upload
51 views

Topic 9: Understanding The Functions of Javascript

The document discusses the functions of JavaScript and the Document Object Model (DOM). It explains that a web page loaded in the browser window becomes a document object that represents the HTML document. The document object has properties that allow accessing and modifying the document content. The DOM organizes all content in a hierarchical structure with the window and document objects at the top. JavaScript can then select and modify any element, attribute, or style in the page by accessing the DOM tree. Several examples are provided to demonstrate how JavaScript can manipulate the DOM to change document content and properties.

Uploaded by

Jonathan Jeevaratnam
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
51 views

Topic 9: Understanding The Functions of Javascript

The document discusses the functions of JavaScript and the Document Object Model (DOM). It explains that a web page loaded in the browser window becomes a document object that represents the HTML document. The document object has properties that allow accessing and modifying the document content. The DOM organizes all content in a hierarchical structure with the window and document objects at the top. JavaScript can then select and modify any element, attribute, or style in the page by accessing the DOM tree. Several examples are provided to demonstrate how JavaScript can manipulate the DOM to change document content and properties.

Uploaded by

Jonathan Jeevaratnam
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Topic 9: Understanding the functions of Javascript

Every web page resides inside a browser window which can be considered as an object.

A Document object represents the HTML document that is displayed in that window. The Document
object has various properties that refer to other objects which allow access to and modification of
document content.

The way document content is accessed and modified is called the Document Object Model, or DOM.
The Objects are organized in a hierarchy. This hierarchical structure applies to the organization of
objects in a Web document.

When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of objects:

 Window object: Top of the hierarchy. It is the outmost element of the object hierarchy.

 Document object: Each HTML document that gets loaded into a window becomes a document
object. The document contains the contents of the page.

 Form object: Everything enclosed in the <form>….</form> tags set the form object.

1
 Form control elements: The form object contains all the elements defined for that object such
as text fields, buttons, radio buttons, and checkboxes.

JavaScript can change all the HTML elements, HTML attributes, CSS styles …. in
the page.

Example 1:

In the example below, getElementById is a method, while innerHTML is a property.


The following example changes the content (the innerHTML) of the <p> element
with id="demo":

<!DOCTYPE html>

<html>

<body>

<h2>My First Page</h2>

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML = "Hello World!";

</script>

</body>

</html>

Example 2:

<html>

<head>

<title> Document Title </title> Another method of saying Java


script
<script type="text/javascript">

<!--

function myFunc()

var ret = document.title;

2
alert("Document Title : " + ret ); You are calling to document (DOM)

var ret = document.URL;

alert("Document URL : " + ret );


You are calling to document (DOM)
var ret = document.forms[0];

alert("Document First Form : " + ret );

var ret = document.forms[0].elements[1];

alert("Second element : " + ret );

//-->

</script>

</head>

<body>

<h1 id="title">This is main title</h1>

<p>Click the following to see the result:</p>


<form name="FirstForm">

<input type="button" value="Click Me" onclick="myFunc();" />

<input type="button" value="Cancel">

</form>

<form name="SecondForm">

<input type="button" value="Don't ClickMe"/>

</form>

</body>

</html>

More Examples

<!DOCTYPE html>

<html>

<body>

3
Alert boxes/ Message boxes
<h1>My First Web Page</h1>

<p>My first paragraph.</p>

<button onclick="document.write(5 + 6)">Try it</button>

</body>

</html>

//Displaying Date, Time

<!DOCTYPE html>

<html>

<body>

<h2>My First JavaScript</h2>

<button type="button"

onclick="document.getElementById('demo').innerHTML = Date()">

Click me to display Date and Time.</button>

<p id="demo"></p>

</body>

</html>

Theory Model Questions Next day, I provide my answers

1. What is a relational database?

2. What is a flow chart in programming?

3. Design a flow chart to input 2 numbers and display the total.

4
Regular Expressions

A regular expression is a sequence of characters that forms a search pattern.

When you search for data in a text, you can use this search pattern to describe what
you are searching for.

A regular expression can be a single character, or a more complicated pattern.

<html>

<body>

<h2>JavaScript Regular Expressions</h2>

<p>Search a string for "NICE", and display the position of the match:</p>

<p id="demo"></p>

<script>

var str = "Visit NICE!";

var n = str.search(/nice/i);

document.getElementById("demo").innerHTML = n;

</script>

</body>

</html>

Comments

<html>

<body>

<h1 id="myH"></h1>

<p id="myP"></p>

<script>

// Single line comment


5
/*

multi

line

comment

*/

document.getElementById("myH").innerHTML = "JavaScript Comments";

document.getElementById("myP").innerHTML = "My first paragraph.";

</script>

</body>

</html>

If-Else Conditions

<html>

<body>

<p>Click the button to get a time-based greeting:</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>

function myFunction() {

var greeting;

var time = new Date().getHours();

if (time < 10) {

greeting = "Good morning";

} else if (time < 20) {

greeting = "Good day";

} else {

6
greeting = "Good evening";

document.getElementById("demo").innerHTML = greeting;

</script>

</body>

</html>

Switch – Case Statements

The getDay() method returns the weekday as a number between 0 and 6.

(Sunday=0, Monday=1, Tuesday=2 ..)

<html>

<body>

<p id="demo"></p>

<script>

var day;

switch (new Date().getDay()) {

case 0:

day = "Sunday";

break;

case 1:

day = "Monday";

break;

case 2:

day = "Tuesday";

7
break;

case 3:

day = "Wednesday";

break;

case 4:

day = "Thursday";

break;

case 5:

day = "Friday";

break;

case 6:

day = "Saturday";

document.getElementById("demo").innerHTML = "Today is " + day;

</script>

</body>

</html>

While Loop

<html>

<body>

<h2>JavaScript While Loop</h2>

<p id="demo"></p>

<script>

var text = "";

var i = 0;

8
while (i < 20) {

text += "<br>The number is " + i;

i++;

document.getElementById("demo").innerHTML = text;

</script>

</body>

</html>

You might also like