Javascript survival for CSBN Sophomores

Javascript Survival for Honesty and Humility What is Javascript? JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting language is a lightweight programming language 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 purchasing a license 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 "snippets" of code into their HTML pages JavaScript can put dynamic text into an HTML page - A JavaScript statement like this: document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer

Program Example: <html> <body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html> Output:

Where to put Javascript? Javascript in a page will be executed immediately while the page loads into the browser. This is not always what we want. Sometimes we want to execute a script when a page loads, or at a later event, such as when a user clicks a button. a. Scripts in <head> <html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script> </head> <body onload="message()"> </body> </html> Input Program: Output Program:

b. Scripts in <body> Input Program: Output Program: <html> <head> </head> <body> <script type="text/javascript"> document.write("This message is written by JavaScript"); </script> </body> </html>

c. Scripts in <head> and <body> Input Program: Output Program: <html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script> </head> <body onload="message()"> <script type="text/javascript"> document.write("This message is written by JavaScript"); </script> </body> </html>

Rules in Javascript Javascript is case sensitive ! Javascript is processed from top to bottom. Always state with <script type="text/javascript"> as starting point Always state with </script> as ending point Use “//” for single comment. It is also used to penetrate the program line which “//” applies before the program. Use “/*” and “*/” for multiple line comment Use “+” to include a string statement Use “;” as the end of line program statement Use “{“ and “}” as block of program statements

Javascript Variables As with algebra, JavaScript variables are used to hold values or expressions. A variable can have a short name, like x, or a more descriptive name, like carname. Rules for JavaScript variable names: Variable names are case sensitive (y and Y are two different variables) Variable names must begin with a letter or the underscore character Note: Because JavaScript is case-sensitive, variable names are case-sensitive. Declaring (or creating) Javascript Variables var x; var carname; Assigning Values to Undeclare Javascript Variables var x=5; var carname=“Toyota”; var x=5; var carname=“Toyota”; You can use the assigned values when you declare them: x=5; carname=“Toyota”; has same effect as…

Redeclaring Javascript Variables var x=5; var x; After the execution of the statements above, the variable x will still have the value of 5. The value of x is not reset (or cleared) when you redeclare it. Javascript Arithmetic y=x-5; z=y+3;

Javascript Arithmetic Operators

Javascript Assignment Operators

The + Operator Used on Strings txt1="What a very"; txt2="nice day"; txt3=txt1+txt2; Input Program: Output Program: What a very nice day Comparison Operators

Logical Operators Syntax: variablename=(condition)?value1:value2 Example: greeting=(visitor=="PRES")?"Dear President ":"Dear "; Result: “ Dear President” or else “Dear” Conditional Operators

Javascript survival for CSBN Sophomores

Related slideshows

More Related Content

Javascript survival for CSBN Sophomores