Upload
firdaus-adib
View
1.679
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Getting Good with Javascript
Citation preview
Chapter 4Introduction to Javascript
Internet Programming (TAB1033)[email protected]
Objectives
By the end of this lecture, students will be able to:
► grasp the basic concepts of javascript and DOM
► describe the Client-Server Model► differentiate between client-side scripting
and server-side scripting► develop a simple javascript that involves
simple arithmetic operations
2 of 15
Agenda
► Javascript is NOT Java programming language
► What is javascript?► Why learn javascript?► Client- Server Model► Where Javascript Can Be Located?► Processing User Input, DOM.► e.g @the cashier► References
3 of 15
Javascript is NOT Java
Java► developed by SUN► a powerful OO
programming language .
► involved compiling java code into executable applications.
► Java programs created for use in a web page is called APPLET.
javascript
► Designed by Netscape
► A powerful OO scripting language
► Need an interpreter (Browser dependent)
► To enhance the interactivity of web pages
4 of 15
What is Javascript?
► JavaScript is a scripting languages (lightweight)► It is usually embedded directly into an HTML doc► Is an interpreted language – browser dependent► JavaScript provides a programming language that
allows pages to escape from being static marked-up information. – dynamic & interactive
► JavaScript is used in millions of Web pages to add functionality, validate forms, detect browsers, and much more. It is free!!!
► Pages that think.
5 of 15
Why learn JavaScript?
► JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages
► JavaScript can put dynamic text into an HTML page - A JavaScript statement like this: document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page
6 of 15
…Why learn JavaScript?
► JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element
► JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element
► JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server.
7 of 15
…Why learn JavaScript?
► JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser
► JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer
8 of 15
The Client-Server ModelClient Side Scripting
9 of 15
...The Client-Server ModelServer Side Scripting
10 of 15
Where Javascript Can Be Located?
1. In the <body> section eg_js_01_body.html
2. In the <head> section eg_js_01_head.html
3. As an external file eg_js_01_external.html
11 of 15
Processing User Input
► Javascript uses XHTML Documents Object Model (DOM) to process user input
► View a list of available objects http://www.w3schools.com/js/js_obj_htmldom.asp
► javascript event reference http://www.w3schools.com/jsref/jsref_events.asp
► Click eg_js_02.html to view an example of DOM and onchange() event.
► eg_js_01.html example of event, onclick().
12 of 15
Arithmetic Operator
Operator Description Example Result
+ Addition z = 5 + 4; z = 9
- Subtraction z = 5 – 4; z = 1
* Multiplication z = 5 * 4; z = 20
/ Division z = 5 / 4; z = 1.25
% Modulus (remainder)
z = 5 % 4; z = 1
++ Increment z = 1;y = ++z;
y = 2
-- Decrement z = 1;y = --z;
y = 0
13 of 15
Simple Application @the Cashier
► A working example. eg_cashier_js.html
14 of 15
References
► http://www.w3schools.com/css/css_reference.asp
15 of 15