StepByStep Java Script For budding programmers Java Script
Step-By-Step Java. Script For budding programmers
Java. Script Statements • Every statement must end with a “ ; ” • Java. Script statements are "commands" to the browser. • The purpose of the statements is to tell the browser what to do. • Adding a semicolon enables the user to key in more than one stmt.
inner. HTML • The inner. HTML property sets or returns the inner HTML of an element. • Syntax: – HTMLElement. Object. inner. HTML=text • Example: – Anchor script
Commets • Comments will not be executed by Java. Script. • Comments can be added to explain the Java. Script, or to make the code more readable. • Single line comments start with //. • Multi line comments start with /* and end with */.
Example of Comments • //document. get. Element. By. Id("my. H 1"). inner. HTML ="Welcome to my Homepage"; • document. get. Element. By. Id("my. P"). inner. HTML=" This is my first paragraph. "; • <p><strong>Note: </strong> The comment is not executed. </p>
Multi line comment • /* document. get. Element. By. Id("my. H 1"). inner. HTML="Welco me to my Homepage"; document. get. Element. By. Id("my. P"). inner. HTML="This is my first paragraph. "; */ • Using Comments at the end of the line • evar x=5; // declare x and assign 5 to it var y=x+2; // declare y and assign x+2 to it
Variables • var x=5; var y=6; var z=x+y;
• <!DOCTYPE html> • <html> • <body> • • <script> var x=5; var y=6; var z=x+y; • • document. write(x + " "); document. write(y + " "); document. write(z + " "); </script> • </body> • </html> 5 6 11
With negative numbers • • <script> var x=5; var y=-6; var z=x+y; • • document. write(x + " "); document. write(y + " "); document. write(z + " "); </script> 5 -6 -1
Java. Script Variables 1. As with algebra, Java. Script variables can be used to hold values (x=5) or expressions (z=x+y). 2. Variable can have short names (like x and y) or more descriptive names (age, sum, totalvolume). 3. Variable names must begin with a letter
Java. Script Variables 4. Variable names can also begin with $ and _ 5. Variable names are case sensitive (y and Y are different variables) 6. Both Java. Script statements and Java. Script variables are case-sensitive.
Data types in Java. Script • • <script> var pi=3. 14; var person=“Jean Claude"; var answer='Yes ma’am!'; • • document. write(pi + " "); document. write(person + " "); document. write(answer + " "); </script> 3. 14 Jean Claude Yes ma’am!
Data types REMEMBER CLASS • Java. Script variables also hold othervalue typesto of When can you assign a numeric a variable, do not put quotes around the data, like text values (person=“Jean Claude"). value. If you put quotes around a numeric value, it will be treated as text. • In Java. Script a text like " Jean Claude" is called a string. • When you assign a text value to a variable, put double or single quotes around the value.
<body> <input type="text" name="enter" class="enter" value="" id="foo”> <input type="button" value="click" On. Click="kk()"> <script language="javascript" type="text/javascript"> var test= document. get. Element. By. Id('foo'). value; function kk(){ alert(test); } </script> </body>
Strings • A string is a variable which stores a series of characters like “Mahatma Gandhi". • A string can be any text inside quotes. You can use single or double quotes: • Example • var moviename=“Home Run”; var moviename=‘Home Run’;
What about quotes inside string It's alright He is called 'John' He is called "John" • var answer="It's alright"; • var answer="He is called 'John'"; • var answer='He is called "John"'; • You can use quotes inside a string, as long as they don't match the quotes surrounding the string
Java. Script Numbers • Numbers can be written with, or without decimals: • var x 1=34. 00; // Written with decimals var x 2=34; // Written without decimals • --------------------------------- • Extra large or extra small numbers can be written with scientific (exponential) notation: • var y=123 e 5; var z=123 e-5; // 12300000 // 0. 00123
Java. Script Booleans • Booleans can only have two values: – true or false. • var x=true; var y=false; • Booleans are often used in conditional testing.
Java. Script Arrays • Example 1: • var movies=new Array(); movies [0]="Left Behind"; movies [1]="Judah"; movies [2]="Pontius Pilate"; Example 2 (condensed array): var movies=new Array("Left Behind", "Judah", "Pontius Pilate"); Example 3 (literal array): var movies=["Left Behind", "Judah", "Pontius Pilate"];
Java. Script Objects • An object is delimited by curly braces. • Inside the braces the object's properties are defined as name and value pairs (name : value). How many • The properties are separated by properties does the object movies commas: have? • var movies={moviename: “Left Behind", • actorname: ”Nicholas Cage", • id: 2014 • };
Object property Access • Spaces and line breaks are not important. Your declaration can span multiple lines: • var movies={ moviename: “Left Behind", • actorname: ”Nicholas Cage", • id: 2014 • }; • You can address the object properties in two ways: • Example • name=movies. moviename; name=movies[“moviename"];
Undefined and Null • Undefined is the value of a variable with no value. • Variables can be emptied by setting the value to null; • Example • cars=null; • movies=null;
Declaring Variable Types • When you declare a new variable, you can declare its type using the "new" keyword: • • • var carname=new String; var x= new Number; var y= new Boolean; var movies= new Array; var movies= new Object;
Predict Output • • • • <script> function my. Function() { var x="", i=0; for (i=0; i<10; i++) The number is 0 { The number is 1 if (i==3) The number is 2 { break; } x=x + "The number is " + i + " "; } document. get. Element. By. Id("demo"). inner. HTML=x; } </script>
OOPs I did it again • Errors Will Happen! • When the Java. Script engine is executing Java. Script code, different errors can occur: • It can be syntax errors, typically coding errors or typos made by the programmer.
Errors will happen • It can be misspelled or missing features in the language (maybe due to browser differences). • It can be errors due to wrong input, from a user. • And, of course, it can be many other unforeseeable things.
Java. Script Throws Errors • When an error occurs, when something goes wrong, the Java. Script engine will normally stop, and generate an error message. • The technical term for this is: Java. Script will throw an error.
Catch me if you can • The try statement lets you test a block of code for errors. • The catch statement lets you handle the error. • The throw statement lets you create custom errors.
Java. Script try and catch • Syntax • try { //Run some code here } catch(err) { //Handle errors here }
• • • • • <script> var txt=""; function message() { try { adddlert("Welcome guest!"); } catch(err) { txt="There was an error on this page. nn"; txt+="Error description: " + err. message + "nn"; txt+="Click OK to continue. nn"; alert(txt); } } </script>
Java. Script Form Validation • Java. Script can be used to validate data in HTML forms before sending off the content to a server. • Form data that typically are checked by a Java. Script could be: – – has the user left required fields empty? has the user entered a valid e-mail address? has the user entered a valid date? has the user entered text in a numeric field?
Required Fields
DOCUMENT OBJECT PROPERTIES AND METHODS
Properties of HTML documents Property Description document. title Sets or returns the title of the document. URL Returns the full URL of the document. last. Modified Returns the date and time the document was last modified document. links Returns a collection of all the links in the document. forms Returns a collection of all the forms in the document. doctype document. anchors Returns the Document Type Declaration associated with the document Returns a collection of all the anchors in the document
document. URL <!DOCTYPE html> <body> The full URL of this document is: <script> document. write(document. URL); </script> </body> </html>
document. anchors <!DOCTYPE html> <body> <a name="html">HTML Tutorial</a> <a name="css">CSS Tutorial</a> <a name="xml">XML Tutorial</a> <a href="/js/">Java. Script Tutorial</a> <a name="abc" href="/js/">Java. Script Tutorial</a> <p>Number of anchors: <script> document. write(document. anchors. length); </script></p> </body> </html>
Methods of HTML documents
- Slides: 39