sahar mosleh california state university san marcospage 1 javascript basic
Post on 14-Dec-2015
217 Views
Preview:
TRANSCRIPT
Sahar Mosleh California State University San Marcos Page 1
JavaScriptBasic
Sahar Mosleh California State University San Marcos Page 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 Marcos Page 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 Marcos Page 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 Marcos Page 5
How to Put a JavaScript Into an HTML Page
<html><body>
<SCRIPT LANGUAGE="JavaScript“ type=“text/JavaScript”>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 6
Example Explained • To insert a JavaScript 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 JavaScript starts and ends:
<html><body><SCRIPT LANGUAGE="JavaScript“ type=“text/JavaScript”> ...
... </script> </body> </html>
Sahar Mosleh California State University San Marcos Page 7
• The word document.write is a standard JavaScript 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 JavaScript command and execute the code line. In this case the browser will write Hello World! to the page:
<html><body> <SCRIPT LANGUAGE="JavaScript“ type=“text/JavaScript”>
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 8
Another example:
<html><body bgcolor="white"><P>Paragraph 1</P><SCRIPT LANGUAGE="JavaScript“ type=“text/JavaScript”>
document.bgColor = "RED";
</SCRIPT>
</body></html>
Sahar Mosleh California State University San Marcos Page 9
Example Explained
• <BODY BGCOLOR=“WHITE”> is a HTML code to set the
background color to white.
• To insert a JavaScript into an HTML page, we use the <SCRIPT LANGUAGE="JavaScript“ type=“text/JavaScript”> to start the JavaScript code
• Document.bgcolor = “ RED”; set the background to red.
• <SCRIPT> to end the JavaScript code
Sahar Mosleh California State University San Marcos Page 10
Sahar Mosleh California State University San Marcos Page 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 Marcos Page 12
Try It Out
<html><body bgcolor="white"><P>Paragraph 1</P><SCRIPT LANGUAGE="JavaScript"> // Script block 1 alert("First Script Block");</SCRIPT><P>Paragraph 2</P><SCRIPT LANGUAGE="JavaScript"> // Script block 2 document.bgColor = "RED"; alert("Second Script Block");</SCRIPT><P>Paragraph 3</P></body></html>
Sahar Mosleh California State University San Marcos Page 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.
<html><body bgcolor="white"><P>Paragraph 1</P>
• The first new section in the first script block:<SCRIPT LANGUAGE="JavaScript">
// 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 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 Marcos Page 15
• once you click OK, the browser carries on parsing down the page through the following lines:
<SCRIPT LANGUAGE="JavaScript"> // Script block 2 document.bgColor = "RED"; alert("Second Script Block");
</SCRIPT>
Sahar Mosleh California State University San Marcos Page 16
Sahar Mosleh California State University San Marcos Page 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 Marcos Page 18
Sahar Mosleh California State University San Marcos Page 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)
top related