JavaScript Tutorial PDF

JS Basic JS HOME JavaScript Tutorial JS Introduction JS How To « W3Schools Home Next Chapter » JS Where To JS Statements JavaScript is THE scripting language of th...

JS Basic JS HOME JavaScript Tutorial JS Introduction JS How To « W3Schools Home Next Chapter » JS Where To JS Statements JavaScript is THE scripting language of the Web. JS Comments JS Variables JS Operators JavaScript is used in millions of Web pages to add JS Comparisons functionality, validate forms, detect browsers, and much more. JS If...Else JS Switch Start learning JavaScript now! JS Popup Boxes JS Functions JS For Loop JS While Loop JS Break Loops Examples in Each Chapter JS For...In JS Events This JavaScript tutorial contains more than 200 examples! JS Try...Catch With our online editor, you can edit the JavaScript code, and click on a button to view the result. JS Throw JS Special Text JS Guidelines Example JS Objects JS Objects Intro JS String JS Date JS Array document.write("This is my first JavaScript!"); JS Boolean JS Math JS RegExp JS Advanced JS Browser Try it yourself » JS Cookies JS Validation JS Animation Click on the "Try it Yourself" button to see how it works. JS Image Maps JS Timing JS Create Object JS Summary JavaScript Examples JS Examples Learn by 200 examples! JS Examples With our editor, you can edit the source code, and click on a test button to view the result. JS Objects Examples JS Browser Examples JavaScript Examples JS HTML DOM Examples JavaScript Objects Examples JS Quiz JavaScript Browser Objects Examples JS Exam JavaScript HTML DOM Examples JS References JavaScript Quiz Test JavaScript Objects HTML DOM Objects Test your JavaScript skills at W3Schools! Start JavaScript Quiz! JavaScript References At W3Schools you will find a complete reference of all JavaScript objects, Browser objects, and the HTML DOM objects. Contains lot of examples! JavaScript Built-in objects Browser objects HTML DOM objects JavaScript Exam - Get Your Diploma! W3Schools' Online Certification Program The perfect solution for professionals who need to balance work, family, and career building. More than 5000 certificates already issued! The HTML Certificate documents your knowledge of HTML, XHTML, and CSS. The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM. The XML Certificate documents your knowledge of XML, XML DOM and XSLT. The ASP Certificate documents your knowledge of ASP, SQL, and ADO. The PHP Certificate documents your knowledge of PHP and SQL (MySQL). « W3Schools Home Next Chapter » JS Basic JS HOME JavaScript Introduction JS Introduction JS How To « Previous Next Chapter » JS Where To JS Statements JavaScript is the most popular scripting language on the internet, and works in all JS Comments JS Variables major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari. JS Operators JS Comparisons JS If...Else What You Should Already Know JS Switch JS Popup Boxes Before you continue you should have a basic understanding of the following: JS Functions JS For Loop HTML / XHTML JS While Loop If you want to study these subjects first, find the tutorials on our Home page. JS Break Loops JS For...In JS Events JS Try...Catch What is JavaScript? JS Throw JavaScript was designed to add interactivity to HTML pages JS Special Text JavaScript is a scripting language JS Guidelines A scripting language is a lightweight programming language JavaScript is usually embedded directly into HTML pages JS Objects JavaScript is an interpreted language (means that scripts execute without preliminary JS Objects Intro compilation) JS String Everyone can use JavaScript without purchasing a license JS Date JS Array JS Boolean Are Java and JavaScript the same? JS Math JS RegExp NO! JS Advanced Java and JavaScript are two completely different languages in both concept and design! JS Browser Java (developed by Sun Microsystems) is a powerful and much more complex programming JS Cookies language - in the same category as C and C++. JS Validation JS Animation JS Image Maps JS Timing What can a JavaScript do? JS Create Object JavaScript gives HTML designers a programming tool - HTML authors are normally not JS Summary programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages JS Examples JavaScript can put dynamic text into an HTML page - A JavaScript statement like this: JS Examples document.write("" + name + "") can write a variable text into an HTML page JS Objects Examples JavaScript can react to events - A JavaScript can be set to execute when something JS Browser Examples happens, like when a page has finished loading or when a user clicks on an HTML element JS HTML DOM Examples JavaScript can read and write HTML elements - A JavaScript can read and change the JS Quiz content of an HTML element JS Exam 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 JS References JavaScript can be used to detect the visitor's browser - A JavaScript can be used to JavaScript Objects detect the visitor's browser, and - depending on the browser - load another page specifically HTML DOM Objects 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 The Real Name is ECMAScript JavaScript's official name is ECMAScript. ECMAScript is developed and maintained by the ECMA organization. ECMA-262 is the official JavaScript standard. The language was invented by Brendan Eich at Netscape (with Navigator 2.0), and has appeared in all Netscape and Microsoft browsers since 1996. The development of ECMA-262 started in 1996, and the first edition of was adopted by the ECMA General Assembly in June 1997. The standard was approved as an international ISO (ISO/IEC 16262) standard in 1998. The development of the standard is still in progress. « Previous Next Chapter » JS Basic JS HOME JavaScript How To JS Introduction JS How To « Previous Next Chapter » JS Where To JS Statements The HTML tag is used to insert a JavaScript into an HTML page. JS Comments JS Variables JS Operators JS Comparisons Put a JavaScript into an HTML page JS If...Else JS Switch The example below shows how to use JavaScript to write text on a web page: JS Popup Boxes JS Functions Example JS For Loop JS While Loop JS Break Loops JS For...In JS Events document.write("Hello World!"); JS Try...Catch JS Throw JS Special Text JS Guidelines JS Objects Try it yourself » JS Objects Intro JS String JS Date The example below shows how to add HTML tags to the JavaScript: JS Array JS Boolean Example JS Math JS RegExp JS Advanced JS Browser document.write("Hello World!"); JS Cookies JS Validation JS Animation JS Image Maps JS Timing JS Create Object Try it yourself » JS Summary JS Examples JS Examples Example Explained JS Objects Examples JS Browser Examples To insert a JavaScript into an HTML page, we use the tag. Inside the tag we use JS HTML DOM Examples the type attribute to define the scripting language. JS Quiz JS Exam So, the and tells where the JavaScript starts and ends: JS References JavaScript Objects HTML DOM Objects... The document.write command is a standard JavaScript command for writing output to a page. By entering the document.write command between the and tags, the browser will recognize it as a JavaScript command and execute the code line. In this case the browser will write Hello World! to the page: document.write("Hello World!"); Note: If we had not entered the tag, the browser would have treated the document.write ("Hello World!") command as pure text, and just write the entire line on the page. Try it yourself How to Handle Simple Browsers Browsers that do not support JavaScript, will display JavaScript as page content. To prevent them from doing this, and as a part of the JavaScript standard, the HTML comment tag should be used to "hide" the JavaScript. Just add an HTML comment tag (end of comment) after the last JavaScript statement, like this:  The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag. « Previous Next Chapter » JS Basic JS HOME JavaScript Where To JS Introduction JS How To « Previous Next Chapter » JS Where To JS Statements JavaScripts can be put in the body and in the head sections of an HTML page. JS Comments JS Variables JS Operators JS Comparisons Where to Put the JavaScript JS If...Else JS Switch JavaScripts in a page will be executed immediately while the page loads into the browser. This is JS Popup Boxes not always what we want. Sometimes we want to execute a script when a page loads, or at a later JS Functions event, such as when a user clicks a button. When this is the case we put the script inside a function, JS For Loop you will learn about functions in a later chapter. JS While Loop JS Break Loops Scripts in JS For...In JS Events Scripts to be executed when they are called, or when an event is triggered, are placed in functions. JS Try...Catch JS Throw Put your functions in the head section, this way they are all in one place, and they do not interfere JS Special Text with page content. JS Guidelines Example JS Objects JS Objects Intro JS String JS Date JS Array function message() JS Boolean { JS Math alert("This alert box was called with the onload event"); JS RegExp } JS Advanced JS Browser JS Cookies JS Validation JS Animation JS Image Maps JS Timing JS Create Object Try it yourself » JS Summary JS Examples Scripts in JS Examples If you don't want your script to be placed inside a function, or if your script should write page JS Objects Examples content, it should be placed in the body section. JS Browser Examples JS HTML DOM Examples JS Quiz Example JS Exam JS References JavaScript Objects HTML DOM Objects document.write("This message is written by JavaScript"); Try it yourself » Scripts in and You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section. Example function message() { alert("This alert box was called with the onload event"); } document.write("This message is written by JavaScript"); Try it yourself » Using an External JavaScript If you want to run the same JavaScript on several pages, without having to write the same script on every page, you can write a JavaScript in an external file. Save the external JavaScript file with a.js file extension. Note: The external script cannot contain the tags! To use the external script, point to the.js file in the "src" attribute of the tag: Example Try it yourself » Note: Remember to place the script exactly where you normally would write the script! « Previous Next Chapter » JS Basic JS HOME JavaScript Statements JS Introduction JS How To « Previous Next Chapter » JS Where To JS Statements JavaScript is a sequence of statements to be executed by the browser. JS Comments JS Variables JS Operators JS Comparisons JavaScript is Case Sensitive JS If...Else JS Switch Unlike HTML, JavaScript is case sensitive - therefore watch your capitalization closely when you JS Popup Boxes write JavaScript statements, create or call variables, objects and functions. JS Functions JS For Loop JS While Loop JavaScript Statements JS Break Loops JS For...In A JavaScript statement is a command to a browser. The purpose of the command is to tell the JS Events browser what to do. JS Try...Catch This JavaScript statement tells the browser to write "Hello Dolly" to the web page: JS Throw JS Special Text JS Guidelines document.write("Hello Dolly"); JS Objects It is normal to add a semicolon at the end of each executable statement. Most people think this is a JS Objects Intro good programming practice, and most often you will see this in JavaScript examples on the web. JS String JS Date The semicolon is optional (according to the JavaScript standard), and the browser is supposed to JS Array interpret the end of the line as the end of the statement. Because of this you will often see JS Boolean examples without the semicolon at the end. JS Math JS RegExp Note: Using semicolons makes it possible to write multiple statements on one line. JS Advanced JS Browser JavaScript Code JS Cookies JS Validation JavaScript code (or just JavaScript) is a sequence of JavaScript statements. JS Animation Each statement is executed by the browser in the sequence they are written. JS Image Maps JS Timing This example will write a heading and two paragraphs to a web page: JS Create Object JS Summary Example JS Examples JS Examples JS Objects Examples document.write("This is a heading"); JS Browser Examples document.write("This is a paragraph."); JS HTML DOM Examples document.write("This is another paragraph."); JS Quiz JS Exam Try it yourself » JS References JavaScript Objects HTML DOM Objects JavaScript Blocks JavaScript statements can be grouped together in blocks. Blocks start with a left curly bracket {, and ends with a right curly bracket }. The purpose of a block is to make the sequence of statements execute together. This example will write a heading and two paragraphs to a web page: Example { document.write("This is a heading"); document.write("This is a paragraph."); document.write("This is another paragraph."); } Try it yourself » The example above is not very useful. It just demonstrates the use of a block. 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). You will learn more about functions and conditions in later chapters. « Previous Next Chapter » JS Basic JS HOME JavaScript Comments JS Introduction JS How To « Previous Next Chapter » JS Where To JS Statements JavaScript comments can be used to make the code more readable. JS Comments JS Variables JS Operators JS Comparisons JavaScript Comments JS If...Else JS Switch Comments can be added to explain the JavaScript, or to make the code more readable. JS Popup Boxes Single line comments start with //. JS Functions JS For Loop The following example uses single line comments to explain the code: JS While Loop JS Break Loops JS For...In Example JS Events JS Try...Catch JS Throw // Write a heading JS Special Text document.write("This is a heading"); JS Guidelines // Write two paragraphs: document.write("This is a paragraph."); JS Objects document.write("This is another paragraph."); JS Objects Intro JS String JS Date Try it yourself » JS Array JS Boolean JS Math JS RegExp JavaScript Multi-Line Comments JS Advanced JS Browser Multi line comments start with. JS Cookies JS Validation The following example uses a multi line comment to explain the code: JS Animation JS Image Maps Example JS Timing JS Create Object JS Summary JS Objects Examples document.write("This is a heading"); JS Browser Examples document.write("This is a paragraph."); JS HTML DOM Examples document.write("This is another paragraph."); JS Quiz JS Exam JS References Try it yourself » JavaScript Objects HTML DOM Objects Using Comments to Prevent Execution In the following example the comment is used to prevent the execution of a single code line (can be suitable for debugging): Example //document.write("This is a heading"); document.write("This is a paragraph."); document.write("This is another paragraph."); Try it yourself » In the following example the comment is used to prevent the execution of a code block (can be suitable for debugging): Example Try it yourself » Using Comments at the End of a Line In the following example the comment is placed at the end of a code line: Example document.write("Hello"); // Write "Hello" document.write(" Dolly!"); // Write " Dolly!" Try it yourself » « Previous Next Chapter » JS Basic JS HOME JavaScript Variables JS Introduction JS How To « Previous Next Chapter » JS Where To JS Statements Variables are "containers" for storing information. JS Comments JS Variables JS Operators JS Comparisons Do You Remember Algebra From School? JS If...Else JS Switch Do you remember algebra from school? x=5, y=6, z=x+y JS Popup Boxes Do you remember that a letter (like x) could be used to hold a value (like 5), and that you could use JS Functions the information above to calculate the value of z to be 11? JS For Loop JS While Loop These letters are called variables, and variables can be used to hold values (x=5) or expressions JS Break Loops (z=x+y). JS For...In JS Events JS Try...Catch JS Throw JavaScript Variables JS Special Text As with algebra, JavaScript variables are used to hold values or expressions. JS Guidelines A variable can have a short name, like x, or a more descriptive name, like carname. JS Objects JS Objects Intro Rules for JavaScript variable names: JS String Variable names are case sensitive (y and Y are two different variables) JS Date Variable names must begin with a letter or the underscore character JS Array JS Boolean Note: Because JavaScript is case-sensitive, variable names are case-sensitive. JS Math JS RegExp Example JS Advanced JS Browser A variable's value can change during the execution of a script. You can refer to a variable by its JS Cookies name to display or change its value. JS Validation JS Animation This example will show you how JS Image Maps JS Timing JS Create Object Declaring (Creating) JavaScript Variables JS Summary Creating variables in JavaScript is most often referred to as "declaring" variables. JS Examples You can declare JavaScript variables with the var statement: JS Examples JS Objects Examples JS Browser Examples var x; JS HTML DOM Examples var carname; JS Quiz JS Exam After the declaration shown above, the variables are empty (they have no values yet). JS References However, you can also assign values to the variables when you declare them: JavaScript Objects HTML DOM Objects var x=5; var carname="Volvo"; After the execution of the statements above, the variable x will hold the value 5, and carname will hold the value Volvo. Note: When you assign a text value to a variable, use quotes around the value. Assigning Values to Undeclared JavaScript Variables If you assign values to variables that have not yet been declared, the variables will automatically be declared. These statements: x=5; carname="Volvo"; have the same effect as: var x=5; var carname="Volvo"; Redeclaring JavaScript Variables If you redeclare a JavaScript variable, it will not lose its original value. 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 As with algebra, you can do arithmetic operations with JavaScript variables:  y=x-5; z=y+5; You will learn more about the operators that can be used in the next chapter of this tutorial. « Previous Next Chapter » JS Basic JS HOME JavaScript Operators JS Introduction JS How To « Previous Next Chapter » JS Where To JS Statements = is used to assign values. JS Comments JS Variables JS Operators + is used to add values. JS Comparisons JS If...Else The assignment operator = is used to assign values to JavaScript variables. JS Switch JS Popup Boxes The arithmetic operator + is used to add values together. JS Functions JS For Loop JS While Loop y=5; JS Break Loops z=2; JS For...In x=y+z; JS Events JS Try...Catch The value of x, after the execution of the statements above is 7. JS Throw JS Special Text JS Guidelines JavaScript Arithmetic Operators JS Objects Arithmetic operators are used to perform arithmetic between variables and/or values. JS Objects Intro JS String Given that y=5, the table below explains the arithmetic operators: JS Date JS Array Operator Description Example Result JS Boolean JS Math + Addition x=y+2 x=7 JS RegExp - Subtraction x=y-2 x=3 JS Advanced * Multiplication x=y*2 x=10 JS Browser / Division x=y/2 x=2.5 JS Cookies % Modulus (division remainder) x=y%2 x=1 JS Validation JS Animation ++ Increment x=++y x=6 JS Image Maps -- Decrement x=--y x=4 JS Timing JS Create Object JS Summary JavaScript Assignment Operators JS Examples JS Examples Assignment operators are used to assign values to JavaScript variables. JS Objects Examples JS Browser Examples Given that x=10 and y=5, the table below explains the assignment operators: JS HTML DOM Examples JS Quiz Operator Example Same As Result JS Exam = x=y x=5 JS References += x+=y x=x+y x=15 JavaScript Objects -= x-=y x=x-y x=5 HTML DOM Objects *= x*=y x=x*y x=50 /= x/=y x=x/y x=2 %= x%=y x=x%y x=0 The + Operator Used on Strings The + operator can also be used to add string variables or text values together. To add two or more string variables together, use the + operator. txt1="What a very"; txt2="nice day"; txt3=txt1+txt2; After the execution of the statements above, the variable txt3 contains "What a verynice day". To add a space between the two strings, insert a space into one of the strings: txt1="What a very "; txt2="nice day"; txt3=txt1+txt2; or insert a space into the expression: txt1="What a very"; txt2="nice day"; txt3=txt1+" "+txt2; After the execution of the statements above, the variable txt3 contains: "What a very nice day" Adding Strings and Numbers The rule is: If you add a number and a string, the result will be a string! Example x=5+5; document.write(x); x="5"+"5"; document.write(x); x=5+"5"; document.write(x); x="5"+5; document.write(x); Try it yourself » « Previous Next Chapter » JS Basic JS HOME JavaScript Comparison and Logical Operators JS Introduction JS How To « Previous Next Chapter » JS Where To JS Statements Comparison and Logical operators are used to test for true or false. JS Comments JS Variables JS Operators JS Comparisons Comparison Operators JS If...Else JS Switch Comparison operators are used in logical statements to determine equality or difference between JS Popup Boxes variables or values. JS Functions Given that x=5, the table below explains the comparison operators: JS For Loop JS While Loop JS Break Loops Operator Description Example JS For...In == is equal to x==8 is false JS Events JS Try...Catch === is exactly equal to (value and type) x===5 is true JS Throw x==="5" is false JS Special Text != is not equal x!=8 is true JS Guidelines > is greater than x>8 is false JS Objects < is less than x= is greater than or equal to x>=8 is false JS String JS Date 10 && time