Javascript basics ppt

javascript basics for beginners ppt and javascript basics tutorial ppt
LexiWills Profile Pic
LexiWills,United Kingdom,Professional
Published Date:01-08-2017
Your Website URL(Optional)
Comment
JavaScript Basics & JavaScript Basics & HTML DOM HTML DOM Sang Shin Sang Shin Java Technology Architect Java Technology Architect Sun Microsystems, Inc. Sun Microsystems, Inc. sang.shinsun.com sang.shinsun.com www.javapassion.com www.javapassion.comDisclaimer & Acknowledgments • Even though Sang Shin is a full-time employee of Sun Microsystems, the contents here are created as his own personal endeavor and thus does not necessarily reflect any official stance of Sun Microsystems on any particular technology • Acknowledgments The contents of this presentation was created from JavaScript tutorial from www.w3cschools.com 2Topics • What is and Why JavaScript? • How and Where do you place JavaScript code? • JavaScript language • JavaScript functions • JavaScript events • JavaScript objects • JavaScript HTML DOM objects • Closure (need to be added) 3 What is and Why What is and Why JavaScript? JavaScript?What is JavaScript? • Was designed to add interactivity to HTML pages • Is a scripting language (a scripting language is a lightweight programming language) • JavaScript code is usually embedded directly into HTML pages • JavaScript is an interpreted language (means that scripts execute without preliminary compilation) 5What can a JavaScript do? • JavaScript gives HTML designers a programming tool • JavaScript can put dynamic text into an HTML page • JavaScript can react to events • JavaScript can read and write HTML elements • JavaScript can be used to validate input data • JavaScript can be used to detect the visitor's browser • JavaScript can be used to create cookies 6 How and Where Do You How and Where Do You Place JavaScript Code? Place JavaScript Code?How to put a JavaScript code into an HTML page? • Use the script tag (also use the type attribute to define the scripting language) html head script type="text/javascript" ... /script /head body script type="text/javascript" ... /script /body /html 8Where Do You Place Scripts? • Scripts can be in the either head section or body section • Convention is to place it in the head section html head script type="text/javascript" .... /script /head 9Referencing External JavaScript File • Scripts can be provided locally or remotely accessible JavaScript file using src attribute html head script language="JavaScript" type="text/javascript" src="http://somesite/myOwnJavaScript.js" /script script language="JavaScript" type="text/javascript" src="myOwnSubdirectory/myOwn2ndJavaScript.js" /script 10 JavaScript Language JavaScript LanguageJavaScript Variable • You create a variable with or without the var statement var strname = some value strname = some value • When you declare a variable within a function, the variable can only be accessed within that function • If you declare a variable outside a function, all the functions on your page can access it • The lifetime of these variables starts when they are declared, and ends when the page is closed 12JavaScript Popup Boxes • Alert box User will have to click "OK" to proceed alert("sometext") • Confirm box User will have to click either "OK" or "Cancel" to proceed confirm("sometext") • Prompt box User will have to click either "OK" or "Cancel" to proceed after entering an input value prompt("sometext","defaultvalue") 13JavaScript Language • Conditional statement if, if.. else, switch • Loop for loop, while loop • try...catch • throw 14 JavaScript Functions JavaScript Functions (which behave like (which behave like Java methods) Java methods) More on Functions More on Functions in other Presentation in other PresentationJavaScript Funcitons • A JavaScript function contains some code that will be executed only by an event or by a call to that function To keep the browser from executing a script as soon as the page is loaded, you can write your script as a function • You may call a function from anywhere within the page (or even from other pages if the function is embedded in an external .js file). • Functions can be defined either head or body section As a convention, they are typically defined in the head section 16Example: JavaScript Function html head script type="text/javascript" // If alert("Hello world") below had not been written within a // function, it would have been executed as soon as the page gets loaded. function displaymessage() alert("Hello World") /script /head body form input type="button" value="Click me" onclick="displaymessage()" /form /body /html 17 JavaScript Events JavaScript EventsEvents & Event Handlers • Every element on a web page has certain events which can trigger invocation of event handlers • Attributes are inserted into HTML tags to define events and event handlers • Examples of events A mouse click A web page or an image loading Mousing over a hot spot on the web page Selecting an input box in an HTML form Submitting an HTML form A keystroke 19Events • onabort - Loading of an image is interrupted • onblur - An element loses focus • onchange - The content of a field changes • onclick - Mouse clicks an object • ondblclick - Mouse double-clicks an object • onerror - An error occurs when loading a document or an image • onfocus - An element gets focus • onkeydown - A keyboard key is pressed 20

Advise: Why You Wasting Money in Costly SEO Tools, Use World's Best Free SEO Tool Ubersuggest.