Java Script Basic Sahar Mosleh California State University
Java. Script Basic Sahar Mosleh California State University San Marcos Page 1
What is Java. Script? • Java. Script was designed to add interactivity to HTML pages. • A Java. Script consists of lines of executable computer code • A Java. Script is usually embedded directly into HTML pages • Java. Script is an interpreted language (means that scripts execute without preliminary compilation) • Everyone can use Java. Script without other computer language background. Sahar Mosleh California State University San Marcos Page 2
Are Java and Java. Script the Same? • NO! • Java and Java. Script 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 Marcos Page 3
What can a Java. Script Do? • Java. Script gives HTML designers a programming tool HTML authors are normally not programmers, but Java. Script is a scripting language with a very simple syntax! Almost anyone can put small “Scripts" of code into their HTML pages. • Java. Script 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. • Java. Script 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 Marcos Page 4
How to Put a Java. Script Into an HTML Page <html> <body> <SCRIPT LANGUAGE="Java. Script“ type=“text/Java. Script”> document. write("Hello World!") </script> </body> </html> • The code above will produce this output on an HTML page: Hello World! Sahar Mosleh California State University San Marcos Page 5
Example Explained • To insert a Java. Script into an HTML page, we use the <script> tag (also use the type attribute to define the scripting language). • So, the <script type="text/javascript"> and </script> tells where the Java. Script starts and ends: <html> <body> <SCRIPT LANGUAGE="Java. Script“ type=“text/Java. Script”>. . . </script> </body> </html> Sahar Mosleh California State University San Marcos Page 6
• The word document. write is a standard Java. Script command for writing output to a page. • By entering the document. write command between the <script type="text/javascript"> and </script> tags, the browser will recognize it as a Java. Script command execute the code line. In this case the browser will write Hello World! to the page: <html> <body> <SCRIPT LANGUAGE="Java. Script“ type=“text/Java. Script”> document. write("Hello World!") </script> <body> </html> • Note: If we had not entered the <script> 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 Marcos Page 7
Another example: <html> <body bgcolor="white"> <P>Paragraph 1</P> <SCRIPT LANGUAGE="Java. Script“ type=“text/Java. Script”> document. bg. Color = "RED"; </SCRIPT> </body> </html> Sahar Mosleh California State University San Marcos Page 8
Example Explained • <BODY BGCOLOR=“WHITE”> is a HTML code to set the background color to white. • To insert a Java. Script into an HTML page, we use the <SCRIPT LANGUAGE="Java. Script“ type=“text/Java. Script”> to start the Java. Script code • Document. bgcolor = “ RED”; set the background to red. • <SCRIPT> to end the Java. Script code Sahar Mosleh California State University San Marcos Page 9
Sahar Mosleh California State University San Marcos Page 10
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 Java. Script, 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 Marcos Page 11
Try It Out <html> <body bgcolor="white"> <P>Paragraph 1</P> <SCRIPT LANGUAGE="Java. Script"> // Script block 1 alert("First Script Block"); </SCRIPT> <P>Paragraph 2</P> <SCRIPT LANGUAGE="Java. Script"> // Script block 2 document. bg. Color = "RED"; alert("Second Script Block"); </SCRIPT> <P>Paragraph 3</P> </body> </html> Sahar Mosleh California State University San Marcos Page 12
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. <html> <body bgcolor="white"> <P>Paragraph 1</P> • The first new section in the first script block: <SCRIPT LANGUAGE="Java. Script"> // Script block 1 alert("First Script Block"); </SCRIPT> • // Script block 1 is just a comment, browser ignores anything after // Sahar Mosleh California State University San Marcos Page 13
• 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 Marcos Page 14
• once you click OK, the browser carries on parsing down the page through the following lines: <SCRIPT LANGUAGE="Java. Script"> // Script block 2 document. bg. Color = "RED"; alert("Second Script Block"); </SCRIPT> Sahar Mosleh California State University San Marcos Page 15
Sahar Mosleh California State University San Marcos Page 16
• The second paragraph is displayed and the second block of Java. Script 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 Marcos Page 17
Sahar Mosleh California State University San Marcos Page 18
• We have seen in the preceding example that by using Java. Script 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) Sahar Mosleh California State University San Marcos Page 19
- Slides: 19
