Introduction to Javascript
•Descargar como PPT, PDF•
1 recomendación•1,661 vistas
This document provides an overview of JavaScript and DOM for a lecture on internet programming. It outlines the objectives of understanding basic JavaScript concepts and the client-server model. The agenda covers what JavaScript is and why it is useful, where JavaScript code can be located, and how to process user input with DOM. It also gives examples of arithmetic operators in JavaScript and a simple cashier application example.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (17)
Destacado
Destacado (20)
Similar a Introduction to Javascript
Similar a Introduction to Javascript (20)
Más de Firdaus Adib
Más de Firdaus Adib (20)
Último
Último (20)
Introduction to Javascript
- 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