Scribd
Upload
18 views

Intro To JavaScript Slides

The document provides an introduction to JavaScript, covering key concepts like variables, data types, operators, conditional statements, arrays, objects, functions and events. It explains how to write JavaScript code in HTML pages and manipulate DOM elements. The summary also mentions a lab assignment on JavaScript basics due by the weekend.

Uploaded by

Padmaja Bhogadi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

Intro To JavaScript Slides

The document provides an introduction to JavaScript, covering key concepts like variables, data types, operators, conditional statements, arrays, objects, functions and events. It explains how to write JavaScript code in HTML pages and manipulate DOM elements. The summary also mentions a lab assignment on JavaScript basics due by the weekend.

Uploaded by

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

Intro to JavaScript

ISS Lab 2
<script> tag
In HTML, Javascript code is inserted between <script> and </script> tags.
Usually goes inside the <head> tag.
But can be placed inside <body> tag as well for faster execution.

<!DOCTYPE html> JavaScript in Body


<html>
My First JavaScript
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>
Attaching JS to HTML
• External:

<script src="myScript.js"></script>

• Internal:

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

• Inline:

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


JS Display
• Writing into an HTML element:
document.getElementById("demo").innerHTML = 5 + 6;

• Writing into the HTML output


document.write(5 + 6);

• Writing into an alert box:


alert(5 + 6);

• Writing into the browser console (will show in the terminal, used for debugging purposes)
console.log(5 + 6);
JS Variables

let var const


if(i == 1) { if(car == 1) { const PI = 3.1415926;
let x = 5; var carName = "Volvo"; PI = 3.14; // This will give an error
let y = 6; } PI = PI + 10; // This will also give an error
let x = 2; // doesn't work document.write(carName); // works
}
document.write(x) // doesn't work

Use let if the variables and the type can be Use let if you want to increase the Use const if the value should not be
allowed to changed later. scope of the variable to global scope. changed.
Only has block scope. Use const if the type should not be
Variables must be declared before use. changed (Arrays and Objects)
Cannot be redeclared in the same scope.
JS Comments

SIngle Line Multi-line


// Change heading: /*
document.getElementById("myH").innerHTML = "Hello"; The code below will change
my web page:
*/
document.getElementById("myH").innerHTML = "Hello";
JS Arithmetic Operators
JS Assignment Operators
JS Comparison Operators
JS Datatypes
// Numbers:
let length = 16;
let weight = 7.5;
// Strings:
let color = "Yellow";
let lastName = 'Johnson';
// Booleans
let x = true;
let y = false;
// Object:
const person = {firstName:"John", lastName:"Doe"};
// Array object:
const cars = ["Saab", "Volvo", "BMW"];
// Date object:
const date = new Date("2022-03-25");
JS Functions
A JavaScript function is defined with the function keyword,
followed by a name, followed by parentheses ().
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.

// Function is called, the return value will end up in x


let x = myFunction(4, 3);

function myFunction(a, b) {
// Function returns the product of a and b
return a * b;
}
JS Objects

In real life, a car is an object.


A car has properties like weight and color, and methods like start and 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.
JS Objects
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};

You can access properties in two ways:


1) objectName.propertyName
2) objectName["propertyName"]
JS Object Methods
Methods are actions that can be performed on objects.
Methods are stored in properties as function definitions.

const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};

What is 'this' keyword above?


this refers to the object.
Here, this.firstName means the firstName proerpty of person.
this.lastName means the lastName property of person.
JS Events
Examples of HTML events:
• An HTML web page has finished loading
• An HTML input field was changed
• An HTML button was clicked

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>


JS Strings
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

• length: let length = text.length;


• charAt(position): text.charAt(0);
• Property access [] like in arrays: let letter = name[2];
• slice(start, end): let part = text.slice(-12, -6)
• substring(start, end): text.substring(7,13) // start and end values less than 0 are treated as 0 here
• substr(start, length): text.substr(7,6)
• to upper case: let text2 = text1.toUpperCase();
• to lower case: let text2 = text1.toLowerCase();
• concat():
let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2);
JS Arrays
It is common practice to declare arrays with the const keyword.

Declaring arrays:
• const cars = ["Saab", "Volvo", "BMW"];
• const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
• const cars = new Array("Saab", "Volvo", "BMW");

Accessing array elements:


• let fruit = fruits[0];

Adding array elements:


• const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon");
JS Switch
switch (new Date().getDay()) { // date object
case 6:
text = "Today is Saturday";
break;
case 0:
text = "Today is Sunday";
break;
default:
text = "Looking forward to the Weekend";
}
JS Iterables
const letters = ["a","b","c"];

for (const x of letters) {


// code block to be executed
}

Iterables are iterable objects like Arrays.


Can be accessed with simple and efficient code.
Can be iterated over with for..of loops.
JS Sets
A set is a collection of unique values.
Each value can only occur once in a set.

// Create a Set
const letters = new Set();

// Add Values to the Set


letters.add("a");
letters.add("b");
letters.add("c");
letters.add("a"); // only the first "a" will be saved
JS Maps
A map holds key-value pairs where the keys can be any datatype.
A map remembers the original insertion order of the keys.

// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);

// Set Map Values


fruits.set("apples", 200); // can change existing key value or make a new key

fruits.get("apples"); // Returns 200


fruits.delete("apples");
JS try-catch-finally
Syntax:
try {
// Block of code to try
}
catch(err) {
// Block of code to handle errors
}
finally {
// Block of code to be executed regardless of the try / catch result
}
JS Classes
// creating car class and constructor
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age(x) {
return x - this.year;
}
}

// creating car objects


const myCar1 = new Car("Ford", 2014);
const myCar2 = new Car("Audi", 2019);
Lab Assignment
• Lab Assignment 2 is uploaded on Moodle.
• Deadline is Saturday at 5:30pm.
• There is a bonus section and will make up for any marks you lose in this lab assignment only.
• Anything not mentioned in the assignment document can be assumed.
• Submission format:
• Join GitHub classroom.
• https://classroom.github.com/a/zBKeFQYU
• Select your Roll Number to join the classroom.
• You will automatically be added into your repo.
• Push your code here before the deadline.
• The tutorial session this week will be a doubt clearing session where you can work on your lab assignment and ask
the TAs if you have any doubts.
• Hint for the lab assignment: Use Date() object and its get methods.
• DO NOT use ChatGPT.

You might also like