Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
6 views

Chapter 4 JavaScript

JavaScript is a core programming language for web development, essential alongside HTML and CSS. It allows developers to manipulate HTML content, validate data, and enhance user interaction on web pages. The document covers JavaScript syntax, statements, variables, functions, and methods for displaying output, emphasizing best practices for code organization and readability.

Uploaded by

andualemkerie
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Chapter 4 JavaScript

JavaScript is a core programming language for web development, essential alongside HTML and CSS. It allows developers to manipulate HTML content, validate data, and enhance user interaction on web pages. The document covers JavaScript syntax, statements, variables, functions, and methods for displaying output, emphasizing best practices for code organization and readability.

Uploaded by

andualemkerie
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 67

INTRODUCTION TO

JAVASCRIPT
WHY STUDY JAVASCRIPT?

 JavaScript is one of the 3 languages all web


developers must learn:
 1. HTML to define the content of web pages
 2. CSS to specify the layout of web pages
 3. JavaScript to program the behavior of web
pages
JAVASCRIPT
 JavaScript is the programming language of HTML and
the Web.
 Programming makes computers do what you want
them to do.
 Change HTML Content
 Change HTML Attributes
 Change HTML Styles (CSS)
 Validate Data
 JavaScript and Java are completely different languages, both in
concept and design.
JAVASCRIPT WHERE TO
 JavaScript can be placed in the <body> and the <head>
sections of an HTML page.
 The <script> Tag

 In HTML, JavaScript code must be inserted between


<script> and </script> tags.
Example
 <script>
document.getElementById("demo").innerHTML = "My
First JavaScript";
</script>
JAVASCRIPT IN <HEAD>
 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:
 Example
 <!DOCTYPE html>
<html><head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph
changed.";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
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 clicked:
 Example
 <!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph
changed.";
}
</script>

</body>
</html>
 It is a good idea to place scripts at the bottom of
the <body> element.
This can improve page load, because script
compilation can slow down the display.
EXTERNAL JAVASCRIPT
 Scripts can also be placed in external files:
myScript.js
 function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph
changed.";
}
 External scripts are practical when the same code is used in many
different web pages.
 JavaScript files have the file extension .js.

 To use an external script, put the name of the script file in the src
(source) attribute of a <script> tag:
 Example
 <!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
EXTERNAL JAVASCRIPT
 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 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 can "display" data in different ways:
 Writing into an alert box, using window.alert().
 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:
 Example

 <!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>


<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>
USING DOCUMENT.WRITE()
 For testing purposes, it is convenient to use
document.write():
 Example

 <!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
 Using document.write() after an HTML document is fully
loaded, will delete all existing HTML:
 <button onclick="document.write(5 + 6)">Try it</button>
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:
 Example

 <!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
USING CONSOLE.LOG()
 In your browser, you can use the console.log() method
to display data.
 Activate the browser console with F12, and select
"Console" in the menu.
 Example

 <!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>
JAVASCRIPT SYNTAX
 JavaScript syntax is the set of 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.
 JavaScript is a programming language.

 JavaScript statements are separated by semicolons.

 Example

 var x = 5;
var y = 6;
var z = x + y;
JAVASCRIPT SYNTAX
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.
JavaScript Literals
 The most important rules for writing fixed values are:

 Numbers are written with or without decimals:


 10.50
1001
 Strings are text, written within double or single quotes:
 "John Doe"
'John Doe'
JAVASCRIPT SYNTAX
JavaScript Variables
 In a programming language, variables are used to store data
values.
 JavaScript uses the var keyword to declare variables.
 An equal sign is used to assign values to variables.
 In this example, x is defined as a variable. Then, x is assigned (given)
the value 6:
 var x;
x = 6;
JavaScript Operators
 JavaScript uses an assignment operator ( = ) to assign values to
variables:
 var x = 5;
var y = 6;
 JavaScript uses arithmetic operators ( + - * / ) to compute
values:
 (5 + 6) * 10
JAVASCRIPT SYNTAX
JavaScript Expressions
 An expression is a combination of values, variables, and operators,
which computes to a value.
 The computation is called an evaluation.
 For example, 5 * 10 evaluates to 50:
 5 * 10
 Expressions can also contain variable values:

 x * 10

 The values can be of various types, such as numbers and strings.

 For example, "John" + " " + "Doe", evaluates to "John Doe":

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 SYNTAX
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:

 var x = 5; // I will be executed

// var x = 6; I will NOT be executed


JavaScript Character Set
 JavaScript uses the Unicode character set.

 Unicode covers (almost) all the characters,


punctuations, and symbols in the world.
JAVASCRIPT SYNTAX
JavaScript Identifiers
 Identifiers are names.

 In JavaScript, identifiers are used to name variables


(and keywords, and functions, and labels).
 The rules for legal names are much the same in most
programming languages.
 In JavaScript, the first character must be a letter, an
underscore (_), or a dollar sign ($).
 Subsequent characters may be letters, digits,
underscores, or dollar signs.
 Numbers are not allowed as the first character.
This way JavaScript can easily distinguish identifiers
from numbers.
JAVASCRIPT SYNTAX
JavaScript is Case Sensitive
 All JavaScript identifiers are case sensitive.

 The variables lastName and lastname, are two


different variables.
 lastName = "Doe";
lastname = "Peterson";
 JavaScript does not interpret VAR or Var as the
keyword var.
JAVASCRIPT SYNTAX
JavaScript and Camel Case
 Historically, programmers have used three ways of
joining multiple words into one variable name:
 Hyphens:

 first-name, last-name, master-card, inter-city.

 Underscore:

 first_name, last_name, master_card, inter_city.

 Camel Case:

 FirstName, LastName, MasterCard, InterCity.

 In programming languages, especially in JavaScript,


camel case often starts with a lowercase letter:
 firstName, lastName, masterCard, interCity.

 Hyphens are not allowed in JavaScript. It is reserved for


subtractions.
JAVASCRIPT STATEMENTS
 In HTML, JavaScript statements are "instructions" to be "executed"
by the web browser.
 This statement tells the browser to write "Hello Dolly." inside an
HTML element with id="demo":
 Example
 document.getElementById("demo").innerHTML = "Hello Dolly.";
JavaScript Programs
 Most JavaScript programs contain many JavaScript statements.
 The statements are executed, one by one, in the same order as they
are written.
 In this example x, y, and z are given values, and finally z is
displayed:
 Example
 var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML = z;
Example
<!DOCTYPE html>
<html>
<body>
<p>JavaScript code (or just JavaScript) is a list of
JavaScript statements.</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
JAVASCRIPT STATEMENTS
Semicolons ;
 Semicolons separate JavaScript statements.
 Add a semicolon at the end of each executable statement:
 a = 5;
b = 6;
c = a + b;
 When separated by semicolons, multiple statements on one line are
allowed:
 a = 5; b = 6; c = a + b;
JavaScript White Space
 JavaScript ignores multiple spaces. You can add white space to your
script to make it more readable.
 The following lines are equivalent:
 var person = "Hege";
var person="Hege";
 A good practice is to put spaces around operators ( = + - * / ):
 var x = y + z;
JAVASCRIPT STATEMENTS
JavaScript Line Length and Line Breaks
 For best readability, programmers often like to avoid
code lines longer than 80 characters.
 If a JavaScript statement does not fit on one line, the
best place to break it, is after an operator:
 Example

 document.getElementById("demo").innerHTML =
"Hello Dolly.";
JAVASCRIPT STATEMENTS
JavaScript Code Blocks
 JavaScript statements can be grouped together in code
blocks, inside curly brackets {...}.
 The purpose of code blocks is to define statements to be
executed together.
 One place you will find statements grouped together in
blocks, are in JavaScript functions:
 Example

 function myFunction() {
document.getElementById("demo").innerHTML =
"Hello Dolly.";
document.getElementById("myDIV").innerHTML =
"How are you?";
}
JAVASCRIPT STATEMENTS
JavaScript Keywords
 JavaScript statements often start with a keyword to
identify the JavaScript action to be performed.
 Here is a list of some of the keywords you will learn
about in this tutorial:
Keyword Description

break Terminates a switch or a loop

continue Jumps out of a loop and starts at the top

Stops the execution of JavaScript, and calls (if available) the debugging
debugger
function

Executes a block of statements, and repeats the block, while a condition is


do ... while
true

for Marks a block of statements to be executed, as long as a condition is true

function Declares a function

if ... else Marks a block of statements to be executed, depending on a condition

return Exits a function

switch Marks a block of statements to be executed, depending on different cases

try ... catch Implements error handling to a block of statements

var Declares a variable


JAVASCRIPT COMMENTS
 JavaScript comments can be used to explain JavaScript
code, and to make it more readable.
 JavaScript comments can also be used to prevent
execution, when testing alternative code.
Single Line Comments
 Single line comments start with //.

 Any text between // and the end of the line, will be


ignored by JavaScript (will not be executed).
 Example

 var x = 5; // Declare x, give it the value of 5


var y = x + 2; // Declare y, give it the value of x + 2
JAVASCRIPT COMMENTS
 Multi-line Comments
 Multi-line comments start with /* and end with */.

 Any text between /* and */ will be ignored by JavaScript.

 This example uses a multi-line comment (a comment


block) to explain the code:
 /*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/
 Using comments to prevent execution of code, is suitable
for code testing.
 Adding // in front of a code line changes the code lines
from an executable line to a comment.
JAVASCRIPT COMMENTS
 Multi-line Comments
 Multi-line comments start with /* and end with */.

 Any text between /* and */ will be ignored by JavaScript.

 This example uses a multi-line comment (a comment


block) to explain the code:
 /*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/
 Using comments to prevent execution of code, is suitable
for code testing.
 Adding // in front of a code line changes the code lines
from an executable line to a comment.
JAVASCRIPT VARIABLES

 JavaScript variables are containers for storing


data values.
 In this example, x, y, and z, are variables:

 Example

 var x = 5;
var y = 6;
var z = x + y;
 All JavaScript variables must be identified
with unique names.
 These unique names are called identifiers.
JAVASCRIPT IDENTIFIERS
 Identifiers can be short names (like x and y), or more
descriptive names (age, sum, totalVolume).
 The general rules for constructing names for
variables (unique identifiers) are:
 Names can contain letters, digits, underscores, and
dollar signs.
 Names must begin with a letter

 Names can also begin with $ and _ (but we will not


use it in this tutorial)
 Names are case sensitive (y and Y are different
variables)
 Reserved words (like JavaScript keywords) cannot be
used as names
THE ASSIGNMENT OPERATOR

 In JavaScript, the equal sign (=) is an


"assignment" operator, not an "equal to"
operator.
 This is different from algebra. The following does
not make sense in algebra:
x=x +5

 In JavaScript, however, it makes perfect sense: it


assigns the value of x + 5 to x.
 (It calculates the value of x + 5 and puts the
result into x. The value of x is incremented by 5.)
 The "equal to" operator is written like == in
JavaScript.
JAVASCRIPT DATA TYPES
 JavaScript variables can hold numbers like 100, and text
values like "John Doe".
 In programming, text values are called text strings.

 JavaScript can handle many types of data, but for now,


just think of numbers and strings.
 Strings are written inside double or single quotes.
Numbers are written without quotes.
 If you put quotes around a number, it will be treated as a
text string.
 Example

 var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';
DECLARING (CREATING) JAVASCRIPT
VARIABLES
 Creating a variable in JavaScript is called "declaring" a
variable.
 You declare a JavaScript variable with the var
keyword:
var carName;
 After the declaration, the variable has no value.
(Technically it has the value of undefined)
 To assign a value to the variable, use the equal sign:

carName = "Volvo";
 You can also assign a value to the variable when you
declare it:
 var carName = "Volvo";

 var person = "John Doe", carName = "Volvo", price =


200;
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Create a variable, assign a value to it, and display
it:</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
document.getElementById("demo").innerHTML =
carName;
</script>
</body>
</html>
VALUE = UNDEFINED

 In computer programs, variables are often


declared without a value. The value can be
something that has to be calculated, or
something that will be provided later, like user
input.
 A variable declared without a value will have the
value undefined.
 The variable carName will have the value
undefined after the execution of this statement:
 Example

 var carName;
RE-DECLARING JAVASCRIPT
VARIABLES

 If you re-declare a JavaScript variable, it will not


lose its value.
 The variable carName will still have the value
"Volvo" after the execution of these statements:
 Example

 var carName = "Volvo";


var carName;
JAVASCRIPT ARITHMETIC
 As with algebra, you can do arithmetic with
JavaScript variables, using operators like = and +:
 Example

var x = 5 + 2 + 3;
 You can also add strings, but strings will be
concatenated (added end-to-end):
 Example

var x = "John" + " " + "Doe";


JAVASCRIPT ARITHMETIC
OPERATORS

 Arithmetic operators are used to perform


arithmetic on numbers (literals or variables).
JAVASCRIPT ASSIGNMENT
OPERATORS
 Assignment operators assign values to
JavaScript variables.
JAVASCRIPT COMPARISON AND
LOGICAL OPERATORS
OPERATORS AND OPERANDS
 The numbers (in an arithmetic operation) are called
operands.
 The operation (to be performed between the two
operands) is defined by an operator.
 Operand Operator Operand 100 + 50
JAVASCRIPT DATA TYPES
 JavaScript variables can hold many data types:
numbers, strings, arrays, objects and more:

 JavaScript evaluates expressions from left to right.


Different sequences can produce different results:
 var x = 16 + 4 + "Volvo";

 var x = "Volvo" + 16 + 4;
JAVASCRIPT HAS DYNAMIC
TYPES

 JavaScript has dynamic types. This means that


the same variable can be used as different types:
 Example

 var x; // Now x is undefined


var x = 5; // Now x is a Number
var x = "John"; // Now x is a String
JAVASCRIPT STRINGS

 A string (or a text string) is a series of characters


like "John Doe".
 Strings are written with quotes. You can use
single or double quotes:

 Example
 var carName = "Volvo XC60"; // Using double
quotes
var carName = 'Volvo XC60'; // Using single
quotes
JAVASCRIPT NUMBERS

 JavaScript has only one type of numbers.


 Numbers can be written with, or without
decimals:

 Example
 var x1 = 34.00; // Written with decimals
var x2 = 34; // Written without decimals
JAVASCRIPT BOOLEANS
 Booleans can only have two values: true or false.
 Example

 var x = true;
var y = false;
JAVASCRIPT ARRAYS

 JavaScript arrays are written with square


brackets.
 Array items are separated by commas.

 The following code declares (creates) an array


called cars, containing three items (car names):
 Example

 var cars = ["Saab", "Volvo", "BMW"];

 Array indexes are zero-based, which means the


first item is [0], second is [1], and so on.
JAVASCRIPT OBJECTS

 JavaScript objects are written with curly braces.


 Object properties are written as name:value
pairs, separated by commas.
 Example

 var person = {firstName:"John", lastName:"Doe",


age:50, eyeColor:"blue"};
 The object (person) in the example above has 4
properties: firstName, lastName, age, and
eyeColor.
JAVASCRIPT FUNCTIONS

 A JavaScript function is a block of code designed


to perform a particular task.
 A JavaScript function is executed when
"something" invokes it (calls it).

function myFunction(p1, p2) {


return p1 * p2; // The function returns
the product of p1 and p2
}
<!DOCTYPE html>
<html>
<body>
<p>This example calls a function which performs a calculation, and
returns the result:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
JAVASCRIPT FUNCTION SYNTAX
 A JavaScript function is defined with the function
keyword, followed by a name, followed by parentheses
().
 Function names can contain letters, digits, underscores,
and dollar signs (same rules as variables).
 The parentheses may include parameter names
separated by commas:
(parameter1, parameter2, ...)
 The code to be executed, by the function, is placed inside
curly brackets: {}
JAVASCRIPT FUNCTION SYNTAX
 Function parameters are the names listed in the
function definition.
 Function arguments are the real values received by
the function when it is invoked.
 Inside the function, the arguments behave as local
variables.

function myFunction(p1, p2) {


return p1 * p2; // The function returns the
product of p1 and p2
}

document.getElementById("demo").innerHTML =
myFunction(4, 3);
FUNCTION INVOCATION
 The code inside the function will execute when
"something" invokes (calls) the function:
 When an event occurs (when a user clicks a button)
 When it is invoked (called) from JavaScript code
 Automatically (self invoked)

 <input type="button" onClick="compare()"


Value="Compute" />
FUNCTION RETURN
 When JavaScript reaches a return statement, the
function will stop executing.
 If the function was invoked from a statement,
JavaScript will "return" to execute the code after the
invoking statement.
 Functions often compute a return value. The return
value is "returned" back to the "caller":
CONDITIONAL STATEMENTS

 Conditional statements are used to perform different actions based


on different conditions.
 Very often when you write code, you want to perform different
actions for different decisions.
 You can use conditional statements in your code to do this.
 In JavaScript we have the following conditional statements:
 Use if to specify a block of code to be executed, if a specified
condition is true
 Use else to specify a block of code to be executed, if the same
condition is false
 Use else if to specify a new condition to test, if the first condition is
false
 Use switch to specify many alternative blocks of code to be executed
THE IF STATEMENT
 Use the if statement to specify a block of
JavaScript code to be executed if a condition is
true.
 Syntax

if (condition) {
block of code to be executed if the condition is
true
}
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<p>Display “Not Allowed!" if the age is less than 18</p>
<p id=“ag"></p>
<script>
Var age=14;
if (age < 18) {
document.getElementById(“ag").innerHTML = “Not Allowed!";
}
</script>
</body>
THE ELSE STATEMENT

 Use the else statement to specify a block of code


to be executed if the condition is false.
 Syntax

if (condition) {
block of code to be executed if the condition is
true
} else {
block of code to be executed if the condition is
false
}
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<p>Display “Not Allowed!" if the age is less than 18 else print Allowed</p>
<p id=“ag"></p>
<script>
Var age=14;
if (age < 18) {
document.getElementById(“ag").innerHTML = “Not Allowed!";
}
else{
document.getElementById(“ag").innerHTML = “Allowed!";
}
</script>
</body>
THE ELSE IF STATEMENT
 Use the else if statement to specify a new
condition if the first condition is false.
 Syntax

if (condition1) {
block of code to be executed if condition1 is true
} else if (condition2) {
block of code to be executed if the condition1 is
false and condition2 is true
} else {
block of code to be executed if the condition1 is
false and condition2 is false
}
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<p> Comparing Numbers</p>
<p id=“comp"></p>
<script>
Var x=14;
Var y=14;
if (x > y) {
document.getElementById(“comp").innerHTML =x+ “is gratest";
}
else if (y> x) {
document.getElementById(“comp").innerHTML =y+ “is gratest";
}
else {
document.getElementById(“comp").innerHTML = “both are equal";
}
</script>
</body>
THE JAVASCRIPT SWITCH STATEMENT
 The switch statement is used to perform different actions based on
different conditions.
 Use the switch statement to select one of many blocks of code to be
executed.
 Syntax
switch(expression) {
case n:
code block
break;
case n:
code block
break;
default:
default code block
}
 This is how it works:
 The switch expression is evaluated once.
 The value of the expression is compared with the values of each case.
 If there is a match, the associated block of code is executed.
THE BREAK KEYWORD
 When the JavaScript code interpreter reaches
a break keyword, it breaks out of the switch block.
 This will stop the execution of more code and case
testing inside the block.
The default Keyword
 The default keyword specifies the code to run if
there is no case match:
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<input id="myInput" type="text" value="Tutti Frutti">
<button onclick="checkFruit()">Check Fruit</button>
<p id="demo"></p>
<script>
function checkFruit() {
var text;
var fruits = document.getElementById("myInput").value;
switch(fruits) {
case "Banana":
text = "Banana is good!";
break;
case "Orange":
text = "I am not a fan of orange.";
break;
case "Apple":
text = "How you like them apples?";
break;
// add the default keyword here
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>

You might also like