What is Java Script?
JavaScript is the programming language of HTML and the Web.
Why Study JavaScript?
JavaScript JavaScript is one of the 3 languages languages all web developers must learn:
HTML to define the content of web pages
CSS to specify the layout of web pages
JavaScript to program the behavior of web pages
What JavaScript can do ?
JavaScript Can Change HTML Content:
This example uses the method to "find" an HTML element (with See Example J2.html id="demo"), and changes the element content (innerHTML) to "Hello JavaScript“.
See Example J2.htm
All Example Files you can download from here
JavaScript Can Change HTML Attributes:
This example changes an HTML image, by changing the src attribute
See Example J3.html of an tag.
JavaScript Can Change HTML Styles (CSS)
Changing the style of an HTML element, is a variant of changing an HTML attribute.
See Example J4.html
JavaScript Can Validate Data
See Example J5.html
JavaScript Where To
JavaScript can be placed in the and the sections of an HTML page.
The <script> Tag ‐ In HTML, JavaScript code must be inserted between <script> and </script> tags.
<script>
document.getElementById("demo").innerHTML = "My First JavaScript"; </script>JavaScript Functions and Events ‐ A JavaScript function is a block of JavaScript JavaScript code, that can be executed executed when "asked " for. For example example, a function can be executed when an event occurs, like when the user clicks a button.
JavaScript Where To
JavaScript in <head> or <body> ‐ You can place any number of scripts in an HTML document. Scripts can be placed in the <body> , or in the <head> section of an HTML page, or in both.
JavaScript in <head> ‐ You can place any number of scripts in an HTML document. Scripts can be placed in the , or in the section section of an HTML page, or in both.
See Example J6.htm
In this example, a JavaScript function is placed in the <head> section of an HTML page. The function is invoked (called) when a button is clicked.
JavaScript in <body> ‐
In this example, a JavaScript function is placed in the <body> section of an HTML page. The function is invoked (called) when a button is
See Example J7.html clicked
External JavaScript –
Scripts can also be placed in external files. External scripts are practical when the same code is used in many different web pages. JavaScript files have the file extension .js
You can place an external script reference in <head> or <body> as you like. The script will behave as if it was located exactly where the <script> tag is located. External scripts cannot contain <script> tags
External JavaScript Advantages –
Placing JavaScripts in external external files has some advantages:
It separates HTML and code
It makes HTML and JavaScript easier to read and maintain
Cached JavaScript files can speed up page loads
JavaScript Output
JavaScript does not have any built ‐in print or display functions.
JavaScript Display Possibilities
JavaScript display output in different ways
Writing into an alert box, using window.alert().
Writing Writing into the HTML output using document.write().
Writing into an HTML element, using innerHTML.
Writing into the browser console, using console.log()
Using window.alert()
You can use an alert box to display data:
See Example J9.html
Using document.write()
For testing purposes, it is convenient to use document.write():
See Example J10.html & j11.html
Using innerHTML
To access an HTML element, JavaScript can use the document getElementById(id) method. The id attribute defines the HTML element. The innerHTML property defines the HTML content
See Example J12.html
Using console.log()
In your browser, you can use the console.log() method to display data. Activate t h e browser console wit h F12, an d select "Console " in the menu.
See Example J13.html
JavaScript Syntax
JavaScript syntax is the set o f rules, how JavaScript programs are constructed.
JavaScript Programs –
A computer program is a list of "instructions" to be "executed" by the computer.
In a programming language, these program instructions are called statements.
Java Script is a programming language
JavaScript statements are separated by semicolon.
var x = 5;
var x = 5;
var y = 6;
var z = x + y;
JavaScript Statements –
JavaScript statements are composed of: Values, Operators, Expressions, Keywords, and Comments
JavaScript Values ‐
The JavaScript syntax defines two types of values: Fixed values and variable values. Fixed values are called literals. Variable values are called variables
Java Script Literas –
The most important rules for writing fixed values are: Numbers Numbers are written written with or without without decimals:
10.50
1001
See Example J15.htm
Strings are text, written within double or single quotes:
See Example J16.html
Expressions can also represent fixed values:
See Example J17.html
JavaScript Variables -
In a programming language, variables are used to store data values. JavaScript uses the var keyword to define variables. An equal sign is used to assign values to variables.
var x; x = 6;
var x=6;
JavaScript uses arithmetic operators ( + ‐ * / ) to compute values:
(5 + 6) * 10
See Example J18 html
JavaScript Keywords ‐
JavaScript keywords are used to identify actions to be performed. The var keyword tells the browser to create a new variable:
var x = 5 + 6; var y = x * 10;
JavaScript Comments ‐ Not all JavaScript statements are "executed". Code after double slashes // or between /* and */ is treated as a comment. Comments are ignored, and will not be executed.
JavaScript is Case Sensitive ‐ All JavaScript identifiers are case sensitive sensitive. The variables variables lastName lastName and lastname lastname, are two different different variables.
JavaScript Character Set ‐ JavaScript uses the Unicode character set.
JavaScript Statements ‐ In HTML, JavaScript JavaScript statements statements are "instructions" to be "executed" by the web browser.
document.getElementById("demo").innerHTML = "Hello Dolly."; This statement tells the browser to write " Hello Dolly. " inside an HTML element with id="demo":
See Example J19.html
JavaScript Programs ‐ Most JavaScript programs contain many JavaScript statements. The statements are executed, one by one, in the same order as they are written
See Example J20 html