Your SlideShare is downloading. ×
Introduction to Javascript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Introduction to Javascript

1,707
views

Published on

Getting Good with Javascript …

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,707
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
52
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Chapter 4 Introduction to Javascript Internet Programming (TAB1033) mnibrahim@gmail.com
  • 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. 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. 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. 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. 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. …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. …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. The Client-Server Model Client Side Scripting 9 of 15
  • 10. ...The Client-Server Model Server Side Scripting 10 of 15
  • 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. 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. 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. Simple Application @the Cashier ► A working example. eg_cashier_js.html 14 of 15
  • 15. References ► http://www.w3schools.com/css/css_reference.asp 15 of 15