Java script


Published on

Anything and everything about #javaScript by Sahil Goel

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Java script

  1. 1. By: Sahil Goel
  2. 2. WHAT IS JAVASCRIPT?• JavaScript is a scripting language (a scripting language is a lightweight programming language)• JavaScript was designed to add interactivity to HTML pages• JavaScript is an interpreted language (means that scripts execute without preliminary compilation)• Everyone can use JavaScript without purchasing a license• JavaScript is used in millions of Web pages to improve the design, validate forms, detect browsers, create cookies, and much more.• JavaScript works in all major browsers, such as Internet Explorer, Mozilla, Firefox, Opera.
  3. 3. Where did it come from• Originally called LiveScript at Netscape started out to be a server side scripting language for providing database connectivity and dynamic HTML generation on Netscape Web Servers.• Netscape decided it would be a good thing for their browsers and servers to speak the same language so it got included in Navigator.• Netscape in alliance with Sun jointly announced the language and its new name Java Script• Because of rapid acceptance by the web community Microsoft forced to include in IE Browser
  4. 4. Are Java and JavaScript the Same?NO! Java and JavaScript are two completely different languagesin both concept and design! • Java (developed by Sun • JavaScript (developed by Microsystems) is a powerful and Netscape), is a smaller language much more complex that does not create applets or programming language - in the standalone applications. In its same category as C and C++. most common form • It can be used to create today, JavaScript resides inside standalone applications and a HTML documents, and can special type of mini provide levels of interactivity far application, called an applet. beyond typically flat HTML pages
  5. 5. How to Put a JavaScript Into an HTML Page?We can add JavaScript in three ways in ourdocument:1) Inline<input type="button" id="hello-world2" value="Hello" onClick="alert(Hello World!);" />2) Embedded<script type="text/javascript">function helloWorld() { alert(Hello World!) ; }</script>3) External<head> <script type="text/javascript" language="javascript" src="hello.js"></script></head>
  6. 6. How to Put a JavaScript Into an HTML Page? Ending Statements With a Semicolon? <html> • With traditional programming <body> languages, like C++ and Java, each code <script type="text/javascript"> statement has to end with a semicolon document.write("Hello World!"); (;). </script> • Many programmers continue this habit </body> when writing JavaScript, but in </html> general, semicolons are optional! However, semicolons are required if you want to put more than one statement on a single line.NOTE: At times JavaScript is disabled in some browsers and it becomes difficult to getappropriate behavior and the user get confused, so to avoid such conditions we should check ifit is enable or we should display an appropriate message. We can do this with the help of:<noscript> <p>This will not be displayed if JavaScript is enabled</p> </noscript>
  7. 7. JavaScript TerminologyObjects: Properties:• Almost everything in JavaScript • Properties are object attributes. is an Object: String, Number, • Object properties are defined by Array, Function.... using the objects name, a• An object is just a special kind of period, and the property name. data, with properties and • e.g., background color is methods. expressed by:• Objects have properties that act document.bgcolor as modifiers. document is the object .bgcolor is the property. Eg: personObj=new Object(); personObj.firstname="John"; personObj.lastname="Doe"; personObj.age=50; personObj.eyecolor="blue";
  8. 8. JavaScript TerminologyMethods: Events:• Methods are actions applied to • Events associate an object with particular objects. Methods are an action. what objects can do. e.g., the onclick event handlere.g., action can change an image.document.write(”Hello e.g., the onSubmit event handlerWorld") sends a form.document is the object. • User actions trigger events.write is the method.
  9. 9. JavaScript TerminologyFunctions: Values:• Functions are named statements • Values are bits of information. that performs tasks. • Values, types and some examplese.g. function doWhatever() include: { Number: 1, 2, 3, etc. statement here String: characters enclosed in quotes. } Boolean: true or false.The curly braces contain the Object: image, formstatements of the function. Function: validate, doWhatever• JavaScript has built-in functions, and we can write our own.
  10. 10. JavaScript TerminologyVariables: Expressions :• Variables contain values and use • Expressions are commands that the equal sign to specify their assign values to variables. value. • Expressions always use an• Variables are created by assignment operator, such as declaration using the var the equals sign. command with or without an e.g., var month = May; is an initial value state. expression.e.g. var month; • Expressions end with ae.g. var month = April; semicolon.
  11. 11. JavaScript TerminologyOperators:• Operators are used to handle variables.Types of operators with examples:Arithmetic operators, such as plus(+).Comparisons operators, such as equals(==).Logical operators, such as AND.Assignment like (=).+ Operator: The + operator can also be used to add string variables or textvalues together.
  12. 12. Condition statements• Very often when we write code, we want to perform different actions for different decisions. we can use conditional statements in our code to do this.In JavaScript we have the following conditional statements:• if statement - use this statement if we want to execute some code only if a specified condition is true• if...else statement - use this statement if we want to execute some code if the condition is true and another code if the condition is false• if...else if....else statement - use this statement if we want to select one of many blocks of code to be executed• switch statement - use this statement if we want to select one of many blocks of code to be executed
  13. 13. LoopsJavaScript performs several types of repetitive operations, called "looping".• for loop: The for loop is executed till a specified condition returns falsefor (initialization; condition; increment){ // statements}• while loop: The while statement repeats a loop as long as a specified condition evaluates to true.while (condition){ // statements}
  14. 14. ArraysArrays are usually a group of the same variable type that use an index numberto distinguish them from each other. Arrays are one way of keeping a programmore organized. Creating arrays: Initializing an array: • var badArray = new Array(10); • Var myArray= new Array(“January”,” February”,” // Creates an empty Array thats sized March”); for 10 elements. • var myArray = [January, February, March]; • var goodArray= [10]; document.write(myArray[0]);//output: January //Creates an Array with 10 as the first document.write(myArray[1]);//output: February element. document.write(myArray[2]);//output: March
  15. 15. JavaScript Popup BoxesIt is possible to make three different kinds ofpopup boxes:1) Alert Box• An alert box is often used if we 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. <script> alert("Hello World") </script>
  16. 16. 2) Confirm Box• A confirm box is often used if we 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. <script> var r=confirm("Press a button!"); if (r==true) document.write("You pressed OK!“); else document.write("You pressed Cancel!“); </script>
  17. 17. 3) Prompt Box• 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. <script> x=prompt (“Please enter your name”, “sahil goel ”) document.write(“Welcome <br>”+x) </script>
  18. 18. DOM• The Document Object Model (DOM) is the model that describes how all elements in an HTML page, like input fields, images, paragraphs etc., are related to the topmost structure: the document itself. By calling the element by its proper DOM name, we can influence it.• In DOM each object, whatever it may be exactly, is a Node.Node object: We can traverse through different nodes with the help of certainnode properties and methods:Eg: firstChild, lastChild, parentNode, nextSibling, previousSibling etc.Document object:The Document object gives us access to the documentsdata. Some document methods are:Eg: getElementById(), getElementsByTagName() etc.
  19. 19. What is a Cookie?A cookie is a small text file that JavaScript can use to store information about a user.• There are two types of cookies: – 1) Session Cookies – 2) Persistent CookiesSession Cookies :A browser stores session cookies in memory.• Once a browser session ends, browser loses the contents of a session cookie.–Persistent Cookies: Browsers store persistent cookies to a user’s harddrive.• We can use persistent cookies to get information about a user that we can use when the user returns to a website at a later date.
  20. 20. More about Cookies• JavaScript deals with cookies as objects.• JavaScript works with cookies using the document.cookie attribute.Examples of cookie usage:• User preferences• Saving form data• Tracking online shopping habits
  21. 21. Parts of a Cookie Object• name – An identifier by which we reference a particular cookie.• value – The information we wish to save, in reference to a particular cookie.• expires – A GMT-formatted date specifying the date (in milliseconds) when a cookie will expire.• path – Specifies the path of the web server in which the cookie is valid. By default, set to the path of the page that set the cookie. However, commonly specified to /, the root directory.• domain – Specifies the domain for which the cookie is valid. Set, by default, only to the full domain of a page..• secure – Specifies that a web browser needs a secure HTTP connection to access a cookie.
  22. 22. Setting a Cookie – General Form:document.cookie = “cookieName = cookieValue; expires = expireDate; path = pathName; domain = domainName; secure”;Escape Sequences:• When we set cookie values, we must first convert the string values that set a cookie so that the string doesn’t contain white space, commas or semi-colons.• We can use JavaScript’s intrinsic escape() function to convert white space and punctuation with escape sequences.• Conversely, we can use unescape() to view text encoded with escape().
  23. 23. Cookie limitations:• A given domain may only set 20 cookies per machine.• A single browser may only store 300 cookies.• Browsers limit a single cookie to 4KB.
  24. 24. THANK YOU!