JavaScript – Part I Mendelsohn
What is JavaScript? There are many scripting languages that can be used for working with web pages, but JS is the most widely used. It provides a set of instructions for the computer (via the browser) to follow. Do a calculation Change an image Store some information
JavaScript is not Java One is a scripting language, the other is a full-fledged programming language. They do share some syntax and a few other things. Java is not easily embedded inside web pages.
Client vs Server Side Scripting For client-side scripting, the computations and other work of the script is executed on the client computer. In order to do so, the script must be sent to the client along with the HTML page. For server-side, the script is executed on the server. For this reason, the script is not sent to the client. (The code remains on the server, and the execution of the code is carried out by the server).
Where to put JS Scripts The <script> tag can be put anywhere inside an HTML page. However, most scripts should be inside the <head> section. Certain displays or controls (discussed later) may sometimes be placed inside the <body> section. Scripts may be placed in a separate file entirely (e.g. some_scripts.js) and referenced from inside your HTML document. Eg: Scripts that you might want to use in several different pages. For example, a rotating ad banner page.
Your first JS <html> <head> <title>First JS</title> <script type="text/javascript"> alert("Hello World"); </script> </head> <body> </body> </html>
Your first JS JS usually goes in the <head> section You have to tell the browser that you are going to be scripting in JS (there are others such as VBScript). You can output HTML text inside the alert(“”) line of code. Note the ; required at the end of nearly ALL lines of JS code. One exception is at the end of a function declaration (later). <html> <head> <title>First JS</title> <script type="text/javascript"> alert("Hello World"); </script> </head> <body> </body> </html>
JS is Case Sensitive <html> <head> <title>First JS</title> <script type="text/javascript"> alert("Hello World"); </script> </head> <body> </body> </html>
Your first JS function: ‘alert’ This is the tool we will use most often in this course to output information in JavaScript. Although it does have its uses, we will tend to avoid document.write Examples using the alert function: alert("Welcome to it130"); alert( 3+4*5 ); alert( Date() ); alert( Math.sqrt(25.0) );
Only Scripts should be inside <script> (i.e. no HTML code) <html> <head> <title>First JS</title> <script type="text/javascript"> <h1>My First JavaScript</h1> Bad!! alert("Hello World"); </script> </head> <body> </body> </html> However, it IS possible to display markup (HTML) text using a command: document.write()
However, there are ways… <script type="text/javascript"> document.write("<h1>My First JavaScript</h1>"); document.write("Hello World<br/>How are <em>you</em> today?"); </script> <body> Text from inside the ‘body’ section. </body> Note that script itself does NOT display in your browser. Only information that your script SAYS to display is shown. Outputted text inside <head> will appear before code inside <body> If you want the text to appear later, place the <script> tag lower down, somewhere inside the body section
*** Where to place scripts - II While it is possible to place individual lines of script inside the <body> section, we will use the following methods: We will typically organize our scripts by placing them inside of functions. Those functions will be placed inside <head>. We will execute (“invoke”) those functions from inside <body>.
Writing a JS Function All functions must have a name Naming conventions for JS (yup, another one) we will use include: First letter uncapitalized All subsequent words should be capitalized No spaces between words Do NOT use reserved words (p. 111) The function name is followed by parentheses ‘( )’ Later we will learn what can go inside these brackets. The beginning and end of the body of the function must be delineated by braces: { and }.
Function Template function firstFunction( ) { alert("My first try at a function!"); } Recall that while nearly all JS lines must end with a semicolon, this does NOT apply to function declarations. (The ‘declaration’ is the first line where you ‘declare’ the name of the function)
Invoking (ie executing) Functions There are two ways of invoking functions that we will focus on during this course: Via a JavaScript command (discussed later) Via the onclick attribute of an HTML button <input type="button" name="btnDate" value="Print the Date!“ onclick="printDate()" />
Bugs… Debugging is MUCH easier when it is caught early. Remember to resave and refresh CONSTANTLY! Just one small error can cause the entire JS to fail to display.
Executing a script from a form: We will be executing most of our scripts from an HTML form. Let’s go through the process of creating a button on a form that will execute a JS. In this case, we will write a very simple form (one button) that will do nothing but greet the user. The steps are: 1. Create the script 2. Create the button. 3. Connect the button to the script.
The Greeting: I: The Script function greetUser( ) { alert("Hello"); } Where should this function be placed? Inside the <head> section
The Greeting: II: The Button <form name="practiceForm"> <input type="button" value="Greet Me!" /> </form>
The Greeting: III: Connect the button to the script. We will use the ‘onclick’ attribute to invoke the greetUser( ) function. <form name="practiceForm"> <input type="button" value="Greet Me!" onclick="greetUser( )"/> </form> The value of the onclick attribute should be the name of one of the JS functions on your page. Note: No semicolon inside the attribute value
<html> <head> <title>First JS</title> <script type="text/javascript"> function greetUser( ) { alert("Hello..."); } </script> </head> <body> <form name="practiceForm"> <input type="button" value="Greet Me!" onClick="greetUser( )" /> </form> </body> </html>
document.write() command Because a big part of JS is outputting HTML, we must become adept at using the document.write() command. This command outputs whatever is inside the brackets as HTML Literal text that you wish to output must be placed inside quotes Contrast with variables / functions (discussed shortly) which should NOT be in quotes May include HTML markup But certain characters must be “escaped” (discussed shortly) Can have multiple groups of text (known as “strings”) separated by + signs this becomes important later
Examples: document.write("Hello there!"); document.write("<h2>Hello there!</h2>"); document.write("How are you today?<br />I am fine!");
Escape characters in JS: Sometimes in JS you will want to use characters such as ; (semicolons) or ” (quotation marks) without those characters interfering with your code. For example, suppose you wanted to output a quotation mark inside a document.write statement? If you wrote: document.write("This is a quote: ""); this would not work because the second quotation mark (shown in red) would be viewed by JS as being the closing quote of the document.write statement . Fortunately, there is a way: For several different characters, JS allows you to “escape” them by placing a ‘\’ (back-slash) before the character. This tells JS not to treat the character as part of the script, but rather as part of a string. Observe the same example: document.write("This is a quote: \""); Practice: Write an anchor tag to display a link to the New York Times: <a href=“www.nytimes.com”>NY Times</a> using JS: document.write("<a href=\"www.nytimes.com\">NY Times</a>");
Escape Characters document.write("<h2 style=\"color:green\;\">Hello there!"); Again - Why do we have all of those ‘\’ characters? Answer: Look at the quotes with in the style attribute. The Javascript interpreter is going to view those quotes as being part of the quotations from the original document.write method as mentioned in the previous slides. We need to tell the JS interpreter that these are not Javascript quotes and should not be viewed as such. So whenever you are attempting to output a symbol that resembles a key JS character (quotes, semicolons, parentheses, and others we’ll discuss later), we must precede that character the with escape symbol: \ This is the same concept as using the character entities in HTML for characters such as ‘<‘ or ‘>’ or ‘/’ etc.
(Hiding from browsers that can’t display JS) Some browsers are unable to display JS Older browsers Turned off for security reasons Certain PDAs, Tablets are unable to process JS In this case, your JS may cause the page to load improperly or not at all. For this reason, we place the JS inside a special XHTML section call ‘CDATA’. Essentially, you are placing your scripts in a section in which, should the browser be unable to process the script, it will simply ignore it. Here is an example – note that the CDATA line goes after the ‘script’ tag. However all of the actualy JS code is inside the CDATA tag.: <script type="text/javascript"> //<![CDATA[ function doStuff() { alert("Hello"); } ]]> </script>
(The Document Model)