Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic

Sahar Mosleh California State University San MarcosPage 2 What is JavaScript? JavaScript was designed to add interactivity to HTML pages. A JavaScript consists of lines of executable computer code A JavaScript is usually embedded directly into HTML pages JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use JavaScript without other computer language background.

Sahar Mosleh California State University San MarcosPage 3 Are Java and JavaScript the Same? NO! Java and JavaScript are two completely different languages in both concept and design! Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++.

Sahar Mosleh California State University San MarcosPage 4 What can a JavaScript Do? 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 “Scripts" of code into their HTML pages. JavaScript can put dynamic text into an HTML page – for example the drop down menu on a web site may be old HTML code behind it but to interact with user’s input is the job of java script code. JavaScript can also used for various tricks- for example you can switch image in a page for a different one when the user rolls her mouse over it.

Sahar Mosleh California State University San MarcosPage 5 How to Put a JavaScript Into an HTML Page document.write("Hello World!") The code above will produce this output on an HTML page: Hello World!

Sahar Mosleh California State University San MarcosPage 6 Example Explained To insert a JavaScript into an HTML page, we use the tag (also use the type attribute to define the scripting language). So, the and tells where the JavaScript starts and ends:...

Sahar Mosleh California State University San MarcosPage 7 The word document.write is a standard JavaScript command for writing output to a page. By entering the document.write command between the and tags, the browser will recognize it as a JavaScript command and execute the code line. In this case the browser will write Hello World! to the page: document.write("Hello World!") Note: If we had not entered the tag, the browser would have treated the document.write("Hello World!") command as pure text, and just write the entire line on the page.

Sahar Mosleh California State University San MarcosPage 8 Another example: Paragraph 1 document.bgColor = "RED";

Sahar Mosleh California State University San MarcosPage 9 Example Explained is a HTML code to set the background color to white. To insert a JavaScript into an HTML page, we use the to start the JavaScript code Document.bgcolor = “ RED”; set the background to red. to end the JavaScript code

Sahar Mosleh California State University San MarcosPage 10

Sahar Mosleh California State University San MarcosPage 11 Ending Statements With a Semicolon? With traditional programming languages, like C++ and Java, each code statement has to end with a semicolon. Many programmers continue this habit when writing JavaScript, but in general, semicolons are optional! However, semicolons are required if you want to put more than one statement on a single line.

Sahar Mosleh California State University San MarcosPage 12 Try It Out Paragraph 1 // Script block 1 alert("First Script Block"); Paragraph 2 // Script block 2 document.bgColor = "RED"; alert("Second Script Block"); Paragraph 3

Sahar Mosleh California State University San MarcosPage 13 How Does it work? The first part of the page is the same as our earlier example. The background is set to white and paragraph 1 is written. Paragraph 1 The first new section in the first script block: // Script block 1 alert("First Script Block"); // Script block 1 is just a comment, browser ignores anything after //

Sahar Mosleh California State University San MarcosPage 14 alert("First Script Block"); The alert function enable us to alert or inform the user about something, by displaying a message box. The message to be given in the message box is specified inside the parenthesis of the alert() function and is known as the functions’ parameter.

Sahar Mosleh California State University San MarcosPage 15 once you click OK, the browser carries on parsing down the page through the following lines: // Script block 2 document.bgColor = "RED"; alert("Second Script Block");

Sahar Mosleh California State University San MarcosPage 16

Sahar Mosleh California State University San MarcosPage 17 The second paragraph is displayed and the second block of JavaScript is run. First line is comment Second line is changing the background color. The third line is the alert function When we close the message box, the browser moves on to the next lines of the code in the page, displaying the third paragraph.

Sahar Mosleh California State University San MarcosPage 18

Sahar Mosleh California State University San MarcosPage 19 We have seen in the preceding example that by using JavaScript we can change the background color of the page by using BGCLOR property of document. We are able to use this property with both internet explorer and Netscape browsers. However for other property and functions this is not true. the material In this course is going to be compatible with internet explorer and Netscape browsers version 4 and above. Over the course we will be developing part of a web-based application, namely Trivia Quiz that works with both Netscape and explorer 4.0. We mainly later on in the course focus on the property and the functions that works with the Explorer 6.0 (new internet explorer)