Java Script JS Basics Part2 Case Sensitivity Unlike

Java. Script (JS) Basics (Part-2)

Case Sensitivity Unlike HTML, Java. Script is case sensitive n That means, write and WRITE are different in JS n Therefore watch your capitalization closely when you write Java. Script statements, variables, objects and functions. n

Java. Script Comments can be added to explain the Java. Script, or to make the code more readable. n Single line comments start with //. n The following example uses single line comments to explain the code: n

Java. Script Comments <script type="text/javascript"> // Write a heading document. write("<h 1>This is a heading</h 1>"); // Write two paragraphs: document. write("<p>This is a paragraph. </p>"); document. write("<p>This is another paragraph. </p>"); </script>

Java. Script Multi-Line Comments n Multi line comments start with /* and end with */. n The following example uses a multi line comment to explain the code: <script type="text/javascript"> /* The code below will write one heading and two paragraphs */ document. write("<h 1>This is a heading</h 1>"); document. write("<p>This is a paragraph. </p>"); document. write("<p>This is another paragraph. </p>"); </script>

Java. Script Variables As with algebra, Java. Script variables are used to hold values or expressions. n A variable can have a short name, like x, or a more descriptive name, like carname. Rules for Java. Script variable names: n Variable names are case sensitive (y and Y are two different variables) n Variable names must begin with a letter or the underscore character n

Java. Script Variables n n Example: x=5; carname="Volvo"; When you assign a text value to a variable, use quotes around the value.

Java. Script Arithmetic Operators q Arithmetic operators are used to perform arithmetic between variables and/or values. q Given that y=5, the table below explains the arithmetic operators:

More On + Operator The + operator can also be used to add text values together: n txt 1="What a very"; txt 2="nice day"; txt 3=txt 1+" "+txt 2; n After the execution of the statements above, the variable txt 3 contains: "What a very nice day" n

More On + Operator txt 1=“It is”; num=5; txt 3=“O clock” txt 4=txt 1+“ ”+num+“ ”+txt 2; n After the execution of the statements above, the variable txt 4 contains: “It is 5 O clock" n

Comparison Operator n n Comparison operators are used in logical statements to determine equality or difference between variables or values. Given that x=5, the table below explains the comparison operators:

Logical Operator n n Logical operators are used to determine the logic between variables or values. Given that x=6 and y=3, the table below explains the logical operators:

JS Statement A Java. Script statement is a command or instruction to a browser. The purpose of the command is to tell the browser what to do. n For example: document. write("Hello World"); This Java. Script statement tells the browser to write "Hello World" to the web page: n

JS Statement It is normal to add a semicolon at the end of each executable statement. n The semicolon is optional (according to the Java. Script standard), and the browser is supposed to interpret the end of the line as the end of the statement. i. e. n document. write("Hello World"); n Is same as: document. write("Hello World")

Java. Script Code Java. Script code (or just Java. Script) is a sequence of Java. Script statements. n Each statement is executed by the browser in the sequence they are written. n The next example will write a heading and two paragraphs to a web page: n

Java. Script Code <script type="text/javascript"> document. write("<h 1>This is a heading</h 1>"); document. write("<p>This is a paragraph. </p>"); document. write("<p>This is another paragraph. </p>"); </script>

Java. Script Blocks Java. Script statements can be grouped together in blocks. n Blocks start with a left curly bracket {, and ends with a right curly bracket }. n The purpose of a block is to make the sequence of statements execute together. n Normally a block is used to group statements together in a function or in a condition (where a group of statements should be executed if a condition is met). n

Java. Script Blocks <script type="text/javascript"> { document. write("<h 1>This is a heading</h 1>"); document. write("<p>This is a paragraph. </p>"); document. write("<p>This is another paragraph. </p>"); } </script>

Java. Script Conditional Statements Conditional statements are used to perform different actions based on different conditions. Java. Script support following basic conditional statements: n if statement - use this statement to execute some code only if a specified condition is true n if. . . else statement - use this statement to execute some code if the condition is true n

if Statement n Use the if statement to execute some code only if a specified condition is true: if (condition) { //code to be executed if condition is true }

if Statement <script type="text/javascript"> d = new Date(); time = d. get. Hours(); if (time<10) { document. write("<b>Good morning</b>"); } </script>

if…else Statement Use the if. . else statement to execute some code if a condition is true and another code if the condition is not true: if (condition) { //code to be executed if condition is true } else { //code to be executed if condition is not true }

if…else Statement <script type="text/javascript"> /* If the time is less than 10, you will get a "Good morning" greeting. Otherwise you will get a "Good day" greeting */ d = new Date(); time = d. get. Hours(); if (time < 10) { document. write("Good morning!"); } else{ document. write("Good day!"); } </script>

Using operators in if Statement <script type="text/javascript"> d = new Date(); time = d. get. Hours(); if (time <= 12 && time >= 18) { document. write("Good afternoon!"); } </script>

Using operators in if Statement <script type="text/javascript"> d = new Date(); time = d. get. Hours(); if (time > 12 || time > 18) { document. write(“This is not afternoon"); } </script>

Java. Script Functions A function contains code that will be executed by an event or by a call to the function. n You may call a function from anywhere within a page (or even from other pages if the function is embedded in an external. js file). n Functions can be defined both in the <head> and in the <body> section of a document. But usually we put functions in the <head> section. n

How to Define a Simple Function n functionname() { … } n The { and the } defines the start and end of the function and it contains the statements which we want to execute when the function is called. n The word function must be written in lowercase letters, otherwise a Java. Script error occurs! n You must call a function with the exact name of

Function Example <html> <head> <script type="text/javascript"> function message(){ document. write(“<h 1>Function</h 1>"); document. write(“Function is like your friend whenever you call it, it works for you”); } </script> </head> <body on. Click="message()"> </body> </html>

Pop Up Boxes Java. Script has three kind of popup boxes: n Alert box n Confirm box n Prompt box.

Alert Box n n An alert box is often used if you want to make sure information comes through to the user. When an alert box pops up, the user will have to click "OK" to proceed.

Alert Box <html> <head> <script type="text/javascript"> function show_alert() { alert("I am an alert box!"); } </script> </head> <body> <input type="button“ onclick="show_alert()" value="Show alert box" /> </body> </html>

Confirm Box n n n A confirm box is often used if you want the user to verify or accept something. When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.

Confirm Box <html> <head> <script type="text/javascript"> function show_confirm() { r = confirm("Press a button"); if (r == true) { document. write("You pressed OK!"); } else { document. write("You pressed Cancel!"); } } </script> </head>

Confirm Box <body> <input type="button" onclick="show_confirm()" value="Show confirm box" /> </body> </html>

Prompt Box n n n A prompt box is often used if you want the user to input a value before entering a page. When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value. If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.

Prompt Box <html> <head> <script type="text/javascript"> function show_prompt() { name=prompt("Please enter your name", "Harry Potter"); if (name != null && name != "") { document. write("Hello " + name + "! How are you today? "); } } </script> </head>

Prompt Box <body> <input type="button" onclick="show_prompt()" value="Show prompt box" /> </body> </html>

Events n n n Events are actions that can be detected by Java. Script. More easily, event can be defined as something that can be done by the user By using Java. Script, we have the ability to create dynamic web pages (web pages that react or behave differently depending on user input). Every element on a web page has certain events which can trigger a Java. Script. For example, we can use the on. Click event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags.

Events Examples of events: n A mouse click n A web page or an image loading n Mousing over a hot spot on the web page n Selecting an input field in an HTML form n Submitting an HTML form n A keystroke

on. Load Event n The on. Load event is triggered when the user enters the web page: <html> <head> <script type="text/javascript"> function message(){ alert("Loading. . . "); } </script> </head> <body on. Load="message()"> </body> </html>

on. Focus and on. Blur Event n n The onfocus event occurs when an object (button, textbox or any other HTML element) gets focus. The onblur event occurs when an object loses focus.

on. Submit Event n n n The on. Submit event is called when user clicks on the submit button of a form. The on. Submit event is used to validate ALL form fields before submitting it. Following is an example of how to use the on. Submit event. The check. Form() function will be called when the user clicks the submit button in the form. If the field values are not accepted, the submit should be cancelled. The function check. Form() returns either true or false. If it returns true the form will be submitted, otherwise the submit will be cancelled: