JavaScript Introduction
Lecture Overview JavaScript background The purpose of JavaScript A first JavaScript example
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)
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
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
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)
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>
Creating a First Script Script language (Optional) <html> <body> <script type=“text/javascript"> document.write(“hello") </script> </body> </html> script tag End script tag
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
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
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”);
A First Script
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
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
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();
Using getElementById (Example) var spnDate; spnDate = document.getElementById( “spnDate"); spnDate.textContent = Date(); Variables are declared with the var keyword
Using getElementById (Example) var spnDate; spnDate = document.getElementById( “spnDate"); spnDate.textContent = Date(); Call document.getElementById() String argument containing ID of <span> tag
Using getElementById (Example) spnDate is an object with properties var spnDate; spnDate = document.getElementById( “spnDate"); spnDate.textContent = Date
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
Using getElementById (Example) var spnDate; spnDate = document.getElementById( “spnDate"); spnDate.textContent = Date(); Call the JavaScript Date() function and store the result
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
JavaScript Function (Example) Declare a function named initialize()
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
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
Creating a First Script (Example) See JavaScriptExample1.htm Pay particular attention to the order in which the script code executes
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>