0% found this document useful (0 votes)

14 views

Skill JS and CSS 2nd Sem (1)

Uploaded by

ummarjavid07

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

14 views

Skill JS and CSS 2nd Sem (1)

Uploaded by

ummarjavid07

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 35

# UNIT 1 – JAVASCRIPT (15 LECTURES)

## 1. Introduction

JavaScript (JS) is a high-level, interpreted programming language primarily used for

enhancing web pages to create interactive and dynamic content. Unlike HTML and CSS,
which are used to structure and style a webpage, JavaScript allows for the manipulation of
the page’s behavior and content in real-time.

### Key Concepts:

- **Interpreted Language**: JavaScript code is executed directly by the browser without the
need for prior compilation.

- **Dynamic Typing**: Variables can hold different types of values at different times.

- **Prototype-Based**: Objects can inherit properties and methods from other objects.

- Event-Driven: JavaScript handles user interactions and other events.

## 2. Script Tag

The `<script>` tag is used to embed or include JavaScript in an HTML document. It can be
placed in the `<head>` or `<body>` section. For better page load performance, it is often
placed just before the closing `</body>` tag.

### Inline Script Example:

```html

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Example</title>

</head>

<body>

<h1>My Web Page</h1>

Document.write(“Hello, World!”);
</script>

</body>

</html>

`### External Script Example:

```html

<!DOCTYPE html>

<html>

<head>

<title>External JavaScript Example</title>

</head>

<body>

<h1>My Web Page</h1>

</body>

</html>

```

*script.js*

```javascript

Document.write(“Hello, World!”);

```

## 3. Data Types

JavaScript data types can be categorized into primitive types and object types.

### Primitive Types:

1. Number: Represents both integers and floating-point numbers.

```javascript
Let age = 30;

Let price = 19.99;

```

2. String: Represents a sequence of characters enclosed in single, double, or

backticks (template literals).

```javascript

Let name = “John Doe”;

Let greeting = `Hello, ${name}`;

```

3. Boolean: Represents true or false values.

```javascript

Let isActive = true;

Let isLoggedIn = false;

```

4. Null: Represents the intentional absence of any object value.

```javascript

Let emptyValue = null;

```

5. **Undefined**: Indicates a variable that has been declared but not assigned a
value.

```javascript

Let unassigned;

Console.log(unassigned); // undefined

```
6. **Symbol**: A unique and immutable primitive value, often used as the key of an
object property.

```javascript

Let uniqueId = Symbol(‘id’);

### Object Types:

- Object: Collections of properties and methods.

```javascript

Let person = {

firstName: “John”,

lastName: “Doe”,

age: 30

};

```

- Array: An ordered collection of values.

```javascript

Let colors = [“Red”, “Green”, “Blue”];

```

- Function: Blocks of code designed to perform specific tasks.

```javascript

Function greet() {

Return “Hello!”;

```

## 4. Variables

Variables store data that can be used and manipulated in a program. They can be declared
using `var`, `let`, or `const`.
### var

- Function-scoped

- Can be re-declared and updated

```javascript

Var x = 5;

Var x = 10; // Re-declaration allowed

X = 15; // Update allowed

```

### let

- Block-scoped

- Cannot be re-declared in the same scope

- Can be updated

```javascript

Let y = 5;

Y = 10; // Update allowed

// let y = 15; // Error: Cannot re-declare in the same scope

```

### const

- Block-scoped

- Cannot be re-declared or updated

```javascript

Const z = 5;

// z = 10; // Error: Cannot update

// const z = 15; // Error: Cannot re-declare

```

## 5. Literals
Literals are fixed values that appear directly in the code.

### Examples:

- Number Literal: `42`

- String Literal: `”Hello”`

- Boolean Literal: `true`, `false`

- Array Literal: `[1, 2, 3]`

- Object Literal: `{name: “John”, age: 30}`

## 6. Expressions

Expressions combine values, variables, and operators to produce a result.

### Examples:

- Arithmetic Expression: `5 + 10`

- String Concatenation: `”Hello, “ + “World!”`

- Comparison: `x > y`

## 7. Operators

Operators perform operations on variables and values.

### Arithmetic Operators:

```javascript

Let a = 5;

Let b = 10;

Console.log(a + b); // 15

Console.log(a – b); // -5
Console.log(a * b); // 50

Console.log(a / b); // 0.5

Console.log(a % b); // 5

```

### Comparison Operators:

```javascript

Console.log(a == b); // false

Console.log(a != b); // true

Console.log(a === b); // false

Console.log(a !== b); // true

Console.log(a > b); // false

Console.log(a < b); // true

Console.log(a >= b); // false

Console.log(a <= b); // true

```

### Logical Operators:

```javascript

Let c = true;

Let d = false;

Console.log(c && d); // false

Console.log(c || d); // true

Console.log(!c); // false

```
### Assignment Operators:

```javascript

Let e = 10;

E += 5; // e = e + 5

Console.log€; // 15

```

## 8. Conditional Statements

### if

Executes a block of code if a specified condition is true.

```javascript

If (a > b) {

Console.log(“a is greater than b”);

```

### if-else

Executes a block of code if a condition is true, and another block if the condition is false.

```javascript

If (a > b) {

Console.log(“a is greater than b”);

} else {

Console.log(“a is not greater than b”);

```

### if-else-if-else
Executes different blocks of code based on multiple conditions.

```javascript

If (a > b) {

Console.log(“a is greater than b”);

} else if (a < b) {

Console.log(“a is less than b”);

} else {

Console.log(“a is equal to b”);

```

### switch-case

Provides an alternative to using multiple `if else` statements, useful for evaluating a single
expression against multiple possible cases.

```javascript

Let grade = ‘B’;

Switch (grade) {

Case ‘A’:

Console.log(“Excellent”);

Break;

Case ‘B’:

Console.log(“Good”);

Break;

Case ‘C’:

Console.log(“Fair”);

Break;
Default:

Console.log(“Invalid grade”);

```

## 9. Looping Statements

### while

Loops through a block of code as long as the specified condition is true.

```javascript

Let I = 0;

While (I < 5) {

Console.log(i);

I++;

```

### for

Loops through a block of code a specified number of times, based on the initialization,
condition, and increment expressions.

```javascript

For (let I = 0; I < 5; i++) {

Console.log(i);

### do-while

Executes a block of code once before checking if the condition is true, then repeats the loop
as long as the condition is true.

```javascript

Let I = 0;
Do {

Console.log(i);

I++;

} while (I < 5);

```

## 10. Array

An array is an ordered collection of elements, which can be of any data type.

### Creating an Array:

```javascript

Let fruits = [“Apple”, “Banana”, “Mango”];

```

### Accessing Array Elements:

```javascript

Console.log(fruits[0]); // Apple

Console.log(fruits.length); // 3

```

### Array Methods:

- `push()`: Adds a new element to the end of the array.

```javascript

Fruits.push(“Orange”);

```

- `pop()`: Removes the last element from the array.

```javascript

Let lastFruit = fruits.pop();

```

- `shift()`: Removes the first element from the array.

```javascript

Let firstFruit = fruits.shift();

```

- `unshift()`: Adds a new element to the beginning of the array.

```javascript

Fruits.unshift(“Strawberry”);

```

## 11. Associative Arrays

JavaScript objects are used as associative arrays, where keys are strings (properties) and
values can be any type.

### Example:

```javascript

Let person = {

firstName: “John”,

lastName: “Doe”,

age: 30

};

Console.log(person.firstName); // John

## 12. Functions

### Introduction

Functions are reusable blocks of code designed to perform a specific task. They help in
organizing code, improving readability, and avoiding repetition.
### Function Declaration

A function declaration defines a function with the specified parameters.

```javascript

Function functionName(parameters) {

// code to be executed

```

Example:

```javascript

Function greet(name) {

Return “Hello, “ + name;

Console.log(greet(“Alice”)); // Hello, Alice

```

### Function Expression

A function expression defines a function inside an expression.

```javascript

Const greet = function(name) {

Return “Hello, “ + name;

};

Console.log(greet(“Alice”)); // Hello, Alice

```

### Arrow Functions

Arrow functions provide a shorter syntax for writing function expressions. They do not have
their own `this`, `arguments`, or `super`, and should not be used as methods.

```javascript

Const greet = (name) => {

Return “Hello, “ + name;

};

Console.log(greet(“Alice”)); // Hello, Alice

```

### IIFE (Immediately Invoked Function Expression)

An IIFE is a function that runs as soon as it is defined.

```javascript

(function() {

Console.log(“This function runs immediately!”);

})();

```

### Parameters and Arguments

Functions can accept parameters, which are variables listed as part of the function definition,
and arguments, which are the actual values passed to the function.

```javascript

Function add(a, b) {

Return a + b;

Console.log(add(5, 10)); // 15

```
### Default Parameters

Default parameters allow parameters to have a default value if no argument is provided.

```javascript

Function greet(name = “Guest”) {

Return “Hello, “ + name;

Console.log(greet()); // Hello, Guest

```

### Rest Parameters

The rest parameter syntax allows a function to accept an indefinite number of arguments as
an array.

```javascript

Function sum(…numbers) {

Return numbers.reduce((acc, num) => acc + num, 0);

Console.log(sum(1, 2, 3, 4)); // 10

```

### Callback Functions

A callback function is a function passed into another function as an argument, which is then
invoked inside the outer function.

```javascript

Function processUserInput(callback) {

Let name = prompt(“Please enter your name.”);

Callback(name);

}
processUserInput(function(name) {

console.log(“Hello, “ + name);

});

```

## 13. Event Handling

### Introduction

Event handling is the mechanism that allows JavaScript to respond to user actions such as
clicks, key presses, and mouse movements.

### Common Events

- Mouse Events: `click`, `dblclick`, `mousedown`, `mouseup`, `mouseover`, `mouseout`,

`mousemove`

- Keyboard Events: `keydown`, `keyup`, `keypress`

- Form Events: `submit`, `change`, `focus`, `blur`

- Window Events: `load`, `resize`, `scroll`, `unload`

### Adding Event Listeners

Event listeners can be added to HTML elements to handle events.

#### Inline Event Handlers

```html

<button onclick=”alert(‘Button clicked!’)”>Click Me</button>

```

#### DOM Level 2 Event Listeners

Using `addEventListener()` method:

```javascript

Document.getElementById(“myBtn”).addEventListener(“click”, function() {

Alert(“Button clicked!”);

});

```

#### Removing Event Listeners

Using `removeEventListener()` method:

```javascript

Function alertMessage() {

Alert(“Button clicked!”);

Document.getElementById(“myBtn”).addEventListener(“click”, alertMessage);

Document.getElementById(“myBtn”).removeEventListener(“click”, alertMessage);

```

### Event Object

The event object is automatically passed to event handlers and contains useful information
about the event.

```javascript

Document.getElementById(“myBtn”).addEventListener(“click”, function(event) {

Console.log(event.type); // click

Console.log(event.target); // the element that triggered the event

});

```
### Event Propagation

Event propagation describes the order in which events are received on the page. There are
two phases:

- **Event Bubbling**: The event starts from the target element and bubbles up to the root.

- **Event Capturing**: The event starts from the root and captures down to the target
element.

By default, events bubble, but you can specify capturing using `addEventListener()`.

```javascript

Document.getElementById(“parent”).addEventListener(“click”, function() {

Console.log(“Parent clicked”);

}, true); // Capturing phase

Document.getElementById(“child”).addEventListener(“click”, function() {

Console.log(“Child clicked”);

}, false); // Bubbling phase

```

### Prevent Default and Stop Propagation

`preventDefault()` prevents the default action of the event.

```javascript

Document.getElementById(“myLink”).addEventListener(“click”, function(event) {

Event.preventDefault();

Alert(“Default action prevented!”);

});

```

`stopPropagation()` stops the event from bubbling up or capturing down.

```javascript

Document.getElementById(“child”).addEventListener(“click”, function(event) {

Event.stopPropagation();

Alert(“Propagation stopped!”);

});

```

## 14. JavaScript Objects (Browser, Document, Window etc.)

### Browser Object Model (BOM)

The BOM provides objects to interact with the browser.

#### window Object

Represents the browser window.

- Properties: `innerWidth`, `innerHeight`, `location`, `history`, `navigator`

- Methods: `alert()`, `confirm()`, `prompt()`, `open()`, `close()`, `setTimeout()`,

`setInterval()`

Example:

```javascript

Window.alert(“This is an alert!”);

Let userConfirmed = window.confirm(“Do you agree?”);

Let userName = window.prompt(“Enter your name:”);

Window.open(https://www.example.com);

```

#### navigator Object

Provides information about the browser.

- Properties: àppName`, àppVersion`, `platform`, ùserAgent`, `language`,

`online`

Example:

```javascript
Console.log(navigator.userAgent); // Browser user agent string

Console.log(navigator.language); // Preferred language

Console.log(navigator.online); // Online status

#### location Object

Contains information about the current URL.

- Properties: `href`, `protocol`, `host`, `hostname`, `pathname`, `search`, `hash`

- Methods: `assign()`, `reload()`, `replace()`

Example:

```javascript

Console.log(location.href); // Current URL

Location.href = https://www.new-url.com; // Redirect to new URL

Location.reload(); // Reload the current page

```

#### history Object

Provides access to the browser’s session history.

- **Properties**: `length`

- Methods: `back()`, `forward()`, `go()`

Example:

```javascript

History.back(); // Go back one page

History.forward(); // Go forward one page

History.go(-2); // Go back two pages

```

### Document Object Model (DOM)

The DOM represents the HTML document and provides methods to interact with its
structure and content.
#### document Object

Represents the entire HTML document.

- Properties: `title`, `body`, `head`, `documentElement`

- Methods: `getElementById()`, `getElementsByClassName()`,

`getElementsByTagName()`, `querySelector()`, `querySelectorAll()`, `createElement()`,
`createTextNode()`, `appendChild()`, `removeChild()`

Example:

```javascript

Document.title = “New Title”;

Let element = document.getElementById(“myElement”);

Element.innerHTML = “New Content”;

Let newElement = document.createElement(“div”);

newElement.textContent = “Hello, World!”;

document.body.appendChild(newElement);

### window Object

The `window` object is the global object for JavaScript in the browser. All global variables
and functions are properties and methods of the `window` object.

#### Global Scope

Variables declared with `var` are added to the `window` object.

```javascript

Var globalVar = “I’m global”;

Console.log(window.globalVar); // “I’m global”

```

#### Timers

The `window` object provides methods to execute code after a delay or at regular intervals.

- `setTimeout()`: Executes code after a specified delay.

- `setInterval()`: Repeatedly executes code at specified intervals.

- `clearTimeout()`: Cancels a timeout.

- `clearInterval()`: Cancels an interval.

Example:

```javascript

Let timeoutId = setTimeout(() => {

Console.log(“Executed after 2 seconds”);

}, 2000);

Let intervalId = setInterval(() => {

Console.log(“Executed every 1 second”);

}, 1000);

// Clear the timeout and interval

clearTimeout(timeoutId);

clearInterval(intervalId);
# UNIT 2 – CSS (15 LECTURES)

## 1. DHTML Introduction

### What is DHTML?

- DHTML stands for Dynamic HTML.

- It is not a language but a combination of HTML, CSS, and JavaScript to create interactive
and animated websites.

- DHTML allows the content on the webpage to change dynamically without needing to
reload the page.

### Key Concepts:

- HTML: Structure of the web page.

- CSS: Presentation and style.

- JavaScript: Behavior and interactivity.

## 2. Style Sheets

### Embedded Styles

Styles defined within the `<style>` tag in the `<head>` section of an HTML document.

```html

<!DOCTYPE html>

<html>

<head>

<style>

H1 {

Color: blue;

Font-size: 14px;
}

</style>

</head>

<body>

<h1>Title</h1>

</body>

</html>

```

### Inline Styles

Styles applied directly to HTML elements using the `style` attribute.

```html

<p style=”color: red; font-size: 16px;”>This is a paragraph.</p>

```

### External Style Sheets

Styles defined in an external CSS file and linked to an HTML document using the `<link>`
tag.

```html

<!—HTML file →

<!DOCTYPE html>

<html>

<head>

<link rel=”stylesheet” type=”text/css” href=”styles.css”>

</head>
<body>

<h1>Title</h1>

</body>

</html>

```

```css

/* styles.css */

H1 {

Color: blue;

Font-size: 14px;

```

## 3. Using Classes

Classes allow you to apply styles to multiple elements by defining a class in the CSS and then
assigning it to elements using the `class` attribute.

```html

<!—HTML file →

<p class=”highlight”>This is highlighted text.</p>

<p class=”highlight”>This is also highlighted text.</p>

```

```css

/* styles.css */
.highlight {

Background-color: yellow;

Font-weight: bold;

```

## 4. Style Sheet Properties

### Fonts Properties

- font-family: Specifies the font for text.

```css

Font-family: Arial, sans-serif;

```

- font-size: Specifies the size of the font.

```css

Font-size: 16px;

```

- font-weight: Specifies the weight (boldness) of the font.

```css

Font-weight: bold;

}
```

- font-style: Specifies the style of the font (normal, italic, oblique).

```css

Font-style: italic;

```

### Background and Colour Properties

- background-color: Sets the background color of an element.

```css

Body {

Background-color: #f0f0f0;

```

- color: Sets the color of the text.

```css

Color: #333333;

```

- background-image: Sets an image as the background.

```css

Body {

Background-image: url(‘background.jpg’);

}
```

- background-repeat: Controls the repeating of the background image.

```css

Body {

Background-repeat: no-repeat;

```

### Text Properties

- **text-align**: Aligns the text inside an element (left, right, center, justify).

```css

Text-align: center;

```

- text-decoration: Adds decoration to text (underline, overline, line-through, none).

```css

Text-decoration: none;

```

- line-height: Sets the height between lines of text.

```css

Line-height: 1.5;

```
- **letter-spacing**: Sets the spacing between characters.

```css

Letter-spacing: 2px;

```

### Box Properties

- margin: Sets the space outside the element’s border.

```css

Margin: 10px;

```

- padding: Sets the space inside the element’s border.

```css

Padding: 10px;

```

border: Sets the border around an element.

```css

Border: 1px solid black;

```
- **width** and **height**: Sets the width and height of an element.

```css

Div {

Width: 100px;

Height: 100px;

```

## 5. Classification Properties

### Display Property

Determines how an element is displayed.

- display: block: Element is displayed as a block.

- display: inline: Element is displayed as an inline element.

- display: none: Element is not displayed.

```css

Display: none;

```

### Whitespace Property

Controls how white space inside an element is handled.

- white-space: normal: Sequences of white space are collapsed.

- **white-space: nowrap**: Text will not wrap and will continue on the same line.

- white-space: pre: Whitespace is preserved.

```css

White-space: nowrap;
}

```

## 6. CSS Units

CSS supports various units for specifying lengths:

- **px**: Pixels

- em: Relative to the font-size of the element

- rem: Relative to the font-size of the root element

- **%**: Percentage

- vh: Relative to 1% of the viewport height

- vw: Relative to 1% of the viewport width

```css

Font-size: 16px;

Margin: 1em;

Width: 50%;

Height: 50vh;

```

## 7. URLs

URLs can be used in CSS for background images, @import statements, etc.

```css

Body {

Background-image: url(‘background.jpg’);

@import url(‘styles.css’);
```

## 8. DIV and SPAN Tags

### DIV

- Block-level element used to group other elements.

```html

<div>

<h1>Title</h1>

<p>Paragraph inside div.</p>

</div>

```### SPAN

- Inline element used to group text or other inline elements.

```html

<p>This is <span style=”color: red;”>highlighted</span> text.</p>

## 9. Dynamic Positioning

### Position Property

Controls the positioning of elements on the page.

- **static**: Default value. Elements are positioned according to the normal flow of the
document.

- relative: Positioned relative to its normal position.

- absolute: Positioned relative to the nearest positioned ancestor.

- fixed: Positioned relative to the browser window.

- sticky: Positioned based on the user’s scroll position.

```css

Div {

Position: relative;
Top: 10px;

Left: 20px;

```

### z-index Property

Controls the stack order of positioned elements.

```css

Div {

Position: absolute;

z-index: 2;

```

## 10. Layering

### Z-index

The `z-index` property determines the stack order of elements. Higher `z-index` values are
placed in front of lower values.

```css

Div {

Position: absolute;

z-index: 10;

## 11. DHTML Events

### Common DHTML Events

- onload: Fires when the document or an image has been loaded.

- onclick: Fires when an element is clicked.

- onmouseover: Fires when the mouse pointer is moved over an element.

- **onmouseout**: Fires when the mouse pointer is moved out of an element.

- onchange: Fires when the content of a form element changes.

- onsubmit: Fires when a form is submitted.

### Adding Event Handlers

Event handlers can be added inline in HTML or using JavaScript.

#### Inline Event Handlers

```html

<button onclick=”alert(‘Button clicked!’)”>Click Me</button>

#### JavaScript Event Handlers

```html

<button id=”myButton”>Click Me</button>

Document.getElementById(“myButton”).onclick = function() {

Alert(“Button clicked!”);

};

</script>

```

Learn JavaScript in 24 Hours
From Everand
Learn JavaScript in 24 Hours
Alex Nordeen
3.5/5 (5)
Install Oracle Forms & Reports 12.2.1.4 With Weblogic 12c 12.2.1.4 - Duh! Microsoft Did It Again
100% (1)
Install Oracle Forms & Reports 12.2.1.4 With Weblogic 12c 12.2.1.4 - Duh! Microsoft Did It Again
46 pages
Srs Search Engine
50% (4)
Srs Search Engine
18 pages
Javascript
No ratings yet
Javascript
9 pages
JavaScript Introduction For Beginners
No ratings yet
JavaScript Introduction For Beginners
20 pages
G1 Reporting CC210
No ratings yet
G1 Reporting CC210
34 pages
js programing question
No ratings yet
js programing question
5 pages
JavaScript_Basics
No ratings yet
JavaScript_Basics
13 pages
Javascript.doc
No ratings yet
Javascript.doc
13 pages
Java Script CompleteNotes
No ratings yet
Java Script CompleteNotes
100 pages
JavaScript Lecture Notes BCA-5
No ratings yet
JavaScript Lecture Notes BCA-5
13 pages
Javascript
No ratings yet
Javascript
6 pages
Lecture 2 - Basic JavaScript
No ratings yet
Lecture 2 - Basic JavaScript
55 pages
Unit 4 JAVASCRIPT
No ratings yet
Unit 4 JAVASCRIPT
15 pages
JAVASCRIPT
No ratings yet
JAVASCRIPT
20 pages
Javascript Assigment 1
No ratings yet
Javascript Assigment 1
15 pages
JavaScript Basics
No ratings yet
JavaScript Basics
10 pages
JavaScript_Cheatsheet
No ratings yet
JavaScript_Cheatsheet
6 pages
JavaScript Mastery
No ratings yet
JavaScript Mastery
80 pages
JavaScript
No ratings yet
JavaScript
14 pages
JAVASCRIPT AND CSS
No ratings yet
JAVASCRIPT AND CSS
39 pages
Full JavaScript Course for Beginners
No ratings yet
Full JavaScript Course for Beginners
7 pages
Unit-3 HTML Java Script
No ratings yet
Unit-3 HTML Java Script
48 pages
summarized-cs
No ratings yet
summarized-cs
6 pages
Chapter 1 Basics of Javascript
No ratings yet
Chapter 1 Basics of Javascript
29 pages
Comprehensive JavaScript Revision Notes
No ratings yet
Comprehensive JavaScript Revision Notes
9 pages
javascript
No ratings yet
javascript
7 pages
2 Introduction to JavaScript and ES6
No ratings yet
2 Introduction to JavaScript and ES6
9 pages
Week4
No ratings yet
Week4
53 pages
Java Script
No ratings yet
Java Script
29 pages
Lecture JavaScript
No ratings yet
Lecture JavaScript
91 pages
Web Application Development: Javascript
No ratings yet
Web Application Development: Javascript
71 pages
Untitled document (13)
No ratings yet
Untitled document (13)
12 pages
Javascript, Jquery and Ajax: Lab. Bases de Dados E Aplicações Web Mieic, Feup 2014/15 Sérgio Nunes
No ratings yet
Javascript, Jquery and Ajax: Lab. Bases de Dados E Aplicações Web Mieic, Feup 2014/15 Sérgio Nunes
74 pages
Unit 3 Javascript
No ratings yet
Unit 3 Javascript
28 pages
JavaScript Notes
No ratings yet
JavaScript Notes
62 pages
Javascript Class.docx
No ratings yet
Javascript Class.docx
89 pages
21 Javascript
No ratings yet
21 Javascript
79 pages
JS
No ratings yet
JS
8 pages
JAVASCRIPT-EXAMPLES-with-ACTIVITIES
No ratings yet
JAVASCRIPT-EXAMPLES-with-ACTIVITIES
6 pages
Java Script Notes
No ratings yet
Java Script Notes
10 pages
Module 3
No ratings yet
Module 3
99 pages
Javascript 1
No ratings yet
Javascript 1
32 pages
Basics of Javascript Programming: K. K. Wagh Polytechnic, Nashik-3
No ratings yet
Basics of Javascript Programming: K. K. Wagh Polytechnic, Nashik-3
29 pages
WT PPT U2
No ratings yet
WT PPT U2
51 pages
JS
No ratings yet
JS
25 pages
Java functions
No ratings yet
Java functions
10 pages
JavaScript 2024 Course AI
100% (1)
JavaScript 2024 Course AI
63 pages
100 JS Concepts
No ratings yet
100 JS Concepts
24 pages
Website JavaScript
No ratings yet
Website JavaScript
50 pages
class notes
No ratings yet
class notes
6 pages
Java
No ratings yet
Java
5 pages
Core JavaScript Notes
No ratings yet
Core JavaScript Notes
62 pages
Full Stack Unit - 2 (JAVA Script)
No ratings yet
Full Stack Unit - 2 (JAVA Script)
140 pages
CSS Chapter 1Notes
No ratings yet
CSS Chapter 1Notes
12 pages
JavaScript Cheat Sheet
No ratings yet
JavaScript Cheat Sheet
4 pages
Javascript (JS) : Name-Shubham Madne Contact-7058163037
No ratings yet
Javascript (JS) : Name-Shubham Madne Contact-7058163037
54 pages
Creating a comprehensive and printable JavaScript handbook is a great idea
No ratings yet
Creating a comprehensive and printable JavaScript handbook is a great idea
7 pages
JavaScript Noted
No ratings yet
JavaScript Noted
6 pages
Js Ppt-converted (1)
No ratings yet
Js Ppt-converted (1)
29 pages
Unit-1 Question and Answers
No ratings yet
Unit-1 Question and Answers
31 pages
Quick JavaScript Learning In Just 3 Days: Fast-Track Learning Course
From Everand
Quick JavaScript Learning In Just 3 Days: Fast-Track Learning Course
Vijay K.R.
No ratings yet
Begin To Code With JavaScript by Rob Miles Draft
No ratings yet
Begin To Code With JavaScript by Rob Miles Draft
415 pages
Term Paper Indent
100% (1)
Term Paper Indent
6 pages
On House Hold Services
No ratings yet
On House Hold Services
15 pages
Scridb 2
No ratings yet
Scridb 2
2 pages
Splunk MSD SPL
No ratings yet
Splunk MSD SPL
7 pages
Firebase With Kotlin
100% (1)
Firebase With Kotlin
4 pages
Ite1002 Web-Technologies Eth 1.1 47 Ite1002
No ratings yet
Ite1002 Web-Technologies Eth 1.1 47 Ite1002
5 pages
The Eclectic: Nit Andhra Pradesh
No ratings yet
The Eclectic: Nit Andhra Pradesh
14 pages
Abhishek Singh Resume
No ratings yet
Abhishek Singh Resume
1 page
Quick Start
No ratings yet
Quick Start
41 pages
WTL Report (Abhi)
No ratings yet
WTL Report (Abhi)
26 pages
unit ii UI UX
No ratings yet
unit ii UI UX
18 pages
Microsoft Fingerprint Reader Solution for Windows 7
No ratings yet
Microsoft Fingerprint Reader Solution for Windows 7
12 pages
Unit 3
No ratings yet
Unit 3
80 pages
Aditya_Kumar (1)
No ratings yet
Aditya_Kumar (1)
1 page
Thesis User Manual Sample
100% (3)
Thesis User Manual Sample
8 pages
Human Resource Managmnet System
No ratings yet
Human Resource Managmnet System
63 pages
VMWare UAG - Netwitness Syslog
No ratings yet
VMWare UAG - Netwitness Syslog
9 pages
L3 Advanced Word Processing Skills 1
No ratings yet
L3 Advanced Word Processing Skills 1
35 pages
Conference Management System
100% (1)
Conference Management System
1 page
1. Introduction
No ratings yet
1. Introduction
57 pages
Google Cloud Computing
No ratings yet
Google Cloud Computing
10 pages
Tutorial Eagle 5.11 en - (PDF Document) PDF
No ratings yet
Tutorial Eagle 5.11 en - (PDF Document) PDF
1 page
Linux Commands Cheat Sheet
No ratings yet
Linux Commands Cheat Sheet
1 page
Abhi JAVA PROJECT
No ratings yet
Abhi JAVA PROJECT
8 pages
Project Report E-Comm
No ratings yet
Project Report E-Comm
78 pages
HTML - CSS & Graphics On Toyhouse
No ratings yet
HTML - CSS & Graphics On Toyhouse
4 pages
Q3 Module 3 Comprog 2
No ratings yet
Q3 Module 3 Comprog 2
14 pages

Skill JS and CSS 2nd Sem (1)

Uploaded by

Skill JS and CSS 2nd Sem (1)

Uploaded by

# UNIT 1 – JAVASCRIPT (15 LECTURES)

JavaScript (JS) is a high-level, interpreted programming language primarily used for

### Key Concepts:

- **Event-Driven**: JavaScript handles user interactions and other events.

### Inline Script Example:

<h1>My Web Page</h1>

`### External Script Example:

<title>External JavaScript Example</title>

<h1>My Web Page</h1>

### Primitive Types:

1. **Number**: Represents both integers and floating-point numbers.

Let price = 19.99;

2. **String**: Represents a sequence of characters enclosed in single, double, or

Let name = “John Doe”;

Let greeting = `Hello, ${name}`;

3. **Boolean**: Represents true or false values.

Let isActive = true;

Let isLoggedIn = false;

4. **Null**: Represents the intentional absence of any object value.

Let emptyValue = null;

Let uniqueId = Symbol(‘id’);

### Object Types:

- **Object**: Collections of properties and methods.

- **Array**: An ordered collection of values.

Let colors = [“Red”, “Green”, “Blue”];

- **Function**: Blocks of code designed to perform specific tasks.

- Can be re-declared and updated

Var x = 10; // Re-declaration allowed

X = 15; // Update allowed

- Cannot be re-declared in the same scope

Y = 10; // Update allowed

// let y = 15; // Error: Cannot re-declare in the same scope

- Cannot be re-declared or updated

// z = 10; // Error: Cannot update

// const z = 15; // Error: Cannot re-declare

- **Number Literal**: `42`

- **String Literal**: `”Hello”`

- **Boolean Literal**: `true`, `false`

- **Array Literal**: `[1, 2, 3]`

- **Object Literal**: `{name: “John”, age: 30}`

Expressions combine values, variables, and operators to produce a result.

- Arithmetic Expression: `5 + 10`

- String Concatenation: `”Hello, “ + “World!”`

Operators perform operations on variables and values.

### Arithmetic Operators:

Console.log(a / b); // 0.5

### Comparison Operators:

Console.log(a == b); // false

Console.log(a != b); // true

Console.log(a === b); // false

Console.log(a !== b); // true

Console.log(a > b); // false

Console.log(a < b); // true

Console.log(a >= b); // false

Console.log(a <= b); // true

### Logical Operators:

Console.log(c && d); // false

Console.log(c || d); // true

Executes a block of code if a specified condition is true.

Console.log(“a is greater than b”);

Console.log(“a is greater than b”);

Console.log(“a is not greater than b”);

Console.log(“a is greater than b”);

Console.log(“a is less than b”);

Console.log(“a is equal to b”);

Let grade = ‘B’;

Loops through a block of code as long as the specified condition is true.

For (let I = 0; I < 5; i++) {

} while (I < 5);

An array is an ordered collection of elements, which can be of any data type.

### Creating an Array:

Let fruits = [“Apple”, “Banana”, “Mango”];

### Accessing Array Elements:

### Array Methods:

- `push()`: Adds a new element to the end of the array.

- `pop()`: Removes the last element from the array.

- Event-Driven: JavaScript handles user interactions and other events.

1. Number: Represents both integers and floating-point numbers.

2. String: Represents a sequence of characters enclosed in single, double, or

3. Boolean: Represents true or false values.

4. Null: Represents the intentional absence of any object value.

- Object: Collections of properties and methods.

- Array: An ordered collection of values.

- Function: Blocks of code designed to perform specific tasks.

- Number Literal: `42`

- String Literal: `”Hello”`

- Boolean Literal: `true`, `false`

- Array Literal: `[1, 2, 3]`

- Object Literal: `{name: “John”, age: 30}`

- Mouse Events: `click`, `dblclick`, `mousedown`, `mouseup`, `mouseover`, `mouseout`,

- Keyboard Events: `keydown`, `keyup`, `keypress`

- Form Events: `submit`, `change`, `focus`, `blur`

- Window Events: `load`, `resize`, `scroll`, `unload`

- Properties: `innerWidth`, `innerHeight`, `location`, `history`, `navigator`

- Methods: `alert()`, `confirm()`, `prompt()`, `open()`, `close()`, `setTimeout()`,

- Properties: àppName`, àppVersion`, `platform`, ùserAgent`, `language`,

- Properties: `href`, `protocol`, `host`, `hostname`, `pathname`, `search`, `hash`

- Methods: `assign()`, `reload()`, `replace()`