Web Programming Java Script-Introduction

What is Javascript? JavaScript is a scripting language using for the Web. JavaScript is a programming language used to make web pages interactive. It runs on your visitor's computer and doesn't require constant downloads from your website. Before you learn JavaScript, you need to know how to write a HTML page. You may want to learn HTML first. JavaScript is used for adding functions, and features, something like validate forms, detect browsers, dynamically change background colors, open a new window, and much more What Exactly Is JavaScript?

Need to Know No, they are two completely different computer languages. Only their names are similar. If you want to learn about Java instead, we have a whole other resource section on Java. What Do I Need to Run JavaScript? Are JavaScript and Java the Same ? JavaScript support is built right into all the major web browsers, including Internet Explorer, Firefox and Safari. Provided that the visitors to your site are using web browsers that support JavaScript (most do) and have JavaScript enabled (it is by default), then your JavaScript will run when they visit the page. Do I Need to Learn Javascript to Be Able to Use It? No. There are plenty of pre-written JavaScripts that people have made available for you to plug straight into your web page. All you need to know to be able to use such scripts is how to paste the supplied code into the required places in your web page.

Need to Know (Cont…) What Do I Need to Write JavaScript? JavaScript is an interpreted language, so no special program is required to create usable code. Any plain text editor such as Notepad (one of the Accessories that comes in Windows) is quite satisfactory for being able to write JavaScript. Can I Use HTML Instead of JavaScript? No. HTML and JavaScript are two completely different things. HTML is a markup language designed for defining static web page content. JavaScript is a programming language designed for performing dynamic tasks. Sometimes the distinction is confusing because JavaScript code can go in the same file as HTML. (More on that in a minute.)

Need to Know(Cont…) Does the Javascript Go in the Same File as the HTML? It can, but your scripts will be more easily reused on multiple pages of your site if you place them in separate files. (Using a.JS extension helps identify them as Javascript.) You then just link the JavaScript to your HTML by inserting a tag. The same JavaScript can then be added to several pages just by adding the appropriate tag into each of the pages to set up the link Applications can be as subtle as welcoming a site’s visitor with the greeting “Good morning!” when it is morning in the client computer’s time zone—even though it is dinnertime where the server is located. Example:

Entering Your First Script Eaxmple 1: This is a JavaScript example <!-- document.write("Hello World!"); //--> Hi, man!

Entering Your First Script Example 2: My First Script.highlight {font-weight: bold} Let’s Script... <!-- hide from old browsers document.write(“This browser is version “ + navigator.appVersion); document.write(“ of ” + navigator.appName + “.”); // end script hiding -->

Description document.write(), meaning display text in the current document The line of text that the script writes starts with some static text (“This browser is version”) and adds some evaluated text (the version of the browser) to it. The writing continues with more static text that includes an HTML tag (“ of ”), more evaluated text (the name of the browser application), and an HTML closing tag and the sentence’s period (“.”) the appVersion property of the navigator object

Tag positions Scripts in the Head and Body A Document //script statement(s) here... //script statement(s) here...

Tag positions Two Scripts in the Body A Document //script statement(s) here... //script statement(s) here...

Tag positions Hiding Scripts from Most Old Browsers <!-- //script statement(s) here... // -->

JavaScript Statements Virtually every line of code that sits between a... tag pair is a JavaScript statement. A statement must be in the script for a purpose. Therefore, every statement does “something” relevant to the script. The kinds of things that statements do are ✦ Define or initialize a variable ✦ Assign a value to a property or variable ✦ Change the value of a property or variable ✦ Invoke an object’s method ✦ Invoke a function routine ✦ Make a decision

When Script Statements Execute Now that you know where scripts go in a document, it’s time to look at when they run.Depending on what you need a script to do, you have four choices for determining when a script runs: ✦ While a document loads ✦ Immediately after a document loads ✦ In response to user action ✦ When called upon by other script statements The determining factor is how the script statements are positioned in a document.

While a document loads—immediate execution My First Script.highlight {font-weight: bold} Let’s Script... <!-- hide from old browsers document.write(“This browser is version “ + navigator.appVersion); document.write(“ of ” + navigator.appName + “.”); // end script hiding --> HTML Page with Immediate Script Statements

Deferred scripts The other three ways that script statements run are grouped together as what I call deferred scripts. A function defines a block of script statements summoned to run some time after those statements load into the browser. Functions are clearly visible inside a tag. Once a function is loaded into the browser (commonly in the Head portion so it loads early), it stands ready to run whenever called upon. One of the times a function is called upon to run is immediately after a page loads. The window object has an event handler called onload. Unlike most event handlers, which are triggered in response to user action (for example, clicking a button), the onload event handler fires the instant that all of the page’s components (including images, Java applets, and embedded multimedia) are loaded into the browser. The onload event handler goes in the tag.

Deferred scripts Cont…. Running a Script from the onload Event Handler An onload script <!-- function done() { alert(“The page has finished loading.”); } // --> Here is some body text. Note: When the page completes loading, the onload event handler triggers the done() function. That function (simplified for this example) displays an alert dialog box.

Deferred scripts Cont…. Running a Script from User Action An onclick script <!-- function alertUser() { alert(“Ouch!”); } // --> Here is some body text. <input type=”button” name=”oneButton” value=”Press Me!” onclick=”alertUser()”> A script that runs when a user clicks a button.

Thanks