JavaScript Assignment Help | Tutorial part -1

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