Introduction To JavaScript What JavaScript Is: a general purpose scripting language that allows a static page to interact with users and respond to events that occurs on the page. JavaScript programs are executed by a JavaScript interpreter normally built right into the browser. What JavaScript Is Not: JavaScript is not Java. Java was developed by Sun Microsystems and JavaScript was developed by Netscape. JavaScript can be embedded in an HTML document and is contained between HTML tags. JavaScript has its own syntax rules and expects statements to be written in a certain way. What JavaScript Is Used For: JavaScript programs detect and react to user initiated events, such as a mouse going over a link or graphic. They provide navigational aids. JavaScript and Events: HTML is static, it does
Transcript
Introduction To JavaScript
What JavaScript Is: a general purpose scripting language that allows a static page to interact with users and respond to events that occurs on the page. JavaScript programs are executed by a JavaScript interpreter normally built right into the browser.
What JavaScript Is Not: JavaScript is not Java. Java was developed by Sun Microsystems and JavaScript was developed by Netscape. JavaScript can be embedded in an HTML document and is contained between HTML tags. JavaScript has its own syntax rules and expects statements to be written in a certain way.
What JavaScript Is Used For: JavaScript programs detect and react to user initiated events, such as a mouse going over a link or graphic. They provide navigational aids.
JavaScript and Events: HTML is static, it does not react to user input. JavaScript is dynamic, interacting asynchronously with users on the client side.
Example 1 – event “onClick”
<html>
<head><title>Event</title></head>
<body><form><input type ="button"
value = "Pinch me"onClick="alert('OUCH!!')" >
</form></body>
</html>
Other events that JavaScript can handle:
• onAbort – image loading interrupted• onBlur – user moves away from a form element• onChange – user changes a value in a form• onClick – user clicks a button like form element• onError – error loading an image• onFocus – user activated a form element• onLoad – document finished loading• onMouseOut – mouse moved away from object• onMouseOver – mouse moved over an object• onSubmit – user submitted a form• onUnLoad – user left the window or frame
What Versions? What Browsers?
• When the user receives a page with JavaScript, the script is sent to the JavaScript interpreter, which executes the script.
• Each browser has its own interpreter, so inconsistencies may occur.
• JavaScript 1.5 is supported by Netscape Navigator 6.0 and up, Internet Explorer 5.5 and up and Mozilla.
• Current version is 1.8.5
Where to put JavaScript
• Client-side JavaScript programs are embedded in an HTML document.
• You can place it between the “head” tags or between the “body” tags. The “head” is the best place to store function definitions and objects. For text displayed at a specific spot, you place the code in the “body”. You can have multiple scripts within a page.
• A JavaScript program starts with a <script> tag and ends with a </script> tag.
Example 2<html>
<head><title>First JavaScript Sample</title><script language = "JavaScript" type="text/javascript">
document.writeln("<h2>Welcome to the JavaScript
World!</h2>");</script></head>
<body bgcolor="yellow" text="blue"><font size="+2">This is just plain old HTML stuff.</font></body>
</html>
Output of example 2
JavaScript and old or disabled browsers
• If you write a script code in a Web page and the browser somehow does not support it, the JavaScript code will be treated as a regular HTML. So, if you hide your JavaScript code within HTML comments, the browser will ignore it.
<!--> Sorry,<!--> you are not JavaScript enabled<!-- hiding from non-JavaScript enabled browsersdocument.write("Testing to see if JavaScript is turned on.");// done hiding -->
</script><head>
<body></body>
</html>
Example 5<html>
<head><title>Has JavaScript been turned off?</title></head>
<body> <script language = "JavaScript" type="text/javascript">
<font size="+1">Please turn JavaScript on if you want to see this page!<br>Netscape: <em>Edit/Preferences/Advanced/Scripts andPlugins</em><br>MSIE: <em>Tools/Internet Options/Security/CustomLevel/Scripting</em></br>
</noscript></font></body>
</html>
JavaScript from External Files
• If the Web page contains long scripts or functions that will be used by other documents, these scripts can be placed in external files.
• The files must end with a .js extension.
Example 6 output<html>
<head><title>First JavaScript Sample</title><script language = "JavaScript" src="welcome.js"> </script>
</head>
</body><script language = "JavaScript">
document.write("<body bgcolor='yellow' text='blue'>");document.write("<font size='+3'>This is just plain old HTML
stuff. </font>");</script>
</body>
</html>
welcome.js file
• document.writeln("<h2>Welcome, class of COMP267, to the JavaScript World!</h2>");
The HTML document and JavaScript• JavaScript scripts are not stand-alone programs.• They run in the context of an HTML document.• First Step is to create the HTML document:
<!-- Hide script from old browsers.document.write("Hello, world!");// End hiding here. -->
</script></head>
</body><p> So long, world. </body>
</html>
Script Execution
• You can type the URL in the navigation bar of your browser like:
C:\DD\BCC\COMP267_1\ch2\hello.html
Syntactical Details• You must obey rules, both HTML and JavaScript
rules!• HTML tags are not case sensitive. But
JavaScript names ARE case sensitive.• JavaScript ignore spaces if they appear between
words. A function name cannot contain spaces.• Spaces are preserved if embedded within a
string or regular expression.• As extra spaces are ignored by the JavaScript
interpreter, you are free to indent, break lines, and organize your program.
Reserved Words
abstract boolean break byte case catch char class const continue default delete do double else extends false final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch synchronized this throw throws transient true try typeof var void volatile while with
Statements and Semicolons; Comments
• Statements are executed top-down, one at a time.
• If there are multiple statements on a line, they must be separated by semicolons.
• It is good practice to terminate all statements with semicolon.
• Comments are ignored by the interpreter. You can have single line comments (//)or block comments(/* block */)
The <script> tag
• JavaScript programs must start and end with the HTML tags <script> and </script> respectively.
• Those tags can be placed anywhere within the HTML document. If placed in the “head”, it will be executed before the page is displayed (this is the place for functions etc). If the script perform some action pertaining to the body of the document, then it is placed within the “body” tags.
Attributes of the <script> tag
• language: <script language=“JavaScript”>JavaScript is the default. You could have VBScript,
Jscript etc.• type: <script language=“JavaScript”
type=“text/javascript”> Type specifies both the scripting language and the
Internet content type• src: <script language=“JavaScript”
type=“text/javascript” src=“sample.js”> src is used when the JavaScript code is in an
external file.
String and string concatenation
• Although JavaScript does not understand HTML, it can generate HTML output with its built in methods write() and writeln().
• String: set of characters enclosed in matching quotes.
• Concatenation is caused when two strings are joined together. The (+) sign is used to concatenate strings: “hot” + “ dog” = “hot dog”
write() and writeln()
• Those methods allow to generate pages dynamically.
• When generating output to the body of the document using those methods, put the code in the “body” part of the document, rather than in the “header”.
• Methods names are followed by a set of parentheses. The arguments go inside the parentheses. Without arguments, write() and writeln() would not have anything to write.
• JavaScript defines the current document as a document object. So, in order to display “Hello to you”, the syntax is:
document.write(“Hello to you”);
Example 7<html>
<head><title>Printing Output</title></head>
<body bgcolor="yellow" text="blue"><b>Comparing the <em>document.write</em> and <em>document.writeln</em> methods</b><br> <script language="JavaScript">document.write("<h3>One, "); // No newlinedocument.writeln("Two, ");document.writeln("Three, ");document.write("Blast off....<br>"); // break tagdocument.write("The browser you are using is " +
navigator.userAgent + "<br>"); </script><pre><script language="JavaScript"> document.writeln("With the <em>HTML <pre></em> tags, "); document.writeln("the <em>writeln</em> method produces a newline."); document.writeln("Slam"); document.writeln("Bang"); document.writeln("Dunk!");</script></pre></body>
