Scribd
Upload
12 views

css Unit 1

The document outlines the basics of JavaScript programming, covering features, syntax, data types, operators, and the differences between Java and JavaScript. It explains JavaScript as a lightweight, interpreted scripting language that supports object-oriented programming and is used for creating dynamic web pages. Additionally, it details how to write JavaScript code, including the use of the <script> tag, and provides examples of various operators and expressions.

Uploaded by

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

css Unit 1

The document outlines the basics of JavaScript programming, covering features, syntax, data types, operators, and the differences between Java and JavaScript. It explains JavaScript as a lightweight, interpreted scripting language that supports object-oriented programming and is used for creating dynamic web pages. Additionally, it details how to write JavaScript code, including the use of the <script> tag, and provides examples of various operators and expressions.

Uploaded by

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

Unit 1 : basics of javacript programming

Syllabus :

1.1 Feature of javascript

1.2 object name, property, method, dot syntax, main event.

1.3 values and variables

1.4 operators and expressions - primary expressions, object and array initializers, function
definition expression, property access expression, invocation expressions.

1.5 if statement, if…….else, if…….elseif, nested if statement.

1.6 switch case statement.

1.7 loop statement – for loop, for….in loop, while loop, do….while loop, continue statement.

1.8 Querying and setting properties and deleting properties, property getters and setters

What is scripting language?

 All scripting languages are programming languages.


 The scripting language is basically a language where instruction are written for runtime
environment.
 They do not require the compilation step rather interpreted by browser.
 A scripting language is a programming language designed for integrating and
communicating with other programming languages

What is javascript ?

 Javascript Is popular, lightweight And open source client side language supported by all
browser
 It is scripting language beacause it can be used along with another languages.
 It is not purely programming language and hence it doesn’t need compilation.
 It is an interpreted programming language with object oriented capabilities.
 Usually software developers use Programming languages like C, C++, Java On the other
hand, web developer use javascript.
1 To make web pages dynamic.
2 To respond to events.
3 To create interactive forms.
4 To validate data inputed by user.
5 To control browser data.

Difference between Java and javascript

 Java and javascript are two completely different languages in both concept and design.
 However the syntax is similar.
 Java powerful and much more complex programming language like C and C++ where ,
JS is not full-featured programming language rather, it is interpreted scripting language.
 Java program needs compilation Whereas javascript program does not need compile.
 Javascript only executed in browser
 Java programs are executed in Java compatible application whereas, JS programs are
executed in all browsers.
 Working of JS program :
1.1features of javacript

1. Lightweight and Interpreted Language

 JavaScript is a lightweight, interpreted language, which means it doesn't need to be


compiled before running. It is executed line by line in the web browser.

2.Object-Oriented Programming Support

 JavaScript supports object-oriented programming (OOP). And OOPs concepts.

3.Event-Driven Programming

 respond to user interactions, such as clicks, keypresses, and other events.

4.Dynamic Typing

 JavaScript is dynamically typed, which means variable types are determined at runtime.
You don't need to specify the data type of a variable when you declare it.

5.Platform Independence

 JavaScript is platform-independent. Any browser with a JavaScript engine can interpret


and run JavaScript code.

7.Built-In Functions and Methods

 JS comes with a variety of built-in functions and methods for performing common tasks,
such as string manipulation, array operations, and mathematical computations.

8.Extensive Libraries and Frameworks

 The JavaScript ecosystem includes a vast number of libraries and frameworks (e.g.,
React, Angular, Vue.js, jQuery) that simplify and enhance web development.

9.Integration with HTML/CSS

 JS seamlessly integrates with HTML and CSS, making it easy to create interactive web
pages. It can manipulate HTML elements and apply CSS styles dynamically.
How to write javascript?

 Javascript is implemented by adding <script>………</script> tag within a html tag.


 In a web page script tag can be inserted within web page by 2 ways.

<head>

<script>

//javascript code

</script>

</head>

OR

<body>

<script>

//javascript code

</script>

</body>

Attributes of <script> tag

1 Language
2 Type

Language : specify scripting language of embeded code. The browser assumes JavaScript as the
default scripting language.
Type: the type attribute tells the browser that the script is in plain text and the text is organized
in the format of javascript. Default value is “text/javascript”.

Note : both attributes are optional and we should not use them.

<script language="javascript" type="text/javascript">

document.write("hi its dev");

</script>

Datatypes in JS :

There are two types of datatypes :

A) Primitive
B) Non-primitive

A) primitive datatypes :

1. String : It is used to store string or sequence of character

Ex: let str = “ dev”;

2. number : it is used to store integer number of floting point value.

Ex : let num1 = 10;

Let num2 = 20.56;

3.boolean : It is used to store either true or false.

Ex: let flag = true ;


4.undefined : it represent the undefined value that is not assigned/initialized.

Ex: let x = undefined;

5. null : it indicate absense of value

Ex: let email = null;

B) non - primitive datatypes :

1.object : it represent the instance to to which we can access the member.

Ex: let student = {

Name : “dev”,

Marks : 92

2. array : it is used to store multiple values in single variable

Ex: let arr = {“dev”, 06, “kinhavali”};


Operators in JS :

1. arithmetic
2. comparison
3. logical
4. bitwise
5. assignment
6. conditional/ternary

1. Arithmetic Operators :

Sr no Operator Meaning
1 + addition
2 - Substraction
3 * Multiplication
4 / division
5 % Modulus/remainder

WAP to implement arithmetic operator.

<body>

<script>

let a = 10;

let b = 5;

document.write("<br> Addition = " + (a + b));

document.write("<br> Substraction = " + (a - b));

document.write("<br> Multiplication = " + (a * b));

document.write("<br> Division = " + (a / b));

document.write("<br> Remainder = " + (a % b));

</script>
</body>

Output :

Addition = 15

Substraction = 5

Multiplication = 50

Division = 2

Remainder = 0

2. Comparison Operators :

SR no Operator Meaning
1 < Less than
2 <= Less than or equal to
3 > Greater than
4 >= Greater than or equal to
5 == Exact equal to
6 != Not equal to

WAP to implement comparison operators

<body>

<script>

let a = 5;

let b = 10;

document.write("<br> a < b = " + (a < b));

document.write("<br> a <= b = " + (a <= b));

document.write("<br> a > b = " + (a > b));


document.write("<br> a >= b = " + (a >= b));

document.write("<br> a == b = " + (a == b));

document.write("<br> a != b = " + (a != b));

</script>

</body>

Output :

a < b = true

a <= b = true

a > b = false

a >= b = false

a == b = false

a != b = true

3. Logical Operators :

Sr no Operator Meaning
1 && Logical and
2 || Logical or
3 ! Logical not

WAP to implement logical operator

<body>

<script>

let a = 5;

let b = 10;
document.write("<br>Logical AND : " + ((a < b) && (b > a)));

document.write("<br>Logical OR : " + ((a < b) || (a > b)));

document.write("<br>Logical NOT : " + !(a < b));

</script>

</body>

Output :

Logical AND : true

Logical OR : true

Logical NOT : false

4. Bitwise Operators :

SR no Opertor Meaning
1 & Bitwise AND
2 | Bitwise OR
3 ^ Bitwise XOR
4 ~ Bitwise NOT
5 << Bitwise Left shift
6 >> Bitwise right shift

WAP to implement bitwise operators.

<body>

<script>

let a = 4;

document.write("<br>Bitwise AND(5&3) : " + (5 & 3));

document.write("<br>Bitwise OR(5|3) : " + (5 | 3));


document.write("<br>Bitwise XOR(5^3) : " + (5 ^ 3));

document.write("<br>Bitwise NOT(~7) : " + (~7));

document.write("<br>Bitwise left shift(4<<1) : " + (4 << 1));

document.write("<br>Bitwise right shift(4>>1) : " + (4 >> 1));

</script>

</body>

Output :

Bitwise AND(5&3) : 1

Bitwise OR(5|3) : 7

Bitwise XOR(5^3) : 6

Bitwise NOT(~7) : -8

Bitwise left shift(4<<1) : 8

Bitwise right shift(4>>1) : 2

5. Assignment Operators :

SR no operator
1 +=
2 -=
3 *=
4 /=

WAP to implement assignment operators.

<body>

<script>
let a = 5;

let b = 5;

a += b; //a = a + b

document.write("<br>" + a);

a -= b; //a = a - b

document.write("<br>" + a);

a *= b; //a = a * b

document.write("<br>" + a);

a /= b; //a = a / b

document.write("<br>" + a);

</script>

</body>

Output :

10
5
25
5

6. Conditional/ternary Operators :

i) ternary operator consist of condition if the condition is true then first(true) part
will execute and if condition is false then second(false) part will execute.

ii) syntax :

<condition> ? <true_part> : <false_part>;


WAP to implement conditional/ternary operator.

<body>

<script>

let a = 5;

let b = 10;

let greatest = (a > b) ? a : b;

document.write("<br>Greatest = " + greatest);

</script>

</body>

Output :

Greatest = 10
1.2 Object name, property, method, dot syntax, main event.

1.2.1 Object Name:

Define : An object in JavaScript is a collection of properties and methods. The object name is
the name you give to that collection.

let car = {

brand: "Toyota",

model: "Corolla"

};

document.write("Object Name: car<br>"); //Object Name : car

Here, car is the object name.

1.2.2 Property:

Define :A property is a value that belongs to an object. It's like a variable that is tied to the
object.

let car = {

brand: "Toyota",

model: "Corolla"

};

document.write("Car Brand: " + car.brand + "<br>"); //Car Brand : Toyota

document.write("Car Model: " + car.model + "<br>"); //Car Model : Corolla

Here, brand and model are properties of the car object.


1.2.3 Method:

Define :A method is a function that belongs to an object. It's a way to perform actions or
calculations based on the object’s properties.

let car = {

brand: "Toyota",

model: "Corolla",

start: function() {

document.write("The car has started.<br>");

};

car.start(); //The car has started.

Here, start is a method of the car object.

1.2.4 Dot syntax :

Define : Dot syntax is how you access an object's properties or methods using a period (.)
between the object name and the property or method.

let car = {

brand: "Toyota",

model: "Corolla",

start: function() {

document.write("The car has started.<br>");

};
// Accessing a property

document.write("Car Brand: " + car.brand + "<br>"); // Car Brand: Toyota

// Calling a method

car.start(); // The car has started.

1.2.5 Main Event :

Define : In JavaScript, an event is an action or occurrence detected by the browser, like a user
clicking a button or loading a webpage.

<body>

<script>

function showEvent() {

document.write("Button clicked!<br>");

function vinu(){

alert("do you want to exit app?");

</script>

<button onclick="showEvent()">Click me</button> //output : Button


clicked! (on brower)

<button onclick="vinu()">exit</button> //output : do you want to exit app?


(pop up msg)

</body>

Note : A button is included with an onclick event that triggers the showEvent() function,
which writes "Button clicked!" to the webpage.
1.3values and variables

1.3.1 value:

Define: A value is any data that you can assign to a variable. It can be a number, string, boolean,
or any other data type in JavaScript.

1.3.2 Variables :

Define : A variable is a container that stores a value. You can create a variable, assign a value to
it, and then use or modify that value later in your code.
How to Declare Variables: In JavaScript, you can declare variables using var, let, or const.

<script>

let a = 10;

document.write(a);

</script>

Note : Here a is variable and 10 is value assign to that variable.


1.4 operators and expressions - primary expressions, object and array
initializers, function definition expression, property access expression,
invocation expressions.

1.4.1 Primary Expressions :

Define : Primary expressions are the simplest, most basic expressions in JavaScript. They don't
involve any operators or complex syntax; they are just simple values.

Ex:

let number = 10; // number is a primary expression


let greeting = "Hello"; // greeting is a primary expression

1.4.2 Object and Array initializer :

These are ways to create new objects or arrays with specific properties or elements.

Object initilizer :

Creates an object with key-value pairs.

Ex:

let car = {
brand: "Toyota",
model: "Corolla"
};

Note : Here, car is an object with brand and model as its properties.
Array initializer :

Creates an array with elements.

Ex :

let arr = [1,2,3,4,5]; // initializing values at creation of array


document.write("<br>"+arr); //output : 1,2,3,4,5
let arr2 = new Array(7);
arr2[0]=11; //initializing values after creation of array
document.write("<br>"+arr2[0]); //output : 11

1.4.3 Function Defination Expression :

Define : A function definition expression is a way to create a function in JavaScript. Functions


are blocks of code that can be executed when called.

Ex1: fuction returning something

<script>

let greet = function (name) {

return "<br>" + "Hello" + name;

let x = greet("Dev");

document.write(x);

</script>

output : Hello Dev


Ex2 : function not returning anything

<script>

let firealert = function () {

document.write("fire caught!");

firealert(); // Call the function directly

</script>

Output : fire caught!

1.4.4 Property Access Expression:

Define : Property access expressions are used to access the properties of an object. This can be
done using dot notation (.) or bracket notation ([]).

Ex :

<script>

let car = {

brand: "Toyota",

model: "Corolla"

};

document.write(car.brand); // using (.) notation


document.write(car["model"]); // using [ ] notation

</script>

Output : Toyota Corolla

1.4.5 Invocation Expressions:

Define : Invocation expressions are used to call (or invoke) functions. When you call a function,
you use an invocation expression.

Ex :

function greet(name) {

return "Hello, " + name;

let message = greet("John"); // Invocation expression

document.write(message); // Outputs: Hello, John

Note : Here, greet("John") is an invocation expression that calls the greet function with
the argument "John".
1.5 if statement, if…….else, if…….elseif, nested if statement.

1.5.1 If statement :

Define : if specified condition is true then code under if statement will be executed.

Ex:

<script>

let age = 20;

if (age >= 18) {

document.write("You are an adult.");

</script>

Output : You are an adult.

1.5.2 If…….else statement

Define : if specified condition is true then code of if block will be execute if specified condition
is false then code of else block will be execute.

Ex :

<script>

let age = 16;

if (age >= 18) {

document.write("You are an adult.<br>");

else {

document.write("You are a minor.<br>");


}

</script>

Output : You are a minor.

1.5.3 If……elseif statement

Define : this statement allows to test multiple conditions.if condition1 is true then only block of
code under condition1 will be executed, if condition2 is true then only block of code under
condition2 will be executed, if none of the condition is true then block of code of else will be
executed.

Syntax :

if (condition1) {

// Code to run if condition1 is true

} else if (condition2) {

// Code to run if condition2 is true

} else {

// Code to run if none of the above conditions are true

Ex:

let marks = 85;

if (marks >= 90) {

document.write("Grade: A+<br>");

} else if (marks >= 80) {

document.write("Grade: A<br>");
} else if (marks >= 70) {

document.write("Grade: B<br>");

} else {

document.write("Grade: C<br>");

Output : Grade: A

1.5.4 Nested if statement

Define : A nested if statement is an if statement inside another if statement. This allows you to
check a condition only if a previous condition is true.

Syntax :

if (condition1) {

// Code to run if condition1 is true

if (condition2) {

// Code to run if condition2 is true

Ex:

let age = 20;

let hasID = true;

if (age >= 18) {


if (hasID) {

document.write("You are allowed to enter.<br>");

} else {

document.write("You need an ID to enter.<br>");

} else {

document.write("You are not old enough to enter.<br>");

Output : You are allowed to enter.

1.6 switch case statement.

Define : The switch statement allows you to compare a variable against multiple values easily.
It is often clearer than using multiple if...else if statements, especially when you have many
cases to handle.

Ex:

let day = 3;

let dayName;

switch (day) {

case 1:

dayName = "Monday";

break;

case 2:
dayName = "Tuesday";

break;

case 3:

dayName = "Wednesday";

break;

case 4:

dayName = "Thursday";

break;

case 5:

dayName = "Friday";

break;

case 6:

dayName = "Saturday";

break;

case 7:

dayName = "Sunday";

break;

default:

dayName = "Invalid day"; // Runs if 'day' is not between 1 and 7

document.write("The day is: " + dayName);

Output : The day is: Wednesday


1.6 loop statement – for loop, for….in loop, while loop, do….while loop,
continue statement.

1.6.1 For loop

Define : A for loop is used to run a block of code a specific number of times. It is often used
when you know in advance how many times you want to iterate.

Syntax :

for (initialization; condition; increment) {

// Code to run in each iteration

Ex:

for (let i = 0; i < 5; i++) {

document.write( i + " ");

Output: 0 1 2 3 4

1.6.2 1.6.2 While loop

Define : A while loop continues to execute a block of code as long as a specified condition is
true. It is useful when you don’t know in advance how many times you want to loop

Syntax :

while (condition) {
// Code to run while the condition is true

Ex:

<script>

let i = 0;

while (i < 5) {

document.write(i + " ");

i++; // Don't forget to increment the counter!

</script>

Output : 0 1 2 3 4

1.6.3 do….while loop

Define : A do...while loop is similar to a while loop, but it guarantees that the code block runs at
least once before checking the condition.

Syntax :

do {

// Code to run at least once

} while (condition);

Ex:

let num = 10;


do {

document.write(num + " ");

num++;

} while (num < 5);

Output : 10

Note : here condition is false still code under do block has run for once.

1.6.4 continue statement.

Define : The continue statement is used inside loops to skip the current iteration and move
on to the next one. It is useful when you want to skip certain values without breaking out of the
loop.

Ex:

for (let i = 0; i < 5; i++) {

if (i === 2) {

continue; // Skip the rest of the loop for i = 2

document.write(i + " ");

Output : 0 1 3 4

1.6.5 for….in loop

Define : The for...in loop is a powerful way to iterate over the properties of an object,
allowing you to access both keys and values easily.
Ex:

let car = {

brand: "Toyota",

model: "Corolla",

year: 2020,

color: "red"

};

// Using for...in to iterate over the car object

for (let property in car) {

document.write(property + ": " + car[property] + "<br>");

Output :

brand: Toyota
model: Corolla
year: 2020
color: red

Execution explanation :

Object Creation:

The car object is created with four properties: brand, model, year, and color.

Initialization of the Loop:

The for...in loop starts, and the property variable will hold the name of each property in the car
object during each iteration.
First Iteration:

The first property in the car object is brand.

property is assigned the value "brand".

document.write(property + ": " + car[property] + "<br>") executes:

This translates to document.write("brand: " + car["brand"] + "<br>").

It writes brand: Toyota to the document, followed by a line break.

Second Iteration:

The next property is model.

property is now "model".

document.write(property + ": " + car[property] + "<br>") executes:

This becomes document.write("model: " + car["model"] + "<br>").

It writes model: Corolla to the document, followed by a line break.


1.7Querying and setting properties and deleting properties, property getters
and setters

1.7.1 Querying properties :

Querying properties in JavaScript involves accessing the value of a property in an object. There
are two main ways to do this:

1.7.1.1dot notatation :

Syntax: object.property

Ex:

let person = {

name: "John",

age: 30

};

document.write(person.name);

Output: John

1.7.1.2 Bracket Notation :

Syntax: object["property"]

Ex :

let person = {

name: "John",

age: 30
};

document.write(person["age"]);

Output: 30

1.7.2 Setting Properties

Setting properties means adding a new property or modifying the value of an existing property
in an object.

Syntax: object.property = value

let car = {

brand: "Toyota"

};

car.model = "Corolla"; // Setting a new property

document.write(car.model);

Output: Corolla

1.7.3 Deleting Property :

Deleting properties involves removing a property from an object.

Syntax: delete object.property

Ex :

let car = {

brand: "Toyota",

model: "Corolla"

};
delete car.model; // Deletes the 'model' property

document.write(car.model);

Output: undefined
1.7.4 Getter Property :

A getter allows you to define a method that is called when you access a property.this function
has no any argument.

Syntax :

get propertyName() {

// code to return the value

Ex:

let person = {

firstName: "John",

lastName: "Doe",

age: 30,

get fullName() {

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

};

document.write(person.fullName);

Output: John Doe


1.7.4 Setter Property :

A setter allows you to define a method that is called when you assign a value to a property.this
function have argument.

Syntax :

set propertyName(value) {

// code to set the value

Ex:

let car = {

brand: "Toyota",

color: "red",

set company(value) {

this.brand = value;

};

document.write("<br>" + car.brand + " " + car.color);

car.company = "Audi"; //assign value don’t pass into paranthesis

document.write("<br>" + car.brand + " " + car.color);

Output :

Toyota red
Audi red

You might also like