Lesson 4.1 - JavaScript Lesson

Introduction to JavaScript - I
What is JAVASCRIPT?
 Invented by Brendan Eich and appeared in Netscape browser in 1995, JavaScript is a Scripting Language, a
lightweight programming language.
 JavaScript is a programming code that can be inserted into HTML pages.
 JavaScript code can be executed by all modern web browsers.
What JS Can Do
 Writing Into HTML Output
 Reacting to Events
 Changing HTML Content
 Changing HTML Styles
 Validate Inputs
How to Use
 JavaScripts in HTML must be inserted between <script> and </script> tags.
 JavaScripts can be put in the <body> and in the <head> section of an HTML page.
The <script> Tag

To insert a JavaScript into an HTML page, use the <script> tag. The <script> and </script> tells where the JavaScript
starts and ends. The lines between the <script> and </script> contain the JavaScript:

<script>
alert("My First JavaScript");
</script>
A JavaScript Function
The function is called when an event occurs.

<button type="button" onclick="myFunction()">Try it</button>
<script>function myFunction(){//do something}</script>
External JavaScripts
Scripts can also be placed in external files. External files often contain code to be used by several different web pages.
External JavaScript files have the file extension .js.

<script src="myScript.js"></script>
Manipulating HTML Elements

To access an HTML element from JavaScript, you can use the document.getElementById(id) method. Use the "id"
attribute to identify the HTML element:

<script> document.getElementById("demo").innerHTML="My First JavaScript"; </script>
Statements
JavaScript statements are "commands" to the browser. The purpose of the statements is to tell the browser what to do.
Ex.: document.getElementById("demo").innerHTML="Hello Dolly";Top of Form
Semicolon(;)
Semicolon separates JavaScript statements. Using semicolons also makes it possible to write many statements on one line.
1

Code
JavaScript code is a sequence of JavaScript statements. Each statement is executed by the browser in the sequence they
are written.
Code Blocks
JavaScript statements can be grouped together in blocks. Blocks start with a left curly bracket, and end with a right curly
bracket. The purpose of a block is to make the sequence of statements execute together.
A good example of statements grouped together in blocks, are JavaScript functions.

Function myFunction()
{
…
}
Break up a Code Line

You can break up a code line within a text string with a backslash.

document.write("Hello \
World!");
Comments
Comments will not be executed by JavaScript. Comments can be added to explain the JavaScript, or to make the code
more readable. It can be used also to prevent the execution of one of the codelines.
 Single line comments start with //.
 Multi line comments start with /* and end with */.
Variables
JavaScript variables are "containers" for storing information. Variables are case sensitive.
 Variable names must begin with a letter
 Variable names can also begin with $ and _
 Variable names are case sensitive (y and Y are different variables)

Ex. var myVar = 10;
You declare JavaScript variables with the var keyword.

You can declare many variables in one statement. Just start the statement with var and separate the variables by comma:

var lastname="Doe", age=30, job="carpenter";
Your declaration can also span multiple lines:

var lastname="Doe",
age=30,
job="carpenter";
Variable declared without a value will have the value undefined. Variables can be emptied by setting the value to null.
If you re-declare a JavaScript variable, it will not lose its value.

var myName="Lawrence";
var myName;

2

Local and Global Variables

A variable declared (using var) within a JavaScript function becomes Local and can only be accessed from within that
function.
You can have local variables with the same name in different functions, because local variables are only recognized by
the function in which they are declared.
Variables declared outside a function, become Global, and all scripts and functions on the web page can access it. Global
variables are deleted when you close the page.
* It's a good programming practice to declare all the variables you will need, in one place, at the beginning of your code.
Data Types
Strings
A string is a variable which stores a series of characters like "John Doe". A string can be any text inside quotes. You can use
single or double quotes.

var name = ‘My Name’; var name = “My Name”;
You can use quotes inside a string, as long as they don't match the quotes surrounding the string.

var answer="It's alright";
var answer="He is called 'Johnny'";
The + operator can also be used to add string variables or text values together.

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
Numbers
JavaScript has only one type of numbers. Numbers can be written with, or without decimals:

var x1=34.00; // Written with decimals
var x2=34; // Written without decimals
Booleans
Booleans can only have two values, true or false, and are often used in conditional testing.

var x=true;
var y=false;

Functions
A function is a block of code that will be executed when "someone" calls it.
A function is written as a code block (inside curly { } braces), preceded by the function keyword.

function functionname()
{
//some code to be executed
}
3

The function can be called directly when an event occurs and it can be called from "anywhere" by JavaScript code.
Function with Arguments

Arguments or parameters are variables passed through functions. These arguments can be used inside the function.
You can send as many arguments as you like, separated by commas (,).

myFunction(argument1,argument2)
return Statement
Using the return statement, the function will stop executing, and return the specified value.

var myVar=myFunction();
function myFunction()
{
var x=5;
return x;
}
The return statement is also used when you simply want to exit a function. The return value is optional.

function myFunction(a,b)
{
if (a>b) {
return;
}
x=a+b
}

Operators
Arithmetic Operators
Arithmetic operators are used to perform arithmetic between variables and/or values. If y=5;
Assignment Operators
Assignment operators are used to assign values to JavaScript variables. If x=10 and y=5;
4

Comparison Operators
Comparison operators are used in logical statements to determine equality or difference between variables or values. If
x=5;
Logical Operators
Logical operators are used to determine the logic between variables or values. If x=6 and y=3;
Conditional Operator
JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.
variablename=(condition)?value1:value2
5

Lesson 4.1 - JavaScript Lesson

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lesson 4.1 - JavaScript Lesson

Uploaded by

Copyright:

Available Formats

Introduction to JavaScript - I

The <script> Tag

Manipulating HTML Elements

Break up a Code Line

You declare JavaScript variables with the var keyword.

Your declaration can also span multiple lines:

Local and Global Variables

Function with Arguments

You might also like