Scribd
Upload
2 views

Java script syllabus

JavaScript, developed by Brendan Eich in 1995, is a dynamically typed programming language primarily used for web development to manipulate HTML and CSS. It allows for various functionalities such as updating content, handling events, and performing calculations. The document covers JavaScript syntax, data types, operators, functions, and methods for string manipulation, along with examples of how to implement these concepts in HTML.

Uploaded by

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

Java script syllabus

JavaScript, developed by Brendan Eich in 1995, is a dynamically typed programming language primarily used for web development to manipulate HTML and CSS. It allows for various functionalities such as updating content, handling events, and performing calculations. The document covers JavaScript syntax, data types, operators, functions, and methods for string manipulation, along with examples of how to implement these concepts in HTML.

Uploaded by

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

JavaScript

What is JavaScript?
Netscape Communications Corporation developed JavaScript in 1995.
Brendan Eich, a software engineer at Netscape, created the language
JavaScript is dynamically typed, which means that the type of a variable is
determined at runtime, not at compile time.
●​ JavaScript is the programming language of the web.

●​ It can update and change both HTML and CSS.

●​ It can calculate, manipulate and validate data.

#Program to Display date & time

<html>

<body>

<h2>My First JavaScript</h2>

<button type="button"

onclick="document.getElementById('demo').innerHTML = Date()">

Click me to display Date and Time.</button>


2

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

</body>

</html>

JavaScript Can Change HTML Content


●​ One of many JavaScript HTML methods is getElementById().

# The example below "finds" an HTML element (with id="demo"), and changes
the element content (innerHTML) to "Hello JavaScript":

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

●​ Changing the style of an HTML element, is a variant of changing an HTML


attribute:

<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='35px'">Click Me!</button>
3

</body>

</html>

The <script> Tag


In HTML, JavaScript code is inserted between <script> and </script> tags.

# script tag in HTML

<html>

<body>

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

<script>

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

</script>

</body>

</html>

JavaScript Functions and Events


A JavaScript function is a block of JavaScript code, that can be executed when
"called" for.

For example, a function can be called when an event occurs, like when the user
clicks a button.

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.

#script tag in head tag

<html>
4

<head>

<script>

function myFunction() {

document.getElementById("demo").innerHTML = "Paragraph changed.";

</script>

</head>

<body>

<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Click it</button>

</body>

</html>

#script tag in body tag

<html>

<body>

<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Click it</button>

<script>

function myFunction() {

document.getElementById("demo").innerHTML = "Paragraph changed.";

</script>

</body>

</html>
5

JavaScript Output
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().

●​ Writing into the browser console, using console.log().

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

<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

<html>

<body>
6

<h2>My First Web Page</h2>

<p>My first paragraph.</p>

<p>Never call document.write after the document has finished loading.

It will overwrite the whole document.</p>

<script>

document.write(5 + 6);

</script>

</body>

</html>

#window.alert()

<html>

<body>

<h2>My First Web Page</h2>

<p>My first paragraph.</p>

<script>

window.alert(5 + 6);

</script>

</body>

</html>

Or

<html>

<body>

<h2>My First Web Page</h2>

<p>My first paragraph.</p>

<script>

alert(5 + 6);
7

</script>

</body>

</html>

JavaScript Syntax
// How to create variables:
var x;
let y;

// How to use variables:


x = 5;
y = 6;
let z = x + y;

JavaScript Values
The JavaScript syntax defines two types of values:

●​ Fixed values

●​ Variable values

Fixed values are called Literals.

Variable values are called Variables.

JavaScript Literals
The two most important syntax rules for fixed values are:

1. Numbers are written with or without decimals:

2. Strings are text, written within double or single quotes:

JavaScript Variables
8

In a programming language, variables are used to store data values.

JavaScript uses the keywords var, let and const 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:

<html>

<body>

<h2>JavaScript Variables</h2>

<p>In this example, x is defined as a variable.

Then, x is assigned the value of 6:</p>

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

<script>

let x;

x = 6;

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

</script>

</body>

</html>

JavaScript Keywords
JavaScript keywords are used to identify actions to be performed.

The let keyword tells the browser to create variables:

The var keyword also tells the browser to create variables:

JavaScript Identifiers / Names


Identifiers are JavaScript names.
9

Identifiers are used to name variables and keywords, and functions.

The rules for legal names are the same in most programming languages.

A JavaScript name must begin with:

●​ A letter (A-Z or a-z)

●​ A dollar sign ($)

●​ Or an underscore (_)

Subsequent characters may be letters, digits, underscores, or dollar signs.

JavaScript is Case Sensitive


All JavaScript identifiers are case sensitive.

The variables lastName and lastname, are two different variables:

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

Multi-line Comments
Multi-line comments start with /* and end with */.

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

JavaScript Variables
10

Variables are Containers for Storing Data


JavaScript Variables can be declared in 4 ways:

●​ Automatically

●​ Using var

●​ Using let

●​ Using const

It is considered good programming practice to always declare variables before


use.

When to Use var, let, or const?


1. Always declare variables

2. Always use const if the value should not be changed

3. Always use const if the type should not be changed (Arrays and Objects)

4. Only use let if you can't use const

5. Only use var if you MUST support old browsers.

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 a number in quotes, it will be treated as a text string.

You can declare many variables in one statement.

Start the statement with let and separate the variables by comma:

let person = "John Doe", carName = "Volvo", price = 200;

Or

let person = "John Doe",


11

carName = "Volvo",

price = 200;

JavaScript Operators
Javascript operators are used to perform different types of mathematical and
logical computations.

Examples:
The Assignment Operator = assigns values
The Addition Operator + adds values
The Multiplication Operator * multiplies values
The Comparison Operator > compares values

Types of JavaScript Operators


There are different types of JavaScript operators:

●​ Arithmetic Operators

●​ Assignment Operators

●​ Comparison Operators

●​ String Operators

●​ Logical Operators

●​ Bitwise Operators

●​ Ternary Operators

●​ Type Operators

Arithmetic Operators
Operator Description

+ Addition
12

- Subtraction

* Multiplication

** Exponentiation

/ Division

% Modulus (Division Remainder)

++ Increment

– Decrement

Assignment Operators
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
13

JavaScript Comparison Operators

Operat Description
or

== equal to

=== equal value and equal type

!= not equal

!== not equal value or not equal type

> greater than

< less than

>= greater than or equal to

<= less than or equal to

? ternary operator

JavaScript Logical Operators

Operat Description
or

&& logical and

|| logical or

! logical not
14

JavaScript has 8 Datatypes


String​
Number​
Bigint​
Boolean​
Undefined​
Null​
Symbol​
Object

The Object Datatype


The object data type can contain both built-in objects, and user defined objects:

Built-in object types can be:

objects, arrays, dates, maps, sets, intarrays, floatarrays, promises, and more.

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

Function parameters are listed inside the parentheses () in the function


definition.

Function arguments are the values received by the function when it is invoked.

Inside the function, the arguments (the parameters) behave as local variables.
15

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)

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

Why Functions?
With functions you can reuse code

You can write code that can be used many times.

You can use the same code with different arguments, to produce different
results.

#program to convert Temperature in Fahrenheit to Celcius

<html>

<body>

<h1>JavaScript Functions</h1>

<p>Temperature in Fahrenheit to Celcius:</p>

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

<script>
16

function toCelsius(f) {

return (5/9) * (f-32);

let value = toCelsius;

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

</script>

</body>

</html>

Local Variables
Variables declared within a JavaScript function, become LOCAL to the function.

Local variables can only be accessed from within the function.

Since local variables are only recognized inside their functions, variables with
the same name can be used in different functions.

Local variables are created when a function starts, and deleted when the
function is completed.

eval() function:
The eval() method evaluates or executes an argument.

If the argument is an expression, eval() evaluates the expression. If the


argument is one or more JavaScript statements, eval() executes the
statements.

Do NOT use eval()

Executing JavaScript from a string is an BIG security risk.

With eval(), malicious code can run inside your application without permission.
17

With eval(), third-party code can see the scope of your application, which can
lead to possible attacks.

Syntax

eval(string)

JavaScript Strings
Strings are for storing text

Strings are written with quotes

Using Quotes
A JavaScript string is zero or more characters written inside quotes.

You can use single or double quotes:

Example:-

let carName1 = "Volvo XC60"; // Double quotes

let carName2 = 'Volvo XC60'; // Single quotes

JavaScript String Methods/String HAndling


Functions
JavaScript String Length
The length property returns the length of a string:

Example

let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

let length = text.length;

Extracting String Characters


18

There are 4 methods for extracting string characters:

The at(position) Method

The charAt(position) Method

The charCodeAt(position) Method

Using property access [] like in arrays

JavaScript String charAt()

The charAt() method returns the character at a specified index (position) in a string:

Example

let text = "HELLO WORLD";

let char = text.charAt(0);

Extracting String Parts

There are 3 methods for extracting a part of a string:

slice(start, end)

substring(start, end)

substr(start, length)

JavaScript String slice()

slice() extracts a part of a string and returns the extracted part in a new string.

The method takes 2 parameters: start position, and end position (end not included).

Example

Slice out a portion of a string from position 7 to position 13:


19

let text = "Apple, Banana, Kiwi";

let part = text.slice(7, 13);

JavaScript String substring()


substring() is similar to slice().

The difference is that start and end values less than 0 are treated as 0 in substring().

Example

let str = "Apple, Banana, Kiwi";

let part = str.substring(7, 13);

If you omit the second parameter, substring() will slice out the rest of the string.

Converting to Upper and Lower Case


A string is converted to upper case with toUpperCase():

A string is converted to lower case with toLowerCase():

JavaScript String toUpperCase()


Example

let text1 = "Hello World!";

let text2 = text1.toUpperCase();

JavaScript String toLowerCase()


Example

let text1 = "Hello World!"; // String

let text2 = text1.toLowerCase(); // text2 is text1 converted to lower

JavaScript String concat()


20

concat() joins two or more strings:

Example

let text1 = "Hello";

let text2 = "World";

let text3 = text1.concat(" ", text2);

The concat() method can be used instead of the plus operator. These two lines do the
same:

Example

text = "Hello" + " " + "World!";

text = "Hello".concat(" ", "World!");

JavaScript String repeat()


The repeat() method returns a string with a number of copies of a string.

The repeat() method returns a new string.

The repeat() method does not change the original string.

Examples

Create copies of a text:

let text = "Hello world!";

let result = text.repeat(2);

JavaScript String reverse()


21

JavaScript Popup Boxes


Alert Box

An alert box is often used if you want to make sure information comes through to the
user.

When an alert box pops up, the user will have to click "OK" to proceed.

Syntax

window.alert("sometext");

The window.alert() method can be written without the window prefix.

<html>

<body>

<h2>JavaScript Alert</h2>

<button onclick="myFunction()">Try it</button>

<script>

function myFunction() {

alert("I am an alert box!");

</script>

</body>

</html>
22

Confirm Box
A confirm box is often used if you want the user to verify or accept something.

When a confirm box pops up, the user will have to click either "OK" or "Cancel" to
proceed.

If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns
false.

Syntax

window.confirm("sometext");

The window.confirm() method can be written without the window prefix.

Example

if (confirm("Press a button!")) {

txt = "You pressed OK!";

} else {

txt = "You pressed Cancel!";

Prompt Box
A prompt box is often used if you want the user to input a value before entering a page.

When a prompt box pops up, the user will have to click either "OK" or "Cancel" to
proceed after entering an input value.

If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box
returns null.
23

Syntax

window.prompt("sometext","defaultText");

The window.prompt() method can be written without the window prefix.

Example

let person = prompt("Please enter your name", "Harry Potter");

let text;

if (person == null || person == "") {

text = "User cancelled the prompt.";

} else {

text = "Hello " + person + "! How are you today?";

JavaScript Objects
Real Life Objects
In real life, objects are things like: houses, cars, people, animals, or any other
subjects.

Here is a car object example:

Object Properties
A real life car has properties like weight and color:

car.name = Fiat, car.model = 500, car.weight = 850kg, car.color = white.

Car objects have the same properties, but the values differ from car to car.

Object Methods
A real life car has methods like start and stop:
24

car.start(), car.drive(), car.brake(), car.stop().

Car objects have the same methods, but the methods are performed at different
times.

JavaScript Variables
JavaScript variables are containers for data values.

This code assigns a simple value (Fiat) to a variable named car:

example

let car = "Fiat";

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

This code assigns many values (Fiat, 500, white) to an object named car:

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


25

You might also like