Chapter 4
Introduction to Javascript
Internet Programming (TAB1033)
mnibrahim@gmail.com
Objectives
By the end of this lecture, students will be able to:
► grasp the basic concepts of javascript and DOM
► descri...
Agenda
► Javascript is NOT Java programming language
► What is javascript?
► Why learn javascript?
► Client- Server Model
...
Javascript is NOT Java
Java
► developed by SUN
► a powerful OO
programming language .
► involved compiling java
code into ...
What is Javascript?
► JavaScript is a scripting languages (lightweight)
► It is usually embedded directly into an HTML doc...
Why learn JavaScript?
► JavaScript gives HTML designers a
programming tool - HTML authors are normally
not programmers, bu...
…Why learn JavaScript?
► JavaScript can react to events - A JavaScript can
be set to execute when something happens, like
...
…Why learn JavaScript?
► JavaScript can be used to detect the visitor's
browser - A JavaScript can be used to detect the
v...
The Client-Server Model
Client Side Scripting
9 of 15
...The Client-Server Model
Server 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.ht...
Processing User Input
► Javascript uses XHTML Documents Object Model
(DOM) to process user input
► View a list of availabl...
Arithmetic Operator
Operator Description Example Result
+ Addition z = 5 + 4; z = 9
- Subtraction z = 5 – 4; z = 1
* Multi...
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
Upcoming SlideShare
Loading in...5
×

Introduction to Javascript

1,796

Published on

Getting Good with Javascript

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,796
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
54
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to Javascript

  1. 1. Chapter 4 Introduction to Javascript Internet Programming (TAB1033) mnibrahim@gmail.com
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. …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
  8. 8. …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
  9. 9. The Client-Server Model Client Side Scripting 9 of 15
  10. 10. ...The Client-Server Model Server Side Scripting 10 of 15
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. Simple Application @the Cashier ► A working example. eg_cashier_js.html 14 of 15
  15. 15. References ► http://www.w3schools.com/css/css_reference.asp 15 of 15
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×