Uploaded bySoumen Santra
JavaScript with Syntax & Implementation
The document provides an overview of JavaScript, a dynamic and lightweight programming language primarily used for web development. It covers key features, syntax, objects, properties, methods, events, functions, and limitations of JavaScript, emphasizing its role in enhancing interactivity on web pages. Additionally, it discusses the differences between Java and JavaScript and includes examples of how to incorporate JavaScript within HTML.
JavaScript with Syntax & Implementation
- 1.
- 2. JavaScript? • It isa dynamic computer programming language. • It is lightweight and most commonly used as a part of web pages. • It implements client-side script to interact with the user. •It makes dynamic web pages. •It is an interpreted programming language with object-oriented capabilities.
- 3. JavaScript : Features Itis a lightweight, interpreted programming language. It is Designed for creating network-centric applications. It is Complementary to and integrated with Java. It is Complementary to and integrated with HTML. It is an Open and cross-platform.
- 4. Java != JavaScript Thesetwo are two completely different languages in both concept and design! Java developed by Sun Microsystems (now in Oracle)is a powerful and much more complex programming language as C and C++. JavaScript is a Scripting language or client side language but java uses as Server side language and also client side language.
- 5. JavaScript : Syntax It can be implemented using JavaScript statements that are placed within the <script>... </script> within HTML tags in a web page. <script> tags are containing your JavaScript, anywhere within Source code of web page. It is normally written within the <head> tags. <script> tag alerts the browser program to start interpreting all the text between these tags as a script.
- 6. JavaScript in HTML <html> <body> <scripttype="text/javascript"> document.write("Hello World!") </script> </body> </html> Print the Statement
- 7. JavaScript : Terminology Ituses specialized terminology. JavaScript terms is fundamental to understanding the script. Objects Properties Methods Events Functions Values Variables Expressions Operators
- 8. JavaScript : Object Objects are composed of attributes. If an attribute contains a function. It considers as either method of the object, or a property.
- 9. JavaScript : Properties It can be primitive data types, or abstract data types, or object type. Object properties are usually variables. It has internal object's methods. It has global variables which is used throughout the page. Syntax: objectName.objectProperty = propertyValue; Example: var str = document.title;
- 10. JavaScript : Methods Methods are the functions the object do something. function vs. method – function is a standalone unit of statements and a method is attached to an object and can be referenced by the this keyword. For example: write() method of document object to write any content on the document. document.write ("This is test");
- 11. JavaScript : Events Eventsassociate an object with an action. • e.g., the OnMouseover event handler action can change an image. • e.g., the onSubmit event handler sends a form
- 12. Example of Events <html> <head> <scripttype="text/javascript"> function sayHello() { document.write ("Hello World") } </script> </head> <body> <p> Click the following button and see result</p> <input type="button" onclick="sayHello()" value="Say Hello" /> </body> </html>
- 13.
- 14. JavaScript : Functions It is reusable code which can be called anywhere in your program. It eliminates the need of writing the same code again and again. It helps programmers in writing modular codes. It allows to divide a big program into a number of small and manageable functions. JavaScript has user-define functions.
- 15. Example of Functions SYNTAX <scripttype="text/javascript"> <!-- function functionname(parameter-list) { statements } //--> </script> EXAMPLE <html> <head> <script type="text/javascript"> function sayHello() { document.write ("Hello there!"); } </script> </head> <body> <p>Click the following button to call the function</p> <form> <input type="button" onclick="sayHello()" value="Say Hello"> </form> <p>Use different text in write method and then try...</p> </body> </html>
- 16.
- 17. JavaScript :Values Itmeans bits of information. Types with examples : Number: 1, 2, 3, etc. String: characters enclosed in “ “ e.g. “Hello”. Boolean: true or false. Object: image, form Function: validate()
- 18. JavaScript : Variables Ituses to store data. It is a "container" for information want to store. The values can be change during the script. It is case sensitive. It must begin with a letter or the underscore character Global Variables: It has global scope i.e. it can be defined anywhere in code. Local Variables: It is visible only within a function where it is defined. The parameters are always local to that function.
- 19. Example of Variable <scripttype="text/javascript"> var myVar = "global"; // Declare a global variable function checkscope( ) { var myVar = "local"; // Declare a local variable document.write(myVar); } </script>
- 20. JavaScript : Operators Ituses to handle variables. Types with examples: Arithmetic operators: +, - etc. Comparisons operators: >=, >, <=, <, = etc. Logical operators: & etc. Control operators: if-else. Assignment and String operators.
- 21. JavaScript : Datatypes Type of values that can represented and manipulated. There are 3 primitive data types: Numbers , e.g., 345, 456.78 etc. Strings of text, e.g. “Welcome to javascript" etc. Boolean, e.g. true or false. It has 2 trivial data types, null and undefined, Each type defines only a single value. JavaScript supports a composite data type, combination of primitive data types called object.
- 22. JavaScript : Methods It resides in a separate page. It is embedded in HTML documents -- in <head> & <body> or in both. Object attributes can be placed in HTML element tags. e.g., <body onLoad="alert('WELCOME')">
- 23. JavaScript : Statements <html> <head><title>MyPage</title></head> <body> <script language="JavaScript"> document.write('This is my first JavaScript Page'); </script> </body> </html>
- 24. JavaScript : Statements <html> <head><title>MyPage</title></head> <body> <script language=“JavaScript"> document.write('<h1>This is my first JavaScript Page</h1>'); </script> </body> </html>
- 25. JavaScript : AlertMessage <body> uses the onLoad event to display an Alert window. It is specified within parenthesis. <body onLoad="alert('WELCOME to JavaScript')">
- 26. Example JavaScript :Alert Message <html> <head><title>My Page</title></head> <body> <p> <a href="myfile.html">My Page</a> <br> <a href="myfile.html" onMouseover="window.alert('Hello');"> My Page</a> </p> </body> </html>
- 27. HTML Forms withJavaScript It processes user input in the web browser. HTML <form> elements receive input. Forms and form elements have unique names. Each unique element can be identified. It Uses JavaScript Document Object Model (DOM).
- 28. Naming Form Elementsin HTML <form name=“Studentform"> Name: <input name=“Studentname"><br /> Phone: <input name="Studentphone"><br /> Email: <input name="Studentemail"><br /> </form>
- 29. Example : FormData Customizing an alert box <form name="alertform"> Enter your name: <input type="text" name="yourname"> <input type="button" value= "Go" onClick="window.alert('Hello ' + document.alertform.yourname.value);"> </form>
- 30. JavaScript : Advantages Lessserver interaction. Immediate feedback to the visitors. Increased interactivity. Richer interfaces.
- 31. JavaScript : Limitations Client-sideJavaScript does not allow the reading or writing of files. It cannot be used for networking applications. It doesn't have any multithreading or multiprocessor capabilities. It allows you to build interactivity over static HTML pages.
- 32. References JavaScript tutotrial .pdf TheWeb Wizard’s Guide to JavaScript by Steven Estrella. JavaScript for the World Wide Web by Tom Negrino and Dori Smith.
- 33.
Editor's Notes
- #24 JavaScript can be contained either in the header section of an HTML page or in the body. This JavaScript statement is shown as a pure JavaScript statement within SCRIPT tags. Notice that there is no HTML in the body of this page at all. (Demonstrate what this JavaScript looks like in a web browser). This statement writes a line of text on a web page. The command document.write is a standard function in JavaScript to write text to the page. The following is a more technical explanation for background information only: document.write is derived from the JavaScript object model (not covered in detail here). It works on the principle that all document and browser elements have an object name (document, window, image etc) and can each has various properties that can be manipulated. The object hierarchy means that individual elements can be uniquely identified i.e. document.myform.mytext would refer to the text entry named mytext within the form called myform within the current page (document). The arrow symbol '' is used in these slides and in the workbook to indicate where a JavaScript statement should be typed on one line without a break. A line break in the wrong place will stop JavaScript from working.e.g. document.write('This is my first JavaScript Page'); should actually be typed: document.write('This is my first JavaScript Page');
- #25 This example demonstrates that anything included within the quotes in the document.write statement is printed to the screen, and this includes HTML tags. The <h1> tag is delivered to the browser along with the text, and the browser would interpret it as a normal HTML file, displaying the text in the Heading 1 style. IMPORTANT NOTE: This example shows a JavaScript statement in the <body> of the web page. It is possible to include JavaScript statements in the <head> section of a web page but care must be taken that they do not try to access items that don't exist until the page has loaded (e.g. form elements, links, images). The web browser parses (reads through and executes) any script commands as it displays the page. In most cases it is common sense that dictates where a statement should be placed. If, in the above example, document.write was placed in the <head> of the page, the text "This is my first JavaScript Page" would appear in the <head> of the finished page – this would be incorrect – although modern browsers will let you get away with it! In some circumstances you may wish to use document.write in the <head> - for example to dynamically generate <meta> or <title> tags. Such uses are not considered here. JavaScript functions are typically defined in the <head> section of a web page as they do not normally execute until they have been triggered elsewhere. The use of functions in JavaScript is covered in the Netskills Training Module: "Further JavaScript (Enhancing JavaScript with Functions and Events)"
- #28 JavaScript is very useful for processing and manipulating user input and form elements. A common way of obtaining input is via the HTML <form> elements which can provide text entry boxes, selection boxes, menus and buttons. Form elements can be named and hence uniquely identified within the JavaScript object model.
- #29 This example shows a simple form. Notice the name attribute is used at all points - to name the form, and to name each element within the form. How JavaScript uses the name attribute is described next.
- #30 This simple code creates a form called alertform. The JavaScript is activated when 'Go' button is pressed (an onClick event - see separate Netskills Training Module for more details on Functions and Events in JavaScript). The current value of the element yourname would be displayed in a an alert box.