Web engineering: Lecture 13, 14 - Majid Mumtaz

JavaScript, originally called LiveScript, was developed by Brendan Eich at Netscape in 1995 and was shipped with Netscape Navigator 2.0 beta releases. JavaScript is one of the 3 languages all web developers MUST learn. In this lecture, we will learn JavaScript and JavaScript in HTML. Inviting you to refer.
Nội dung trích xuất từ tài liệu:
Web engineering: Lecture 13, 14 - Majid Mumtaz Web Engineering Lecture 13-14 MAJID MUMTAZ Department of Computer Science, CIIT Wah 1 JavaScript • JavaScript, originally called LiveScript, was developed by Brendan Eich at Netscape in 1995 and was shipped with Netscape Navigator 2.0 beta releases. • Why Study JavaScript? – JavaScript is one of the 3 languages all web developers MUST learn: Basically, 1. HTML to define the content of web pages 2. CSS to specify the layout of web pages 3. JavaScript to specify the behavior of web pages 2 The Three Layers 3 JavaScript Introduction • JavaScript is the most popular programming language in the world. • JavaScript is the language for the web, for HTML, for servers, PCs, laptops, tablets, cell phones, and more. • JavaScript is a Scripting Language – A scripting language is a lightweight programming language. – JavaScript code can be inserted into any HTML page, and it can be executed by all types of web browsers. 4 JavaScript Where To • In HTML, JavaScripts must be inserted between and tags. • JavaScripts can be put in the and in the section of an HTML page. • The Tag – To insert a JavaScript into an HTML page, use the tag. – The and tells where the JavaScript starts and ends. – The lines between the and contain the JavaScript code: – In syntax, JavaScript is similar to C, Perl, and Java 5 JavaScript Functions and Events • Most often, JavaScript code is written to be executed when an event occurs, like when the user clicks a button. • If we put JavaScript code inside a function, we can call that function when an event occurs. • We will see examples in coming slides 6 JavaScript in or • You can place an unlimited number of scripts in an HTML document. • Scripts can be in the or in the section of HTML, and/or in both. • It is a common practice to put functions in the section, or at the bottom of the page. • Separating HTML and JavaScript, by putting all the code in one place, is always a good habit. 7 JavaScript in function myFunction() { document.getElementById('demo').innerHTML='My First JavaScript Function'; } My Web Page A Paragraph 8 JavaScript in My Web Page A Paragraph function myFunction() { document.getElementById('demo').innerHTML='My First JavaScript Function'; } 9 External JavaScripts • Scripts can also be placed in external files. External files often contain code to be used by several different web pages. • External JavaScript files have the file extension .js. • To use an external script, put the name of the script file in the source (src) attribute of the tag: e.g. You can place an external script reference in or as you like. The script will behave as if it was located exactly where you put the reference in the HTML document 10 JavaScript Output • JavaScript does not have any print or output functions. • In HTML, JavaScript can only be used to manipulate HTML elements. • Manipulating HTML Elements – To access an HTML element from JavaScript, you can use the document.getElementById(id) method. Use the 'id' attribute to identify the HTML element. 11 Example • My First Web Page My First Paragraph elem = document.getElementById('demo'); elem.innerHTML = 'My First JavaScript'; • The JavaScript example above is executed by the web browser. First, the browser will find the HTML element with id='demo': elem = document.getElementById('demo'); Then it will replace the element's content (innerHTML) with a new content: elem.innerHTML = 'My First JavaScript'. 12 JavaScript Syntax • In HTML, JavaScript is a sequence of statements that can be executed by the web browser. • JavaScript Statements – JavaScript statements are 'commands' to the browser. – The purpose of the statements is to tell the browser what to do. – This JavaScript statement tells the browser to write 'Hello world' inside an HTML element with id='demo': e.g. document.getElementById('demo').innerHTML='Hello World'; ; Semicolon separates JavaScript statements. Normally you add a semicolon at the end of each executable statement. 13 JavaScript Code • javaScript code (or just JavaScript) is a sequence of JavaScript statements. • Each statement is executed by the browser in the sequence they are written. • This example will manipulate two HTML elements: – document.getElementById('demo').innerHTML=' Hello World'; document.getElementById('myDIV').innerHTML= 'How are you?'; 14 JavaScript Code Bloc ...