sahar mosleh california state university san marcospage 1 javascript basic

Sahar Mosleh California State University San Marcos

JavaScriptBasic


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.


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++.


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.


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!


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>


• 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.


Another example:

<html><body bgcolor="white"><P>Paragraph 1</P><SCRIPT LANGUAGE="JavaScript“ type=“text/JavaScript”>

document.bgColor = "RED";

</SCRIPT>

</body></html>


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


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.


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>


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 //


• 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.


• 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>


• 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.


• 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)

sahar mosleh california state university san marcospage 1 javascript basic

Documents

javascript basic slide

html pages javascript

interpreted language

computer language background

complex programming

different languages

preliminary compilation