1. Java Script
Java Script is one of the 3 languages all web developers must learn:
HTML – To define the content of webpages
CSS – To specify the layout (Style) of web pages
JS – To program the behavior of the webpage.
Introduction to JS
JavaScript is a lightweight, interpreted scripting language with object-
based capabilities that allows you to build interactive HTML pages.
JS designed to add interactivity with HTML pages.
JS is Multi P
aradine.
A JS is usually embedded directly into HTML pages.
JS is an interpreted language (means that scripts execute without
preliminary compilation).
Browser must have built-in (JavaScript) interpreter.
Interpreted, not compiled.
More relaxed syntax and rules
Fewer and “looser” datatypes
Variables don’t need to be declared
Key construct is the function rather than the class
Contained within a webpage and integrates with its HTML/CSS
content.
It can be used for validation for login.
Are Java and Java Script the same?
They are completely two different languages
The Two scripting languages are:
Client site scripting languages
Server site scripting languages
TO create interactive UI in a webpage
Swapping, rollovers, slideshows, clickable images,
Date time stuff (e.g.: clocks, calenders)
2. The HTML DOM
(Document Object Model)
When a webpage is loaded, the browser creates a Document Object
Model of the page.
The HTML DOM model is constructed as a tree of objects.
Document
Root element<html>
Left Right
Element <head> Element <body>
Element <title> Attribute “href” Element <a> Element <h1>
Text “My title” Text: “My link” Text: “My header”
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
“The W3C Document Object Model (DOM) is a platform and language-neutral
interface that allows programs and scripts to dynamically access and update
the content, structure, and style of a document”
DOM
With object model, java script gets all the power it needs to create dynamic
HTML:
Javascript can Change the HTML Content:
3. One of the many JS HTML methods is getElementsById().
Find an HTML element (with id=”demo”) and changes the element content
(innerHTML) to “Hello JavaScript”:
Example:
Document.getElementById(“demo”).innerHTML=”Hello JavaSCript”;
DAY 3
DOM (Document Object Model):
When the object model, JS gets all the power it needs to create dynamic
HTML.
JS can change all the HTML elements in the page.
JS can change all the HTML attributes in the page.
JS can change all the CSS-styles in the page.
JS can change remove existing HTML elements and attributes.
JS can add new HTML elements and attributes.
JS can react to all existing HTML events in the page
JS can create a new HTML events in the page.
The HTML DOM is a standard object model and programming interface for
HTML. It defines:
The HTML elements as objects.
The properties of all HTML elements
The methods to access all HTML elements
The events for all HTML elements.
Class Definition:
Class is a representation of objects. Or class is a mechanism to
create objects.
The class is like a cookie
