Scribd
Upload
104 views

Java Script

JavaScript is a lightweight, interpreted programming language that allows developers to build interactivity into HTML pages. It uses control statements like if/else, switch/case, and loops like while, do/while and for to control program flow. Key concepts covered include conditional logic, data types, functions, and object-oriented programming features like creating and modifying objects with properties and methods.

Uploaded by

krishna kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
104 views

Java Script

JavaScript is a lightweight, interpreted programming language that allows developers to build interactivity into HTML pages. It uses control statements like if/else, switch/case, and loops like while, do/while and for to control program flow. Key concepts covered include conditional logic, data types, functions, and object-oriented programming features like creating and modifying objects with properties and methods.

Uploaded by

krishna kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 117

JavaScript

• JavaScript is a lightweight, interpreted


programming language with object-oriented
capabilities that allows you to build
interactivity into otherwise static HTML pages.

• JavaScript code is not compiled but translated


by the translator. This translator is embedded
into the browser and is responsible for
translating java script code.
• It is Lightweight, interpreted programming
language.
• It is designed for creating network-centric
applications.
• It is complementary to and integrated with
Java.
• It is complementary to and integrated with
HTML
• It is an open and cross-platform
CONTROL STATEMENTS
• The control structures within JavaScript allow
the program flow to change within a unit of
code or function.

• A programming language uses control


statements to control the flow of execution of
the program based on certain conditions.
JavaScript’s conditional statements:
• If

• if-else

• nested-if

• if-else-if
if:
• if statement is the most simple decision
making statement.
• It is used to decide whether a certain
statement or block of statements will be
executed or not

• i.e if a certain condition is true then a block of


statement is executed otherwise not.
Flow chart
example
• <html>
• <head>
• <title>IF Statments!!!</title>
• <script type="text/javascript">
• var age = prompt("Please enter your age");
• if(age>=18)
• document.write("You are an adult <br />");
• if(age<18)
• document.write("You are NOT an adult <br />");
• </script>
• </head>
• <body>
• </body>
• </html>
if-else:
• The if statement alone tells us that if a
condition is true it will execute a block of
statements and if the condition is false it
won’t.

• But what if we want to do something else if


the condition is false.
syntax
• if (condition)
• { // Executes this block if // condition is true
• }

• else {
• // Executes this block if // condition is false
• }
Flow chart
example
• <html>
• <head>
• <title>If...Else Statments!!!</title>
• <script type="text/javascript">
• // Get the current hours
• var hours = new Date().getHours();
• if(hours<12)
• document.write("Good Morning!!!<br />");
• else
• document.write("Good Afternoon!!!<br />");
• </script>
• </head>
• <body>
• </body>
nested-if:
• A nested if is an if statement that is the target of
another if or else. Nested if statements means an if
statement inside an if statement.

• if (condition1) {
• // Executes when condition1 is true
• if (condition2)
• {
• // Executes when condition2 is true
• }
• }
Flow chart
• <script type = "text/javaScript">
•
• // JavaScript program to illustrate nested-if statement
•
• var i = 10;
•
• if (i == 10) {
•
• // First if statement
• if (i < 15)
• document.write("i is smaller than 15");
•
• // Nested - if statement
• // Will only be executed if statement above
• // it is true
• if (i < 12)
• document.write("i is smaller than 12 too");
• else
• document.write("i is greater than 15");
• }
• < /script>
if-else-if ladder:
• Here, a user can decide among multiple
options.The if statements are executed from
the top down.
• if (condition)
• statement;
• else if (condition)
• statement; . .
• else statement;
• <script type = "text/javaScript">
• // JavaScript program to illustrate nested-if statement
•
• var i = 20;
•
• if (i == 10)
• document.wrte("i is 10");
• else if (i == 15)
• document.wrte("i is 15");
• else if (i == 20)
• document.wrte("i is 20");
• else
• document.wrte("i is not present");
• < /script>
Switch case
• The switch case statement in JavaScript is also
used for decision making purposes.

• The switch case statement is a multiway


branch statement. It provides an easy way to
dispatch execution to different parts of code
based on the value of the expression.
syntax
• switch (expression)
• {
• case value1: statement1;
• break;
• case value2: statement2;
• break; . .

• case valueN: statementN;


• break;

• default: statementDefault;
• }
• <script type = "text/javascript">
•
• // JavaScript program to illustrate switch-case
•
• var i = 9;
•
• switch (i)
• {
• case 0:
• document.write("i is zero.");
• break;
• case 1:
• document.write("i is one.");
• break;
• case 2:
• document.write("i is two.");
• break;
• default:
• document.write("i is greater than 2.");
• }
•
• </script>
while loop
• The most basic loop in JavaScript is
the while loop which would be discussed in
this chapter. The purpose of a while loop is to
execute a statement or code block repeatedly
as long as an expression is true. Once the
expression becomes false, the loop
terminates.
Flow chart
Syntax

• The syntax of while loop in JavaScript is as


follows −
• while (expression)
• {
Statement(s) to be executed if expression is
true
• }
example
• <html>
• <head>
• <script type="text/javascript">
• document.write("<b>Using while loops </b><br />");
• var i = 0, j = 1, k;
• document.write("Fibonacci series less than 40<br />");
• while(i<40)
• {
• document.write(i + "<br />");
• k = i+j;
• i = j;
• j = k;
• }
• </script>
• </head>
• <body>
• </body>
• </html>
The do...while Loop

• The do...while loop is similar to the while loop


except that the condition check happens at
the end of the loop. This means that the loop
will always be executed at least once, even if
the condition is false.
Flow chart
Syntax

• The syntax for do-while loop in JavaScript is as


follows −
• do {
• Statement(s) to be executed;
• } while (expression);

• Note − Don’t miss the semicolon used at the


end of the do...while loop.
example
• <html>
• <head>
• <script type="text/javascript">
• document.write("<b>Using do...while loops </b><br />");
• var i = 2;
• document.write("Even numbers less than 20<br />");
• do
• {
• document.write(i + "<br />");
• i = i + 2;
• }while(i<20)
• </script>
• </head>
• <body>
• </body>
• </html>
for
• The 'for' loop is the most compact form of looping. It
includes the following three important parts −
• The loop initialization where we initialize our counter
to a starting value. The initialization statement is
executed before the loop begins.
• The test statement which will test if a given condition
is true or not. If the condition is true, then the code
given inside the loop will be executed, otherwise the
control will come out of the loop.
• The iteration statement where you can increase or
decrease your counter.
Flow chart
Syntax

• The syntax of for loop is JavaScript is as


follows −
• for (initialization; test condition; iteration
statement)
• {
• Statement(s) to be executed if test condition is
true
• }
example
• <html>
• <head>
• <script type="text/javascript">
• var students = new Array("John", "Ann", "Aaron", "Edwin",
"Elizabeth");
• document.write("<b>Using for loops </b><br />");
• for (i=0;i<students.length;i++)
• {
• document.write(students[i] + "<br />");
• }
• </script>
• </head>
• <body>
• </body>
• </html>
Object creation and modification
• Objects can be created with new expression
• The most basic object is one that uses
the Object constructor, as in

var myObject = new Object();


- The new object has no properties - a blank object

- Properties can be added to an object, any time


var myAirplane = new Object(); myAirplane.make =
"Cessna"; myAirplane.model = "Centurian";
•
• //Create an object in the other way var my_car =
{make: "ford", model: "Fusion"};

- Objects can be nested, so a property could be


itself another object, created with new

- Properties can be accessed by dot notation or in


array notation, as in

var property1 = myAirplane["model"];


-
• A property can be deleted with delete

• delete myAirplane.model;
• Another Loop Statement (an
iterator)for (identifier in object) statement or
compound

• for (var prop in myAirplane)


• document.write(prop + ": " + myAirplane[prop]
+ "<br />");
Example

• <html lang = "en">


• <head> <title> Object Creation and Modification </title>
• </head>
• <body>
• <script>
• var myStudent = new Object();
• myStudent.id = "000-091-111";
• myStudent.name = "Steven Turner";
• myStudent.phone = "901-444-2222";
• myStudent.gpa = 3.5;
• for(var prop in myStudent)
• document.write(prop, ": ", myStudent[prop], "<br />");
• </script>
• </body>
• </html>
output
JavaScript Array

• JavaScript array is an object that represents a


collection of similar type of elements.
• There are 3 ways to construct array in JavaScript
• By array literal
• By creating instance of Array directly (using new
keyword)
• By using an Array constructor (using new
keyword)
1) JavaScript array literal

• The syntax of creating array using array literal


is given below:

• var arrayname=[value1,value2.....valueN];
Ex program
• <script>
• var emp=["Sonoo","Vimal","Ratan"];
• for (i=0;i<emp.length;i++){
• document.write(emp[i] + "<br/>");
• }
• </script>
Output of the above example

• Sonoo
Vimal
Ratan
2) JavaScript Array directly (new
keyword)
• The syntax of creating array directly is given
below:

• var arrayname=new Array();


Ex program
• <script>
• var i;
• var emp = new Array();
• emp[0] = "Arun";
• emp[1] = "Varun";
• emp[2] = "John";
•
• for (i=0;i<emp.length;i++){
• document.write(emp[i] + "<br>");
• }
• </script>
Output of the above example
• Arun
Varun
John

•
3) JavaScript array constructor (new
keyword)
• Here, you need to create instance of array by
passing arguments in constructor so that we
don't have to provide value explicitly.
• <script>
• var emp=new Array("Jai","Vijay","Smith");
• for (i=0;i<emp.length;i++){
• document.write(emp[i] + "<br>");
• }
• </script>
Output of the above example
• Jai
Vijay
Smith
JavaScript Array Methods

• concat()It returns a new array object that


contains two or more merged arrays.

• reverse()It reverses the elements of given


array.
• sort()It returns the element of the given array
in a sorted order.
pop() It removes and returns the last
element of an array.
push() It adds one or more elements to
the end of an array
Creating and Initializing Arrays In
Javascript
• <html>
• <head> <title>Basic Javascript Array Example</title>
• <script language="javascript">
• // Empty array
• var empty = [];
• // Array containing initial elements.
• var fruits = ['apple', 'orange', 'kiwi']; alert(fruits[1]);
• </script>
• </head>
• <body> </body> </html>
output
• You can also use push() to 'push' a new
element onto the end of the array,
or unshift() to add elements to the start of an
array:
Adding new elements to the end of // the
array:
• fruits[3] = 'banana';
• fruits[4] = 'pear';
or
• fruits.push('grape');
• fruits.push('raspberry');
Multidimensional Arrays in Javascript

• You can also create multidimensional arrays.


The sub-arrays do not have to be all the same
length.
var stuff = [ [1, 2, 3],
['one', 'two', 'three'],
['apple', 'orange', 'banana', 'kiwi'] ];

alert(stuff[2][1]);
output
Javascript Array Sort: Sorting Arrays in
Javascript
• To sort an array in javascript, use
the sort() function.
• You can only use sort() by itself to sort arrays
in ascending alphabetical order;
• if you try to apply it to an array of numbers,
they will get sorted alphabetically.
• var fruits = ['apple', 'orange', 'banana'];
• var numbers = [10, 20, 2, 3, 0, 500];
• fruits.sort();
• numbers.sort();
• // We defined show array earlier.
show_array(fruits);
• show_array(numbers);
output
• // Sort in ascending numerical order. numbers.sort(function(a, b)
• {
• if(a > b)
• {
• return 1; }
• else if(a < b)
• {
• return -1; }
• else {
• return 0; } });
• // We defined show array earlier.

• show_array(numbers);
output
JavaScript Functions

• Functions are one of the fundamental building blocks in


JavaScript.

• A function is a JavaScript procedure—a set of statements


that performs a task or calculates a value.

• JavaScript functions are used to perform operations. We


can call JavaScript function many times to reuse the code.

• A function is a group of reusable code which can be called


anywhere in your program. This eliminates the need of
writing the same code again and again.
Advantage of JavaScript function

• There are mainly two advantages of JavaScript


functions.
• Code reusability: We can call a function
several times so it save coding.
• Less coding: It makes our program compact.
We don’t need to write many lines of code
each time to perform a common task.
JavaScript Function Syntax

• function functionName([arg1, arg2, ...argN])


• {
• //code to be executed
• }
JavaScript Function Example

• <script>
• function msg(){
• alert("hello! this is message");
• }
• </script>
• <input type="button" onclick="msg()" value="
call function"/>
Output of the above example
Ex:2
• <html>
• <head>
• <script type = "text/javascript">
• function sayHello(name, age) {
• document.write (name + " is " + age + " years old."); }
• </script> </head>
• <body>
• <p>Click the following button to call the function</p> <form>
• <input type = "button" onclick = "sayHello('Zara', 7)" value = "Say
Hello">
• </form>
• <p>Use different parameters inside the function and then try...</p>
</body> </html>
Output
javaScript Function Object

• In JavaScript, the purpose of Function constructor is to


create a new Function object. It executes the code
globally.
• Syntax
• new Function ([arg1[, arg2[, ....argn]],] functionBody)
• Parameter
• arg1, arg2, .... , argn - It represents the argument used
by function.
• functionBody - It represents the function definition.
JavaScript Function Methods

• apply()It is used to call a function contains this


value and a single array of arguments.
• bind()It is used to create a new function.
• call()It is used to call a function contains this
value and an argument list.
• toString()It returns the result in a form of a
string.
JavaScript Function Object Examples

• <script>
• var add=new Function("num1","num2","retur
n num1+num2");
• document.writeln(add(2,5));
• </script>

• Output:7
Ex:2
• <script>
• var pow=new Function("num1","num2","retur
n Math.pow(num1,num2)");
• document.writeln(pow(2,3));
• </script>

• Output:8
Constructors
• Constructors are like regular functions, but we
use them with the new keyword. There are
two types of constructors:
• built-in constructors such as Array and Object,
which are available automatically in the
execution environment at runtime;
• and custom constructors, which define
properties and methods for your own type of
object.
• A constructor is useful when you want to create
multiple similar objects with the same properties
and methods.
• Syntax:
• function Book()
• {
• unfinished code
• }
• var myBook = new Book();
• <html>
• <body>

• <h2>JavaScript Object Constructors</h2>

• <p id="demo"></p>

• <script>
• // Constructor function for Person objects
• function Person(first, last, age, eye) {
• this.firstName = first;
• this.lastName = last;
• this.age = age;
• this.eyeColor = eye;
• }
• // Create a Person object
• var myFather = new Person("John", "Doe", 50, "blue");

• // Display age
• document.getElementById("demo").innerHTML =
• "My father is " + myFather.age + ".";
• </script>

• </body>
• </html>
output
• JavaScript Object Constructors

• My father is 50.
Adding a Property to a Constructor

• You cannot add a new property to an object


constructor the same way you add a new
property to an existing object:
• <html>
• <body>

• <h2>JavaScript Object Constructors</h2>

• <p>You cannot add a new property to a constructor function.</p>

• <p id="demo"></p>

• <script>

• // Constructor function for Person objects


• function Person(first, last, age, eye) {
• this.firstName = first;
• this.lastName = last;
• this.age = age;
• this.eyeColor = eye;
• }
• // You can NOT add a new property to a constructor function
• Person.nationality = "English";

• // Create 2 Person objects


• var myFather = new Person("John", "Doe", 50, "blue");
• var myMother = new Person("Sally", "Rally", 48, "green");

• // Display nationality
• document.getElementById("demo").innerHTML =
• "The nationality of my father is " + myFather.nationality;
• </script>

• </body>
• </html>
output
• JavaScript Object Constructors
• You cannot add a new property to a
constructor function.
• The nationality of my father is undefined
Adding a Method to a Constructor
• <html>
• <body>

• <h2>JavaScript Object Constructors</h2>

• <p id="demo"></p>

• <script>

• // Constructor function for Person objects


• function Person(first, last, age, eye) {
• this.firstName = first;
• this.lastName = last;
• this.age = age;
• this.eyeColor = eye;
• this.name = function() {
• return this.firstName + " " + this.lastName
• };
• }
• // Create a Person object
• var myFather = new Person("John", "Doe", 50, "blue");

• // Display full name


• document.getElementById("demo").innerHTML =
• "My father is " + myFather.name();

• </script>

• </body>
• </html>
output
• JavaScript Object Constructors
• My father is John Doe
Built-in JavaScript Constructors

• var x1 = new Object(); // A new Object object


var x2 = new String(); // A new String object
var x3 = new Number(); // A new Number object
var x4 = new Boolean(); // A new Boolean object
var x5 = new Array(); // A new Array object
var x6 = new RegExp(); // A new RegExp object
var x7 = new Function(); // A new Function object
var x8 = new Date(); // A new Date object
Java Script Regular Expressions
• What Is a Regular Expression?
• A regular expression is a sequence of
characters that forms a search pattern.
• When you search for data in a text, you can
use this search pattern to describe what you
are searching for.
• A regular expression can be a single character,
or a more complicated pattern.
• Regular expressions can be used to perform all
types of text search and text
replace operations.
Syntax

• /pattern/modifiers;

• Ex:
var patt = /w3schools/i;
• Example explained:
• /w3schools/i is a regular expression.
• w3schools is a pattern (to be used in a search).
• i is a modifier (modifies the search to be case-
insensitive).
Using String Methods

• In JavaScript, regular expressions are often


used with the two string
methods: search() and replace().
• The search() method uses an expression to
search for a match, and returns the position of
the match.
• The replace() method returns a modified
string where the pattern is replaced.
Using String search() With a String
• <html>
• <body>

• <h2>JavaScript String Methods</h2>

• <p>Search a string for "W3Schools", and display the position of the


match:</p>

• <p id="demo"></p>

• <script>
• var str = "Visit W3Schools!";
• var n = str.search("W3Schools");
• document.getElementById("demo").innerHTML = n;
• </script>

• </body>
• </html>
output
• JavaScript String Methods
• Search a string for "W3Schools", and display
the position of the match:
• 6
Using String search() With a Regular
Expression
• <html>
• <body>

• <h2>JavaScript Regular Expressions</h2>

• <p>Search a string for "w3Schools", and display the position of the match:</p>

• <p id="demo"></p>

• <script>
• var str = "Visit W3Schools!";
• var n = str.search(/w3Schools/i);
• document.getElementById("demo").innerHTML = n;
• </script>

• </body>
• </html>
Use String replace() With a Regular
• <html>
Expression
• <body>

• <h2>JavaScript Regular Expressions</h2>

• <p>Replace "microsoft" with "W3Schools" in the paragraph below:</p>

• <button onclick="myFunction()">Try it</button>

• <p id="demo">Please visit Microsoft and Microsoft!</p>

• <script>
• function myFunction() {
• var str = document.getElementById("demo").innerHTML;
• var txt = str.replace(/microsoft/i,"W3Schools");
• document.getElementById("demo").innerHTML = txt;
• }
• </script>

• </body>
• </html>
example
• JavaScript Regular Expressions
• Replace "microsoft" with "W3Schools" in the
paragraph below:
• Try it
• Please visit Microsoft and Microsoft!
Regular Expression Modifiers
Modifiers can be used to perform case-insensitive more global
searches :
Regular Expression Patterns
Brackets are used to find a range of characters:
DHTML
• Dynamic HTML can be used to enchance the
interactivity of a web page.
• The interactivity is at the client end without
any extra transactions to the server.
• DHTML uses four different technologies.

DHTML = HTML + CSS + JavaScript + DOM


• You are familiar with the first three.
• DOM (Document Object Model) is an Application
Programming Interface (API) to interface with the
browser software. DOM is quite general and can
be used with XML documents and programming
languages like Java, Perl, and C++.
• A subset of DOM, namely HTML DOM is usually
used to interface HTML documents and
JavaScript.
POSITIONING ELEMENTS
• The position property in CSS tells about the
method of positioning for an element or an HTML
entity. There are five different types of position
property available in CSS:
• Fixed
• Static
• Relative
• Absolute
• Sticky
Fixed

• Any HTML element with position: fixed property


will be positioned relative to the viewport. An
element with fixed positioning allows it to remain
at the same position even we scroll the page. We
can set the position of the element using the top,
right, bottom, left.
• <!-->html code<-->
• <body>
• <div class="fixed">This div has <span>position:
fixed;</span></div>
• <pre> Lorem ipsum dolor sits amet, consectetur
adipiscing elit. Nunc eget mauris at urna hendrerit iaculis
sit amet et ipsum. Maecenas nec mi eget leo malesuada
vehicula. Nam eget velit maximus, elementum ante
pretium, aliquet felis. Aliquam quis turpis laoreet, porttitor
lacus at, posuere massa.
•
• </pre>
• </body>
CSS
• // css code
• body
• {
• margin: 0;
• padding: 20px;
• font-family: sans-serif;
• background: #efefef;
• }

• .fixed
• {
• position: fixed;
• background: #cc0000;
• color: #ffffff;
• padding: 30px;
• top: 50;
• left: 10;
• }
• span
• {
• padding: 5px;
• border: 1px #ffffff dotted;
• }
2. Static

• This method of positioning is set by default. If


we don’t mention the method of positioning
for any element, the element has
the position:static method by default. By
defining Static, the top, right, bottom and left
will not have any control over the element.
The element will be positioned with the
normal flow of the page.
• <body>
• <div class="static">This div has <span>position:
static;</span></div>
• <pre>
• Lorem ipsum dolor sits amet, consectetur adipiscing elit.
• Nunc eget mauris at urna hendrerit iaculis sit amet et ipsum.
• Maecenas nec mi eget leo malesuada vehicula. Nam eget
velit maximus, elementum ante pretium, aliquet felis.
• Aliquam quis turpis laoreet, porttitor lacus at, posuere
massa.
• </pre>
• </body>
CSS
• // css code
• body
• {
• margin: 0;
• padding: 20px;
• font-family: sans-serif;
• background: #efefef;
• }

• .static
• {
• position: static;
• background: #cc0000;
• color: #ffffff;
• padding: 30px;
• }

• span
• {
• padding: 5px;
• border: 1px #ffffff dotted;
• }
3. Relative

• An element with position: relative is


positioned relatively with the other elements
which are sitting at top of it. If we set its top,
right, bottom or left, other elements will not
fill up the gap left by this element.
• <!-->html code<-->
• <body>
• <div class="relative">This div has
• <span>position: relative;</span></div>
• <pre>
• Lorem ipsum dolor sits amet, consectetur adipiscing elit.
• Nunc eget mauris at urna hendrerit iaculis sit amet et ipsum.
• Maecenas nec mi eget leo malesuada vehicula.
• Nam eget velit maximus, elementum ante pretium, aliquet felis.
• Aliquam quis turpis laoreet, porttitor lacus at, posuere massa.
• </pre>
• </body>
CSS
• // css code
• body
• {
• margin: 0;
• padding: 20px;
• font-family: sans-serif;
• background: #efefef;
• }

• .relative
• {
• position: relative;
• background: #cc0000;
• color: #ffffff;
• padding: 30px;
• }

• span
• {
• padding: 5px;
• border: 1px #ffffff dotted;
• }
4. Absolute

• An element with position: absolute will be


positioned with respect to its parent.
Positioning of this element does not depend
upon its siblings or the elements which are at
same level.
• <!-->html code<-->
• <body>
• <pre>
• Lorem ipsum dolor sits amet, consectetur adipiscing elit.
• Nunc eget mauris at urna hendrerit iaculis sit amet et ipsum.
• Maecenas nec mi eget leo malesuada vehicula.
• <div class="relative">
• <p>This div has <span><strong>position: relative;</strong>
• </span></p>
• <div class="absolute">
• This div has <span><strong>position:
• absolute;</strong></span>
• </div>
• </div>
• Nam eget velit maximus, elementum ante pretium, aliquet felis.
• Aliquam quis turpis laoreet, porttitor lacus at, posuere massa.
• </pre>
• </body>
CSS
• // css code
• body
• {
• margin: 0;
• padding: 20px;
• font-family: sans-serif;
• background: #efefef;
• }

• .absolute
• {
• position: absolute ;
• background: #cc0000;
• color: #ffffff;
• padding: 30px;
• font-size: 15px;
• bottom: 20px;
• right: 20px;
• }
• .relative
• {
• position: relative;
• background: #aad000;
• height: 300px;
• font-size: 30px;
• border: 1px solid #121212;
• text-align: center;
• }

• span
• {
• padding: 5px;
• border: 1px #ffffff dotted;
• }

• pre
• {
• padding: 20px;
• border: 1px solid #000000;
• }
5. Sticky

• Element with position: sticky and top:


0 played a role between fixed & relative based
on the position where it is placed. If the
element is placed at the middle of the
document then when user scrolls the
document, the sticky element starts scrolling
until it touch the top.
• <!-->html code<-->
• <body>
• <pre>
• Lorem ipsum dolor sits amet, consectetur adipiscing elit.
• Nunc eget mauris at urna hendrerit iaculis sit amet et ipsum.
• Maecenas nec mi eget leo malesuada vehicula.
• <div class="sticky">
• This div has <span>position: sticky;</span>
• </div>
• Nam eget velit maximus, elementum ante pretium, aliquet
felis.
• Aliquam quis turpis laoreet, porttitor lacus at, posuere massa.
• </pre>
• </body>
CSS
• // css code
• body
• {
• margin: 0;
• padding: 20px;
• font-family: sans-serif;
• background: #efefef;
• }

• .sticky
• {
• position: sticky;
• background: #cc0000;
• color: #ffffff;
• padding: 30px;
• top: 10px;
• right: 50px;
• }
• span
• {
• padding: 5px;
• border: 1px #ffffff dotted;
• }

• pre
• {
• padding: 20px;
• border: 1px solid #000000;
• }

You might also like