Topic 9: Understanding The Functions of Javascript

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

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

Topic 9: Understanding The Functions of Javascript

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Topic 9: Understanding The Functions of Javascript

Uploaded by

Copyright:

Available Formats

Topic 9: Understanding the functions of Javascript

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

<h2>My First Page</h2>

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

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

var ret = document.title;

var ret = document.URL;

alert("Document URL : " + ret );

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

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

alert("Second element : " + ret );

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

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

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

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

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

<p>My first paragraph.</p>

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

//Displaying Date, Time

<h2>My First JavaScript</h2>

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

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.

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

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

<h2>JavaScript Regular Expressions</h2>

var str = "Visit NICE!";

// Single line comment

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

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

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

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

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

if (time < 10) {

greeting = "Good morning";

} else if (time < 20) {

greeting = "Good day";

Switch – Case Statements

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

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

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

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

<h2>JavaScript While Loop</h2>

var text = "";

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

You might also like