This document provides an introduction to JavaScript usage and functionalities. It discusses what JavaScript is, its history and development, how it is used for client-side scripting, and its advantages. It also covers JavaScript syntax, data types, variables, operators, and scoping. Key points include that JavaScript is a lightweight, interpreted programming language used widely in web pages; it allows for user interaction and dynamic pages; and has advantages like less server interaction and immediate user feedback.
Download as PPTX, PDF, TXT or read online on Scribd
0 ratings0% found this document useful (0 votes)
31 views
Intro To Javascript
This document provides an introduction to JavaScript usage and functionalities. It discusses what JavaScript is, its history and development, how it is used for client-side scripting, and its advantages. It also covers JavaScript syntax, data types, variables, operators, and scoping. Key points include that JavaScript is a lightweight, interpreted programming language used widely in web pages; it allows for user interaction and dynamic pages; and has advantages like less server interaction and immediate user feedback.
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 33
INTRODUCTION TO
JAVASCRIPT USAGE AND FUNCTIONALITIES WeeK 6-8 topic What is JavaScript?
• It is a dynamic computer programming language.
• It is light weight and commonly used as a part of web pages. • Allow client-side script to interact with the user and dynamic pages. • It is an interpreted programming language with object-oriented capabilities What is JavaScript?
• JavaScript was first known as LiveScript.
• Netscape change its name to JavaScript. (because of excitement being generated by Java) • JavaScript first appearance in Netscape 2.0 in 1995 with the name “LiveScript”. • General purpose core of the language has been embedded in Netscape, Internet Explorer, and other web browsers. ECMA-262 Specification • JavaScript is a lightweight, interpreted programming language. • Designed for creating network-centric applications. • Complementary to and integrated with Java. • Complementary to and integrated with HTML. • Open and cross-platform. Client Side JavaScript • Is the most common form of the language. • The script is should be included in or referenced by an HTML document for the code to be interpreted by the browser. • The JavaScript client-side mechanism provides many advantages over traditional CGI server-side scripts. Advantages of JavaScript • Less server interaction: You can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server. • Immediate feedback to the visitors: They don't have to wait for a page reload to see if they have forgotten to enter something. • Increased interactivity: You can create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard. Advantages of JavaScript • Richer interfaces: You can use JavaScript to include such items as drag-anddrop components and sliders to give a Rich Interface to your site visitors. Limitations of JavaScript We cannot treat JavaScript as a full-fledged programming language. It lacks the following important features: • Client-side JavaScript does not allow the reading or writing of files. This has been kept for security reason. • JavaScript cannot be used for networking applications because there is no such support available. • JavaScript doesn't have any multithreading or multiprocessor capabilities. JavaScript Development Tool Where is JavaScript today?
• The 8th edition, known as ECMAScript 2017, is the
current JavaScript version, released in June 2017. JavaScript is a dynamic computer programming language. JavaScript Syntax • JavaScript can be implemented using JavaScript statements that are placed within the <script>…</script> HTML tags in a web page. • You can place your script anywhere within your web page, but it is include within the <head> tags. JavaScript Syntax • Example: Script tags two important attributes:
• Language: This attribute specifies what scripting language
you are using. Typically, its value will be javascript. Although recent versions of HTML (and XHTML, its successor) have phased out the use of this attribute. • Type: This attribute is what is now recommended to indicate the scripting language in use and its value should be set to "text/javascript". Script tags two important attributes:
• So you JavaScript will look as follows:
Whitespace and Line Breaks
• JavaScript ignores spaces, tabs, and newlines that
appear in JavaScript programs. You can use spaces, tabs, and newlines freely in your program and you are free to format and indent your programs in a neat and consistent way that makes the code easy to read and understand. Semicolons are Optional • Simple statements in JavaScript are generally followed by a semicolon character, just as they are in C, C++, and Java. JavaScript, however, allows you to omit this semicolon if each of your statements are placed on a separate line. For example, the following code could be written without semicolons. Case Sensitivity • JavaScript is a case-sensitive language. This means that the language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters. So the identifiers Time and TIME will convey different meanings in JavaScript. Comments in JavaScript • JavaScript supports both C-style and C++-style comments. Thus: – Any text between a // and the end of a line is treated as a comment and is ignored by JavaScript. – Any text between the characters /* and */ is treated as a comment. This may span multiple lines. – JavaScript also recognizes the HTML comment opening sequence – The HTML comment closing sequence --> is not recognized by JavaScript so it should be written as //-->. Comments in JavaScript JavaScript Enabling • JavaScript in Chrome – Here are the steps to turn on or turn off JavaScript in Chrome: • Click the Chrome menu at the top right hand corner of your browser. • Select Settings. • Click Show advanced settings at the end of the page. • Under the Privacy section, click the Content settings button. • In the "Javascript" section, select "Do not allow any site to run JavaScript" or "Allow all sites to run JavaScript (recommended)". JavaScript - Placement • There is a flexibility given to include JavaScript code anywhere in an HTML document. However the most preferred ways to include JavaScript in an HTML file are as follows: – Script in <head>...</head> section. – Script in <body>...</body> section. – Script in <body>...</body> and <head>...</head> section. JavaScript in Head Section JavaScript in Body Section JavaScript in Body Section JavaScript in External File JavaScript Variables • One of the most fundamental characteristics of a programming language is the set of data types it supports. These are the type of values that can be represented and manipulated in a programming language. • JavaScript allows you to work with three primitive data types: – Numbers, e.g., 123, 120.50 etc. – Strings of text, e.g. "This text string" etc. – Boolean, e.g. true or false. JavaScript Data Types
• null and undefined
– defines only a single value. • Premitive Data types – object: cover objects in detail a separate chapter JavaScript Variables • Like many other programming languages, JavaScript has variables. Variables can be thought of as named containers. You can place data into these containers and then refer to the data simply by naming the container. Before you use a variable in a JavaScript program, you must declare it. Variables are declared with the var keyword as follows. • variable initialization: Storing a value in a variable JavaScript Variables Scope
• The scope of a variable is the region of your program in which it is
defined. JavaScript variables have only two scopes. – Global Variables: A global variable has global scope which means it can be defined anywhere in your JavaScript code. – Local Variables: A local variable will be visible only within a function where it is defined. Function parameters are always local to that function. JavaScript Variables Scope JavaScript Reserved Words JavaScript Operators • Let us take a simple expression 4 + 5 is equal to 9. Here 4 and 5 are called operands and ‘+’ is called the operator. JavaScript supports the following types of operators. – Arithmetic Operators – Comparison Operators – Logical (or Relational) Operators – Assignment Operators – Conditional (or ternary) Operators JAVASCRIPT!
JavaScript Fundamentals: JavaScript Syntax, What JavaScript is Use for in Website Development, JavaScript Variable, Strings, Popup Boxes, JavaScript Objects, Function, and Event Handlers: JavaScript Syntax, What JavaScript is Use for in Website Development, JavaScript Variable, Strings, Popup Boxes, JavaScript Objects, Function, and Event Handlers
JavaScript Fundamentals: JavaScript Syntax, What JavaScript is Use for in Website Development, JavaScript Variable, Strings, Popup Boxes, JavaScript Objects, Function, and Event Handlers