Scribd
Upload
9 views

CSS Unit 1-6

Css unit 1-6 by sanskar Rane

Uploaded by

ranesanskar70
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
9 views

CSS Unit 1-6

Css unit 1-6 by sanskar Rane

Uploaded by

ranesanskar70
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 68

Required softwares

■ You can use Notepad and Browser.


■ You can also choose following IDE or software
– Notepad++
– Sublime
– Atom
– Visual Studio Code (VS Code)
– Microsoft FrontPage
– Macromedia Dreamweaver
– WebStorm
– NetBeans, etc
How to Add JavaScript to a Page (Contd..)
■ Web browsers are built to understand HTML and CSS and
convert those languages into a visual display on the screen.

■ The part of the web browser that understands HTML and CSS
is
called the layout or rendering engine. But most browsers also
have something called a JavaScript interpreter.

■ The web browser is usually expecting HTML, so you must


specifically tell the browser when JavaScript is coming by using
the <script> tag.
How to Add JavaScript to a Page
■ The <script> tag is regular HTML.

■ When the web browser encounters the closing </script>


tag, it
knows it’s reached the end of the JavaScript program and can
get
back to its normal duties.

■ You’ll add the <script> tag in the web page’s <head>


section, like
this:
First JavaScript program
Step 1 – Open Notepad and type the following code

Step 2 – Save the file with name “MyJavaScript.html”


Step 3 – Now double click on HTML file, then it will open in
browser
JavaScript Syntax (Contd..)
■ JavaScript code can be placed within the <script>...
</script> HTML tags in a web page.

■ You can place the <script> tags, anywhere within your web page
(recommended to keep it within the <head> tags).

■ The <script> tag alerts the browser program to start interpreting


all the text between these tags as a script.

■ A simple syntax of your JavaScript will appear as follows.


<script..>
Javascript code
</script>
JavaScript Syntax (Contd..)
■ The script tag takes two important attributes −
 Language − Specifies what scripting language you are using.
Typically, its value will be javascript. (not used in recent versions
of
HTML)
 Type − Indicate the scripting language in use and its value
should
be set to "text/javascript".
<script language =“javascript” type = “text/javascript>
javascript code
</script>
JavaScript Syntax (Contd..)
■ Whitespace and Line Breaks - JavaScript ignores spaces, tabs, and
newlines

■ Semicolons are Optional – JavaScript allows you to omit semicolon

■ Case Sensitivity - JavaScript is a case-sensitive language.

■ Comments in JavaScript - JavaScript supports both C-style and C++-


style comments
– Single line comment //-----
– Multiple line comment /* */
– JavaScript Comment <!-- //-->
JavaScript Output (Contd..)
■ 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().
1.2 Object Name (Contd.)
■ A typical web page contains many objects.

■ For example, a web page has two forms


which has objects like
buttons, textarea, etc.

■ Each object must be uniquely identified by


name or ID.
1.2 Object Name (Contd.)
■ In JavaScript, objects are created by using
following ways:
1) Using Literal Notation
2) Using new keyword
3) Using Constructor
1.2 Object Name (Contd.)
By Using Literal Notation
■ A object literal consists of comma separated list of name-
value pairs wrapped in curly braces.
Syntax:-
Object= {property1:value1, property2:value2…
propertyN:valueN}
OR
Object={key1:value1, key2:value2…..keyN:valueN}
e.g.
var user = { }; // An empty object
var circle = { x:10, y:21, radius:4 }; // User-defined object
example
<html>
<head>
<title>
literal notation</title>
<body>
<script>
var person={fname:"Rcpp", lname:"Polytechnic"};
for(var x in person)
document.write(person[x]);
</script>
</body>
</html>
1.2 Object Name (Contd.)
By Using new keyword
■ The new operator is used to create an
instance of object
Syntax:-
Var objectName =new Object();
var obj = new Object(); // Generic object
var dob = new Date(1995, 4, 10); // Date object
var mycar = new Car(); // User-defined object
example
<html>
<head>
<title>
New Keyword</title>
<body>
<script>
var person= new Object();
person.fname="RCPP";
person.lname="Polytechnic";
document.write(person.fname+" "+person.lname);
</script>
</body>
</html>
1.2 Object Name (Contd.)
• Using Constructor
• Constructor is created with arguments.
• Each argument value can be assigned in each
current object using this keyword.
• Creation of object and assigning values can be
done as follow:
example
<html>
<head>
<title>
Constructor</title>
<body>
<script>
function ses(fname, lname)
{
this.fname=fname;
this.lname=lname;
}
s=new ses("Rcpp", "Polytechnic");
document.write(s.fname+" "+s.lname);
</script>
</body>
</html>
1.2 Property
■ The value that is associated with an object.

■ It is a kind of information

■ Object can have many values which are called as


property.
■ For example,
Ses-
Fname:”RCPP” //propery 1
Lname:”Polytechnic” //property2
1.2 Methods
■ It is basically an action performed by an object.

■ An object is like a noun and method is like as verb

■ It is a kind of behaviour

■ For example,
– A submit button on login form will submit the form data to
server.

■ In JavaScript, we can create a method by using function keyword


1.2 Dot Syntax
■ An object is associated with properties and methods

■ For example,
– A document object has a property bgColor and method write

■ In Javascript, we can access object property and method using dot


syntax along with object name

document.bgColor // Accessing property

document.write( ) // Accessing method


1.2 Main Event (Contd.)
■ An event is something that causes JavaScript to start executing the code.
■ It is a specific circumstance which is monitored by JavaScript and that script can
respond to it.

■ Some examples of events are:


– A document loading
– User clicking a mouse button
– The browser screen changing size

■ An event handler which is a part of JavaScript that reacts to important events.

■ For example, an event handler on flipkart website will enlarge image when user
mouse over the product
Build-in objects in JavaScript (Contd.)
■ Web browsers have an object named window.

■ It is called as global object.

■ Some of objects are:


– window
– document
– navigator
– history
1.3 Values (Contd.)
■ In HTML, all values are treated as text

■ JavaScript uses six kinds of values


1) Number
2) String
3) Boolean
4) Null
5) Objects
6) Functions
1.3 Values
■ You can also use literals to represent values in JS. These are fixed values.
■ Different types of literals are
1) Array literals – a list of zero or more expressions enclosed in square
brackets ( [ ] )
2) Boolean literals – true or false
3) Integer literals – Expressed in decimal (without leading with 0),
hexadecimal (leading with 0x), octal (leading with 0) & binary (leading with
0b or 0B)
4) Floating-point literals – decimal integer, decimal point, fraction &
exponent
5) String literals – zero or more characters enclosed in double or single
quotes
1.3 Variables (Contd.)
■ Variables are the “containers” for storing information
■ Used to store values

■ Rules for creating variable in JavaScript

■ Declaring a variable
– Use var keyword, which tells browser that text follow will be the variable
name
– Syntax:

var variable-name;

– Example

var color;
1.3 Variables
■ Initializing a variable
– Use assignment operator to assign value to variable
– Syntax:

variable-name = value;

– Example

color = “Red”; or color = ’Red’;


1.4 Operators (Contd.)
■ JavaScript statement contains mathematical expressions
which is used to tell the browser to do something

■ The expression contains two parts


– Operand
– Operator

■ An operand is the value or variable

■ An operator is a special symbol indicates an action or


operation
1.4 Operators (Contd.)
■ Arithmetic operators

■ Comparison operators

■ Logical operators

■ Bitwise operators

■ Assignment operators

■ Conditional operators (Ternary)


1.4 Operators (Contd.)
■ Arithmetic operators
Arithmetic operators are used to perform mathematical
operations between numeric operands.
1.4 Operators (Contd.)
■ Comparison operators
• JavaScript language includes operators that compare two operands and return
Boolean
• value true or false.
1.4 Operators (Contd.)
■ Logical operators
• JavaScript language includes operators that compare two operands and return
Boolean
• value true or false .
1.4 Operators (Contd.)
■ Assignment operators
• JavaScript includes assignment operators to assign values to
variables.
1.4 Operators (Contd.)
■ Bitwise operators
– The JavaScript Bitwise Operators perform bit
operations.
– All the decimal values converted into binary
values (sequence of bits, i.e., 0100,
1100, 1000, 1001, etc.).
– Next, JavaScript bitwise operator will work on
these bits such as shifting them left to
right or converting bit value from 0 to 1, etc.
1.4 Operators (Contd.)

■ Bitwise operators
1.4 Operators (Contd.)
■ Ternary operator
• – JavaScript includes special operator called
ternary operator : ? that
• assigns a value to a variable based on some
condition.
• – This is like short form of if-else condition.
• Syntax-
<condition>? <Value1>:<Value2>?
1.4 Expressions (Contd.)
■ When one or more operators are combined with one or
more
operands then it is called an expression.

■ JavaScript has following category of expressions:


1) Primary expressions
2) Object and Array initializers
3) Function definition expressions
4) Property access expressions
5) Invocation expressions
1.4 Expressions Primary Expressions
■ Standalone simplest expressions.
■ In JavaScript these are constants, literal
values, keywords & variable references.
1.23 // A number literal
“hello” // A string literal
/pattern/ // A regular expression literal
true, false, null, this // Keywords
i, sum // Variables
1.4 Expressions Object and Array
Initializers(Contd.)
• ■ These are newly created object or array sometimes called as
• “object literals” and “array literals”.

• ■ An “array initializer” is a comma-separated list of expressions


• contained within square brackets.

• ■ The value of an array initializer is a newly created array.


• [] // An empty array: no expressions inside brackets means no
elements
• [1+2, 3+4] // A 2-element array. First element is 3, second is 7
• var matrix = [[1,2,3], [4,5,6], [7,8,9]]; // Nested array
1.4 Expressions Object and Array Initializers
■ An “object initializer” (like array initializer expressions) but
the square brackets are replaced by curly brackets

■ Each subexpression is prefixed with a property name and a


colon:
var p = { x:2.3, y:-1.2 }; // An object with 2 properties
var q = { }; // An empty object with no properties
q.x = 2.3; q.y = -1.2; // Now q has the same properties as p
■ Object literals can be nested. For example:
var rectangle = { upperLeft: { x: 2, y: 2 },
lowerRight: { x: 4, y: 5 } };
1.4 Expressions Function Definition
Expressions
• ■ It defines a JavaScript function & the value of expression is newly
• created function also known as “function literal”.

• ■ A function definition expression typically consists of


• – the keyword function followed by a comma-separated list of
• zero or more identifiers (the parameter names) in parentheses
• and

• – a block of JavaScript code (the function body) in curly braces.

• ■ For example:
• // This function returns the square of the value passed to it.
• var square = function(x) { return x * x; }
1.4 Expressions Property Access Expressions
• ■ Evaluates the value of an object property or an array element.

• ■ JavaScript defines two syntaxes for property access:

• expression . identifier
• expression [ expression ]

• ■ For example,
• var obj={x:1, y:2}
• obj.x //1
• obj.y //2
• var arr= [1,2,3]
• arr[2] //3
1.4 Expressions Invocation Expressions
• An invocation expression is JavaScript’s syntax for calling (or executing) a
• function or method.

• ■ It starts with a function expression that identifies the function to be


called.

• ■ The function expression is followed by an open parenthesis, a comma-


• separated list of zero or more argument expressions, and a close
parenthesis. Some examples:
• ■ For example,
• f(0) // f is the function expression; 0 is the argument expression.
• Math.max(x,y,z) // Math.max is the function; x, y and z are the arguments.
• a.sort() // a.sort is the function; there are no arguments.
1.5 Condition Statements
• ■ A condition statement is a type of JavaScript
statement tells the
• browser to evaluate a condition and based upon this
evaluation,
• either execute or skip one or more statements.

• ■ The three types of condition statements are the


• 1) if statement
• 2) switch... case statement and
• 3) the loop statement.
1.5 if statement (Contd.)
• ■ The if statement is most powerful statement that allows JavaScript
used for
• decision making.
• ■ There are four versions of the if statement.
• ■ The if statement has three parts:
• – the if keyword,
• – a conditional expression, and
• – the code block statements
• ■ Syntax:
• if (conditional expression)
• {
• // code block statements here.
• }
1.5 if statement
1.5 if...else statement (Contd.)
• ■ The if...else statement simply tells the browser “if the condition is true, then
• execute these statements, else execute these other statements.”
• ■ The if...else statement has five parts:
• – the if keyword,
• – a conditional expression, and
• – the code block statements executed when condition is true
• – the else keyword.
• – a code block statements executed when the condition is false.

• ■ Syntax:
• if (conditional expression)
• {
• // code block statements here.
• }
• else
• {
• // code block statements here.
• }
1.5 if...else statement
1.5 if...else if statement (Contd.)
• ■ The if...else if statement tells the browser, “If the condition is true, then execute
• these statements, else evaluate another condition. If the other condition is true,
• then execute these other statements.
• ■ Syntax:
• if (conditional expression)
• {
• //Place statements here.
• }
• else if (conditional expression)
• {
• //Place statements here.
• }
• ..s
• else
• {
• }
1.5 if...else if statement
1.6 switch...case statement (Contd.)
• ■ A switch...case statement tells the browser
to compare a switch
• value with a series of case values.

• ■ If the switch value matches a case value,


then the browser
• executes statements that are placed beneath
the case value.
1.6 switch...case statement (Contd.)
• ■ A switch...case statement has eight parts:
• 1) The switch keyword
• 2) The switch value (must be placed within parentheses)
• 3) The case keyword
• 4) The case value (must be placed between the case keyword
and a colon
• 5) The case statements
• 6) The break keyword (optional)
• 7) The default keyword (optional)
• 8) The Open and close Curley braces define the
• body of the switch...case statement.
1.6 switch...case statement (Contd.)
• switch (value)
• {
• case value1:
• //Place statements here.
• break;

• case value2:
• //Place statements here.
• break;
• default:
• //Place statements here.
• }
1.7 Looping Statement
• ■ You can also control how a browser makes a decision by using a
• loop.

• ■ A loop is used to execute one or more statements repeatedly,


• without your having to duplicate those statements in your
• JavaScript.

• ■ You can use four types of loops in a JavaScript:


• 1) a for loop
• 2) for in loop
• 3) while loop
1.7 Looping Statement The for loop
• ■ The for loop tells the browser to execute statements
within the for
• loop until a condition statement returns false.

• ■ The for loop has five parts:


• 1) The for keyword
• 2) The initializer
• 3) The conditional expression
• 4) The post loop statements
• 5) The code block
1.7 Looping Statement The for loop
• for ( initializer; conditional expression;
• post loop statements)
• {
• //Place statements here.
• }
1.7 Looping Statement The for in loop
(Contd.)
• ■ The for in loop is a special kind of for loop that is used whenever you
don’t
• know the number of times that the browser should loop.
• ■ The for in loop tells the browser to execute statements within the code
block
• for each item on a list.
• ■ If the list has five items, then the browser executes those statements
five times.
• ■ The for loop has four parts:
• 1) The for keyword
• 2) The list, which is placed between parentheses
• 3) The Open and close French braces that define the code block
• 4) the code block
1.7 Looping Statement The for in loop
(Contd.)
1.7 Looping Statement The for in loop
(Contd.)
1.7 Looping Statement The while loop
• ■ The while loop tells the browser to execute one or more
• statements continually as long as a condition is true.

• ■ A kind of entry-controlled loop.

• ■ Loop executes zero or more times.


while (conditional expression)
{
• ■ The while loop has four parts: //Place statements here.
}
• 1) The while keyword
• 2) The conditional expression
• 3) The Open and close French braces that define the code block
1.7 Looping Statement The do...while loop
(Contd.)
• ■ The do...while loop is same as while loop, except that statements
• within the code block executes at least once.

• ■ A kind of exit-controlled loop.


do
{
• ■ Loop executes one or more times. //Place statements here.
} while (conditional expression) ;

• ■ The do...while loop has four parts:


• 1) The do keyword
• 2) The Open and close French braces that define the code block
• 3) The while keyword
• 4) The conditional expression placed within parenthesis
1.7 continue statement
■ The continue statement "jumps over" one iteration in the
loop.

■ The continue keyword instructs the browser


– to stop executing statements within the loop immediately and
– return to top of the loop to evaluate the conditional
expression

■ It breaks iteration in the loop and continues executing the next


iteration in the loop.

Unit I - Basics of JavaScript Programming (12 Marks) 69

continue;
1.8 Querying and Setting properties
(Contd..)
■ To obtain (or query) the value of a object property
1) Use dot syntax
 While using dot operator, the RHS must be identifier
 For example
var author = book.author;
var name = student.surname;

2) Use square brackets


 While using square brackets, the value within brackets must be a property
name
 For example
var title = book[“main_title”];
var author = book[“author”];
1.8 Querying and Setting properties

■ To create (or set) a object property use dot or


square brackets but put them on
LHS of an assignment expression.

■ For example
book.edition = 5;
book[“main_title”] = “ECMAScript”;
1.8 Deleting properties
■ The delete operator is used to remove the
property from an object.

■ For example
delete book.author; // The object now has no
author property
delete book[“main_title”]; // The object now
has no main_title property
1.8 Getters and Setters (Contd.)
■ There are two kinds of object properties.
1) Data properties – These have a simple value
2) Accessor properties. They are essentially
functions that execute on getting and setting a
value

■ Accessor properties are represented by


“getter” and “setter”
methods.
1.8 Getters and Setters (Contd.)
■ In an object literal they are denoted by get
and set:
1.8 Getters and Setters (Contd.)
■ For instance, we have a user object with
name and surname:
var person =
{
name: “RCPP",
surname: “Polytechnic"
};
1.8 Getters and Setters (Contd.)
<body>
<html>
<script>
var person={fname:"RCPP",
get getName()
{
return this.fname;
},
set setName(newName)
{
this.fname=newName;
}
};
document.write("Before set= "+person.getName+"<br>");
person.setName="Polytechnic";
document.write("After set= "+person.getName);
</script>
</body>
</html>
THANK YOU

You might also like