Download Web Programming and Technology and more Lecture notes Web Programming and Technologies in PDF only on Docsity!
UNIT
What is JavaScript?
JavaScript is the programming language of the web. It can update and change both HTML and CSS. It can calculate, manipulate and validate data. JavaScript is a cross-platform, object-oriented scripting language used to make webpages interactive (e.g., having complex animations, clickable buttons, popup menus, etc.). There are also more advanced server side versions of JavaScript such as Node.js, which allow you to add more functionality to a website than downloading files (such as real-time collaboration between multiple computers). Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them. JavaScript contains a standard library of objects, such as Array, Map, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example: Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client- side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation. Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.
JavaScript and Java
JavaScript is a very free-form language compared to Java. You do not have to declare all variables, classes, and methods. You do not have to be concerned with whether methods are public, private, or protected, and you do not have to implement interfaces. Variables, parameters, and function return types are not explicitly typed. Java is a class-based programming language designed for fast execution and type safety. Type safety means, for instance, that you can't cast a Java integer into an object reference or access private memory by corrupting the Java bytecode. Java's class-based model means that programs consist exclusively of classes and their methods. Java's class inheritance and strong typing generally require tightly coupled object hierarchies. These requirements make Java programming more complex than JavaScript programming. JavaScript Java Object-oriented. No distinction between types of objects. Inheritance is through the prototype mechanism, and properties and methods can be added to any object dynamically. Class-based. Objects are divided into classes a instances with all inheritance through the clas hierarchy. Classes and instances cannot have properties or methods added dynamically. Variable data types are not declared (dynamic typing, loosely typed). Variable data types must be declared (static ty strongly typed). Cannot automatically write to hard disk. Can automatically write to hard disk.
Features of JavaScript
There are following features of JavaScript:
- All popular web browsers support JavaScript as they provide built-in execution environments.
- JavaScript follows the syntax and structure of the C programming language. Thus, it is a structured programming language.
- JavaScript is a weakly typed language, where certain types are implicitly cast (depending on the operation).
- JavaScript is an object-oriented programming language that uses prototypes rather than using classes for inheritance.
- It is a light-weighted and interpreted language.
- It is a case-sensitive language.
- JavaScript is supportable in several operating systems including, Windows, macOS, etc.
simple JavaScript programs JavaScript is a versatile programming language that can be used to create dynamic and interactive web pages. Here are some basic examples to help beginners get started with JavaScript. Hello World The simplest JavaScript program is to display "Hello World" on the web page.
JavaScript Hello World
This example uses the document.getElementById method to find an HTML element with the id "demo" and changes its content to "Hello World!" **PROMPT AND DIALOGUE BOXES JAVASCRIPT**
An alert dialog box is the most simple dialog box. It enables you to display a
short message to the user. It also includes OK button, and the user has to
click this OK button to continue.
You can create alert dialog boxes with the alert() method. You've already seen
a lot of alert examples in the previous chapters. Let's take a look at one
more example:
Example let message = "Hi there! Click OK to continue.";
alert(message); /* The following line won't execute until you dismiss previous alert */ alert("This is another alert box."); Creating Prompt Dialog Box
The prompt dialog box is used to prompt the user to enter information. A
prompt dialog box includes a text input field, an OK and a Cancel button.
You can create prompt dialog boxes with the prompt() method. This method
returns the text entered in the input field when the user clicks the OK
button, and null if user clicks the Cancel button. If the user clicks OK button
without entering any text, an empty string is returned. For this reason, its
result is usually assigned to a variable when it is used.
The following example will print the value entered by you when you click the
OK button.
Example let name = prompt("What's your name?"); if(name.length > 0 && name != "null") { document.write("Hi, " + name); } else { document.write("Anonymous!"); }
The value returned by the prompt() method is always a string. This means if
the user enters 10 in the input field, the string "10" is returned instead of the
number 10.
MEMORY CONCEPTS IN JAVASCRIPT
JavaScript Operators JavaScript operators are symbols that are used to perform operations on operands. For example:
- var sum= 10 +20; Here, + is the arithmetic operator and = is the assignment operator. There are following types of operators in JavaScript. 1. Arithmetic Operators 2. Comparison (Relational) Operators 3. Bitwise Operators 4. Logical Operators 5. Assignment Operators 6. Special Operators
JavaScript Arithmetic Operators
Arithmetic operators are used to perform arithmetic operations on the operands. The following operators are known as JavaScript arithmetic operators.
- Multiplication 10*20 = 200 / Division 20/10 = 2 % Modulus (Remainder) 20%10 = 0 ++ Increment var a=10; a++; Now a = 11 -- Decrement var a=10; a--; Now a = 9
JavaScript Comparison Operators
The JavaScript comparison operator compares the two operands. The comparison operators are as follows: Operator Description Example == Is equal to 10==20 = false === Identical (equal and of same type) 10==20 = false != Not equal to 10!=20 = true !== Not Identical 20!==20 = false
Greater than 20>10 = true = Greater than or equal to 20>=10 = true < Less than 20<10 = false <= Less than or equal to 20<=10 = false
|| Logical OR (10==20 || 20==33) = false ! Logical Not !(10==20) = true
JavaScript Assignment Operators
The following operators are known as JavaScript assignment operators. Operato r Description Example = Assign 10+10 = 20 += Add and assign var a=10; a+=20; Now a = 30 -= Subtract and assign var a=20; a-=10; Now a = 10 = Multiply and assign var a=10; a=20; Now a = 200 /= Divide and assign var a=10; a/=2; Now a = 5 %= Modulus and assign var a=10; a%=2; Now a = 0
JavaScript Special Operators
The following operators are known as JavaScript special operators. Operator Description
(?:) Conditional Operator returns value based on the condition. It is like if-else , Comma Operator allows multiple expressions to be evaluated as single st delete Delete Operator deletes a property from the object. in In Operator checks if object has the given property instanceof checks if the object is an instance of given type new creates an instance (object) typeof checks the type of object. void it discards the expression's return value. yield checks what is returned in a generator by the generator's iterator. DECISION MAKING IN JAVASCRIPT , CONTROL STRUCTURES IN JAVASCRIPT The JavaScript if-else statement is used to execute the code whether condition is true or false. There are three forms of if statement in JavaScript.
- If Statement
- If else statement
- if else if statement
JavaScript If statement
It evaluates the content only if expression is true. The signature of JavaScript if statement is given below.
- < script >
- var a= 20 ;
- if(a% 2 ==0){
- document.write("a is even number");
- }
- else{
- document.write("a is odd number");
- }
- </ script >
Output of the above example
a is even number
JavaScript If...else if statement
It evaluates the content only if expression is true from several expressions. The signature of JavaScript if else if statement is given below.
- if(expression1){
- //content to be evaluated if expression1 is true
- }
- else if(expression2){
- //content to be evaluated if expression2 is true
- }
- else if(expression3){
- //content to be evaluated if expression3 is true
- }
- else{
- //content to be evaluated if no expression is true
- } Let’s see the simple example of if else if statement in javascript.
- < script >
- var a= 20 ;
- if(a==10){
- document.write("a is equal to 10");
- }
- else if(a==15){
- document.write("a is equal to 15");
- }
- else if(a==20){
- document.write("a is equal to 20");
- }
- else{
- document.write("a is not equal to 10, 15 or 20");
- }
- </ script >
Output of the above example
a is equal to 20
Switch Statement
The switch case statement in JavaScript is also used for decision-making purposes. In some cases, using the switch case statement is seen to be more convenient than if-else statements.
Syntax:
switch (expression) { case value1: statement1; break; case value2: statement2; break; . . case valueN: statementN; break; default: statementDefault; } Example: In this example, we are using the above-explained approach.
Javascript
let num = 5;
The conditional operator, also referred to as the ternary operator (?:), is a shortcut for expressing conditional statements in JavaScript.
Syntax:
condition? value if true : value if false Example: In this example, we are using the ternary operator to find whether the given number is positive or negative.
Javascript
let num = 10; let result = num >= 0? "Positive" : "Negative"; console.log(The number is ${result}.); Output The number is Positive.
Using For loop
In this approach, we are using for loop in which the execution of a set of instructions repeatedly until some condition evaluates and becomes false
Syntax:
for (statement 1; statement 2; statement 3) { // Code here... }
Example: In this example, we are using Iterative Statement as a for loop, in which we find the even number between 0 to 10.
Javascript
for (let i = 0; i <= 10; i++) { if (i % 2 === 0) { console.log(i); } }; Output 0 2 4 6 8 10 JavaScript while Loop The while loop repeatedly executes a block of code as long as a specified condition is true. The syntax of the while loop is: while (condition) { // body of loop } Here,
The do...while loop executes a block of code once, then repeatedly executes it as long as the specified condition is true. The syntax of the do...while loop is: do { // body of loop } while(condition); Here,
- The do…while loop executes the code inside { }.
- Then, it evaluates the condition inside ( ).
- If the condition evaluates to true, the code inside { } is executed again.
- This process continues as long as the condition evaluates to true.
- If the condition evaluates to false, the loop terminates.
- // initialize variable i
- let i = 1;
- // loop runs until i is less than 4
- while (i < 4) {
- console.log(i);
- i += 1;
- }
- Output
- 1
- 2
- 3
Flowchart of do...while Loop
Flowchart of JavaScript do...while loop
Example 3: Display Numbers from 3 to 1
let i = 3 ; // do...while loop do { console.log(i); i--;
