Download presentation
Presentation is loading. Please wait.
1
JavaScript Introduction
2
Lecture Overview JavaScript background The purpose of JavaScript
A first JavaScript example
3
History Lesson JavaScript is NOT Java Started at Netscape in 1995
Microsoft released its own version 'JScript" in 1996 JavaScript is the default scripting language in .NET and the Web for that matter (VBScript has pretty much faded away)
4
What do we do with JavaScript?
Adds sizzle to pages (Animation) Dynamic HTML Client side data entry validation Reduce the load on overburdened servers Process and manage cookies AJAX to load parts of Web pages jQuery layered on top of JavaScript to make common tasks easy
5
What is JavaScript? (1) It’s a programming language that resembles Java but is loosely typed and interpreted Implementations European Computer Manufacturers Association created ECMAScript to standardize different scripting versions See ECMA-262 I’ll try to conform There are others It’s a “C ish” language
6
What is JavaScript (2) Most of what we do is to access the object model supported by the underlying browser Remember an HTML document is hierarchical – Now we can write programs to navigate that hierarchy The W3C defines the Document Object Model (DOM)
7
Creating a First Script
<script> tag appears in a <head> or <body> tag type argument denotes that it’s JavaScript type is no longer required in HTML 5 Example: <script> document.write(“hello”); </script>
8
Creating a First Script
Script language (Optional) <html> <body> <script type=“text/javascript"> document.write(“hello") </script> </body> </html> script tag End script tag
9
Script Placement (1) A document may have multiple <script> blocks Scripts in a <head> block Create procedures here Before or after the <style> section is fine Scripts in a <body> block Code executes as the page is rendered Importing external script files This is the recommended place to put generic functions and to create reusable libraries
10
Script Placement (2) Scripts appearing in a <head> tag but outside a procedure execute first in the order they appear Code inside a procedure is not executed unless explicitly called Scripts appearing in a <body> tag execute as they are encountered The placement has an effect on page rendering
11
The document Object Recall that there exists a hierarchical in-memory representation of an HTML document This is maintained by the browser in the document object JavaScript can be used to write HTML output to the document document.write(“Message”);
12
A First Script
13
A First Event-Driven JavaScript Program
Create JavaScript statements to display the current date via the getElementById() method and Date() function Create a JavaScript function (event handler) containing the above code Wire the event handler to the function that will execute the function immediately after the page finishes loading
14
Using getElementById()
It’s a key to working with JavaScript It gets a reference to an element having a specific value for the ID property That’s why ID must be unique Like a variable, it’s a unique identifier Once we have a reference to an element, we can manipulate it
15
Using getElementById (Example)
Get a reference to the element <span> whose ID property has a value of spnDate and display the current date as that tag’s content var spnDate; spnDate = document.getElementById( “spnDate"); spnDate.textContent = Date();
16
Using getElementById (Example)
var spnDate; spnDate = document.getElementById( “spnDate"); spnDate.textContent = Date(); Variables are declared with the var keyword
17
Using getElementById (Example)
var spnDate; spnDate = document.getElementById( “spnDate"); spnDate.textContent = Date(); Call document.getElementById() String argument containing ID of <span> tag
18
Using getElementById (Example)
spnDate is an object with properties var spnDate; spnDate = document.getElementById( “spnDate"); spnDate.textContent = Date
19
Using getElementById (Example)
var spnDate; spnDate = document.getElementById( “spnDate"); spnDate.textContent = Date(); textContent is a property of the <span> tag. As the name implies it stores a string
20
Using getElementById (Example)
var spnDate; spnDate = document.getElementById( “spnDate"); spnDate.textContent = Date(); Call the JavaScript Date() function and store the result
21
JavaScript Functions A JavaScript function is a block of code designed to perform a particular task In the simplest case a function has the following syntax function name(){ // statements } The function keyword declares a function The function name starts with a letter and contains letters or numbers. Followed by parameters () Curly braces surround the statements to execute
22
JavaScript Function (Example)
Declare a function named initialize()
23
Wiring an Event Triggers, called events fire as the user interacts with the browser and as the page loads The onload event fires after the page loads To connect an event to a function, you create and event handler
24
Wiring an Event Event handlers relate to an element (tag)
They are implemented as element attributes The attribute key contains the event name The attribute value contains the function name The () are required Wire the initialize function to the <body>’s onload() event
25
Creating a First Script (Example)
See JavaScriptExample1.htm Pay particular attention to the order in which the script code executes
26
Handling Java Incapable Browsers
Include the <noscript> directive to display a message when JavaScript is disabled <html> <body> <script> document.write("Greetings") </script> <noscript> <p>JavaScript is not enabled.</p> </noscript> </body> </html>
Similar presentations
