Introduction to Javascript
Jan 28, 2015
Getting Good with Javascript
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
Related Documents
