JavaScript

JavaScript

• 1.
  JavaScript - Vidyut Singhania
• 2.
  Wha’ ? • JavaScript •Scripting language of the Web Why ..? • 1. HTML – Define CONTENT of WP • 2. CSS – Specify LAYOUT of WP • 3. JS – Specify the BEHAVIOR of WP Who gives ?! • YOU should! • This single language forms the basis for various other languages – AJAX, JSON for eg!
• 3.
  Speaking in English Extremely popular& widespread Scripting Lang. for PC Primarily used for Client-side Scripting Highly used in Web Browsers
• 4.
  JS • Built byBrendan Eich of Mozilla fame. • Though originally called “Mocha”, it was shipped as JavaScript when deployed on NetScape. • It is a cross-platform, OO scripting language. • Enable dynamic WPs through user interaction and on-screen special effects. • Provides Server-Side (MongoDB/Node.js) & Client-Side Scripting (rollover, alert) • P.S. NOT THE SAME AS JAVA!
• 5.
  Types of JS Typesof JS Client Side Scripting Supplies objects to control the browser & its DOM Allow apps to place elements on HTML form & respond to user events Server Side Scripting Allow app to communicate with RDB or perform file manipulation on server. Share info across users of an app or connect with other apps using LiveConnect & Java.
• 6.
  Components of JS
• 7.
  JS Tags Description <script>& </script> Only JS statements b/w these tags <script src=“myScript.js”></script> Using/Importing external JS files var price = 10 || var name=“Smith” Declare variables using keyword ‘ var ‘ alert(“msg”) || confirm(“msg”) || prompt(“msg”) Inbuilt functions in JS function showAlert(“msg”) { alert(“msg") } User defined functions in JS objName || objName.propName || objName.methodName() Refer to an object, property of obj & method of obj respectively Math – provides for math calculations Date – provides date & time info String – provides for string manipulation Some of the built-in language objects of JS
• 8.
  Document Object • TheDocument object represents the Web page that is loaded in the browser window, and the content displayed on that page, including text and form elements. • Document Methods – You can use the methods of the document object to work on a Web page. – Here are the most common document methods: • • write() - write a string to the Web page • • open() - opens a new document • • close() - closes the document
• 9.
  Formatting What isWritten • Document Properties – • bgColor – • fgColor – • linkColor – • vlinkColor – • title – • lastModified
• 10.
  DOM formatted Example <SCRIPTlanguage="JavaScript"> function newPage() { var userName = prompt("Please enter your name:","") document.write("<H1>Welcome " + userName + "</H1><BR>") document.write("<H2>to your new home page.</H2>") } </SCRIPT>
• 11.
  Window Object • Thewindow object represents the browser window. • There are only two main window properties. They are: – • status - set the status bar message – • self - stores the name mof the current window • Window Methods • The window methods are mainly for opening and closing new windows. • The following are the main window methods. They are: – • alert() - to display a message box – • confirm() - to display a confirmation box – • prompt() - to display a prompt box – • open() - to open a new window – • close() - to close a window
• 12.
  Window Attributes • Ifthe default new window does not suit your needs, you can specify different features of the window when you open it. The complete syntax of the "window.open" is as follow: – window.open(URL, windowName, featureList) • By default, if you do not specify any features, then a window will have all of them. The following are the window attributes: – • toolbar – • menubar – • scrollbars – • resizeable – • status – • location – • directories
• 13.
  Events • some ofthe most common events: – • onLoad - occurs when a page loads in a browser – • onUnload - occurs just before the user exits a page – • onMouseOver - occurs when you point to an object – • onMouseOut - occurs when you point away from an object – • onSubmit - occurs when you submit a form – • onClick - occurs when an object is clicked
• 14.
  Advantages Disadvantages