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

Java Script Notes

The document discusses various things that JavaScript can do, including changing HTML content and attributes, hiding and showing HTML elements, and displaying data in different ways such as writing to elements or using alerts. It also covers JavaScript syntax, keywords, variables, operators, and data types.

Uploaded by

Joydeb Sheet
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views

Java Script Notes

The document discusses various things that JavaScript can do, including changing HTML content and attributes, hiding and showing HTML elements, and displaying data in different ways such as writing to elements or using alerts. It also covers JavaScript syntax, keywords, variables, operators, and data types.

Uploaded by

Joydeb Sheet
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 25

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 Can Change HTML Content


One of many JavaScript HTML methods is getElementById().

This example uses the method to "find" an HTML element (with id="demo")
and changes the element content (innerHTML) to "Hello JavaScript":

<!DOCTYPE html>

<html>

<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button"
onclick='document.getElementById("demo").innerHTML = "Hello
JavaScript!"'>Click Me!</button>

</body>
</html>

JavaScript Can Change HTML Attribute


Values
In this example JavaScript changes the value of the src (source) attribute of
an <img> tag:

<!DOCTYPE html>

<html>

<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of
an image.</p>

<button
onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn
on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button
onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn
off the light</button>
</body>

</html>

JavaScript Can Change HTML Styles (CSS)


Changing the style of an HTML element, is a variant of changing an HTML
attribute:

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML


element.</p>

<button type="button"
onclick="document.getElementById('demo').style.fontSize='3
5px'">Click Me!</button>

</body>
</html>

JavaScript Can Hide HTML Elements


Hiding HTML elements can be done by changing the display style:

<!DOCTYPE html>

<html>

<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button"

onclick="document.getElementById('demo').style .display='none'">Click Me!</button>

</body>

</html>

JavaScript Can Show HTML Elements


Showing hidden HTML elements can also be done by changing the display
style:

<!DOCTYPE html>

<html>

<body>

<h2>What Can JavaScript Do?</h2>


<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button"

onclick="document.getElementById('demo'). style.display='block'">Click
Me!</button>

</body>

</html>

**
The <script> Tag
In HTML, JavaScript code must be inserted between <script> and </script>
tags.

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript in Body</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";

</script>

</body>

</html>

Old JavaScript examples may use a type attribute: <script


type="text/javascript">.
The type attribute is not required. JavaScript is the default scripting language
in HTML.

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

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML =
"Paragraph changed.";
}
</script>
</head>

<body>

<h2>JavaScript in Head</h2>

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

<!DOCTYPE html>
<html>

<body>

<h2>JavaScript in Body</h2>

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

JavaScript Display Possibilities


JavaScript can "display" data in different ways:

 Writing into an HTML element, using innerHTML.


 Writing into the HTML output using document.write().
 Writing into an alert box, using window.alert().

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:
<!DOCTYPE html>

<html>

<body>

<h2>My First Web Page</h2>

<p>My First Paragraph.</p>

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML = 5 + 6;

</script>

</body>

</html>

Using document.write()
For testing purposes, it is convenient to use document.write():

<!DOCTYPE html>

<html>

<body>

<h2>My First Web Page</h2>

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

<!DOCTYPE html>

<html>

<body>

<h2>My First Web Page</h2>

<p>My first paragraph.</p>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

</body>

</html>

Using window.alert()
You can use an alert box to display data:

<!DOCTYPE html>

<html>

<body>

<h2>My First Web Page</h2>

<p>My first paragraph.</p>

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

</script>

</body>

</html>

JavaScript Statements
Semicolons separate JavaScript statements.

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Statements</h2>

<p>A <b>JavaScript program</b> is a list of <b>statements</b> to be executed by a computer.</p>

<p id="demo"></p>

<script>

var x, y, z; // Statement 1

x = 5; // Statement 2

y = 6; // Statement 3

z = x + y; // Statement 4

document.getElementById("demo").innerHTML =

"The value of z is " + z + ".";


</script>

</body>

</html>

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:

Keywor Description
d

Break Terminates a switch or a loop

Continue Jumps out of a loop and starts at the top

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

do ... Executes a block of statements, and repeats the block, while a


while condition is 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 ... Implements error handling to a block of statements


catch

Var Declares a variable

JavaScript Syntax
JavaScript syntax is the set of rules, how JavaScript programs are constructed:

var x, y;          // How to declare variables


x = 5; y = 6;      // How to assign values
z = x + y;         // How to compute values

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 arithmetic operators ( + - *  / ) to compute values:

JavaScript uses an assignment operator ( = ) to assign values to


variables:

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

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

JavaScript Arithmetic Operators


Arithmetic operators perform arithmetic on numbers (literals or variables).

Operator Description

+ Addition

- Subtraction

* Multiplication

/ Division
% Modulus (Remainder)

++ Increment

-- Decrement

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

The addition operator (+) adds numbers:

<!DOCTYPE html>

<html>

<body>

<h2>The + Operator</h2>

<p id="demo"></p>

<script>
var x = 5;

var y = 2;

var z = x + y;

document.getElementById("demo").innerHTML = z;

</script>

</body>

</html>

JavaScript Assignment Operators


Assignment operators assign values to JavaScript variables.

Operator Example Same As

= x=y x=y

+= x += y x=x+y

-= x -= y x=x-y

*= x *= y x=x*y
/= x /= y x=x/y

%= x %= y x=x%y

<<= x <<= y x = x << y

>>= x >>= y x = x >> y

>>>= x >>>= y x = x >>> y

&= x &= y x=x&y

^= x ^= y x=x^y

|= x |= y x=x|y

**= x **= y x = x ** y

JavaScript Data Types


JavaScript variables can hold many data types: numbers, strings, objects
and more:

var length = 16;                               // Number


var lastName = "Johnson";                      // String
var x = {firstName:"John", lastName:"Doe"};    // Object
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).

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: {}

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Functions</h2>

<p>This example calls a function which performs a calculation, and returns the result:</p>

<p id="demo"></p>

<script>

function myFunction(p1, p2) {

return p1 * p2;
}

document.getElementById("demo").innerHTML = myFunction(4, 3);

</script>

</body>

</html>

Real Life Objects, Properties, and Methods


In real life, a car is an object.

A car has properties like weight and color, and methods like start and


stop:

Object Properties Methods

car.name = Fiat car.start()

car.model = 500 car.drive()

car.weight = 850kg car.brake() 

car.color = white
car.stop()

All cars have the same properties, but the property values differ from car
to car.

All cars have the same methods, but the methods are performed at
different times.

Objects are variables too. But objects can contain many values.

This code assigns many values (Fiat, 500, white) to a variable named car:


<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>

// Create an object:

var car = {type:"Fiat", model:"500", color:"white"};

// Display some data from the object:


document.getElementById("demo").innerHTML =
car.type;
</script>

</body>

</html>

What is "this"?
In a function definition, this refers to the "owner" of the function.

In the example below, this refers to the person object.


The person object "owns" the fullName method.

<!DOCTYPE html>

<html>

<body>

<h2>The JavaScript <b>this</b> Keyword</h2>

<p>In this example, <b>this</b> represents the <b>person</b> object.</p>

<p>Because the person object "owns" the fullName method.</p>

<p id="demo"></p>

<script>

// Create an object:

var person = {

firstName: "John",

lastName : "Doe",

id : 5566,

fullName : function() {

return this.firstName + " " + this.lastName;

};

// Display data from the object:

document.getElementById("demo").innerHTML = person.fullName();

</script>
</body>

</html>

JavaScript Common Mistakes

Accidentally Using the Assignment Operator


<!DOCTYPE html>

<html>

<body>

<p id="demo"></p>

<script>

var x = 0;

document.getElementById("demo").innerHTML = Boolean(x == 10);

</script>

</body>

</html>

Confusing Addition & Concatenation


Addition is about adding numbers.

Concatenation is about adding strings.

In JavaScript both operations use the same + operator.

Because of this, adding a number as a number will produce a different result


from adding a number as a string:

<!DOCTYPE html>

<html>

<body>

<p id="demo"></p>

<script>

var x = 10 + "5";

document.getElementById("demo").innerHTML = x;

</script>

</body>

</html>

Perfect Output
<!DOCTYPE html>

<html>

<body>

<p id="demo"></p>

<script>

var x = 0.1;
var y = 0.2;

var z = (x * 10 + y *10) / 10;

document.getElementById("demo").innerHTML = z;

</script>

</body>

</html>

Misplacing Semicolon
THANK YOU

You might also like