Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.
-
Upload
mae-sullivan -
Category
Documents
-
view
217 -
download
2
Transcript of Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.
![Page 1: Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649f3e5503460f94c5e6ac/html5/thumbnails/1.jpg)
Sahar Mosleh California State University San Marcos Page 1
JavaScriptBasic
![Page 2: Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649f3e5503460f94c5e6ac/html5/thumbnails/2.jpg)
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.
![Page 3: Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649f3e5503460f94c5e6ac/html5/thumbnails/3.jpg)
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++.
![Page 4: Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649f3e5503460f94c5e6ac/html5/thumbnails/4.jpg)
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.
![Page 5: Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649f3e5503460f94c5e6ac/html5/thumbnails/5.jpg)
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!
![Page 6: Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649f3e5503460f94c5e6ac/html5/thumbnails/6.jpg)
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>
![Page 7: Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649f3e5503460f94c5e6ac/html5/thumbnails/7.jpg)
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.
![Page 8: Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649f3e5503460f94c5e6ac/html5/thumbnails/8.jpg)
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>
![Page 9: Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649f3e5503460f94c5e6ac/html5/thumbnails/9.jpg)
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
![Page 10: Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649f3e5503460f94c5e6ac/html5/thumbnails/10.jpg)
Sahar Mosleh California State University San Marcos Page 10
![Page 11: Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649f3e5503460f94c5e6ac/html5/thumbnails/11.jpg)
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.
![Page 12: Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649f3e5503460f94c5e6ac/html5/thumbnails/12.jpg)
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>
![Page 13: Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649f3e5503460f94c5e6ac/html5/thumbnails/13.jpg)
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 //
![Page 14: Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649f3e5503460f94c5e6ac/html5/thumbnails/14.jpg)
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.
![Page 15: Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649f3e5503460f94c5e6ac/html5/thumbnails/15.jpg)
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>
![Page 16: Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649f3e5503460f94c5e6ac/html5/thumbnails/16.jpg)
Sahar Mosleh California State University San Marcos Page 16
![Page 17: Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649f3e5503460f94c5e6ac/html5/thumbnails/17.jpg)
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.
![Page 18: Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649f3e5503460f94c5e6ac/html5/thumbnails/18.jpg)
Sahar Mosleh California State University San Marcos Page 18
![Page 19: Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.](https://reader035.fdocuments.us/reader035/viewer/2022062515/56649f3e5503460f94c5e6ac/html5/thumbnails/19.jpg)
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)