Internet and Web Technology (CLASS-4) [CSS & JS]

Ayes Chinmay
Internet
&
Web Technology
(CSS and JavaScript)

IWT Syllabus:
Module 2:
Java Script
Scripting: Java script: Introduction, statements, comments, variables, operators, documents,
forms, functions, objects, events, Strings, Numbers, Arrays, Date, Math, Random, Loops,
Regxp, errors, this, Let, Const., classes, debugging .
The HTML DOM (Document Object Model)
Introduction, DOM Methods, DOM Document, DOM Elements , DOM HTML, DOM CSS,
DOM Events, DOM Navigation, DOM Nodes , DOM Nodelist
The Browser Object Model (BOM)
The Window Object, Window Size, Window History, Window Navigator, Browser Detection,
JavaScript Timing Events, Cookies, Working on Cookies using Java script.

CSS:
 CSS stands for Cascaded Style Sheet.
 Wium Lie has proposed the concept of CSS in 1994 (26 years ago).
 The latest version of CSS 3 was published in 1999. World Wide Web
Consortium (W3C) defines the specifications of CSS.
 Father of HTML 5, CSS 3 => “Håkon Wium Lie”Håkon Wium Lie

Types of CSS:
1) External CSS
2) Internal CSS
3) Inline CSS

External CSS:
 With an external style sheet, you can change the look of an entire website by
changing just one file.
 Each HTML page must include a reference to the external style sheet file inside
the <link> element, inside the head section.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

Internal CSS:
 An inline style may be used to apply a unique style for a single element.
 To use inline styles, add the style attribute to the relevant element. The
style attribute can contain any CSS property.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: linen;}
h1 {color: maroon;
margin-left: 40px; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Inline CSS:
 An inline style may be used to apply a unique style for a single element.
 To use inline styles, add the style attribute to the relevant element. The
style attribute can contain any CSS property.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">
This is a heading
</h1>
<p style="color:red;">
This is a paragraph.
</p>
</body>
</html>

JavaScript:
 JavaScript enables interactive web pages and is an essential part of web
applications.
 First released in December 4, 1995 (24 years ago).
 JavaScript is the dominant client-side scripting language of the Web,
with 95% of websites using it for this purpose.
 All major web browsers have a built-in JavaScript engine that executes
the code on the user's device.
 "JavaScript" is a trademark of Oracle Corporation in the United States.
Brendan Eich

JavaScript Syntax:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Strings can be written with double or single quotes.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 'John Doe';
</script>
</body>
</html>

JavaScript Function:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<button type="button" onclick="myFunction1()">Try it1</button>
</body>
</html>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph
changed.";
}
function myFunction1() {
document.getElementById("demo").innerHTML = "Paragraph
changed1.";
}
</script>

JavaScript Random Function:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.random()</h2>
<p>Math.random() returns a random number between 0 (included) and 1
(excluded):</p>
<button onclick="check()"> Random </button>
<p id="demo"></p>
<script>
var a=10;
function check(){
document.getElementById("demo").innerHTML = a*Math.random();
}
</script>
</body>
</html>

JavaScript Array:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>JavaScript array elements are accessed using numeric indexes
(starting from 0).</p>
<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>

JavaScript Regular Expression:
 A regular expression is a sequence of characters that forms a search pattern.
 The search pattern can be used for text search and text replace operations.
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.

JavaScript replace() & search():
<!DOCTYPE html>
<html>
<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>
<!DOCTYPE html>
<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>

Model Questions:
1. The correct syntax for adding yellow as a background
colour in HTML is:
(a) < body style="background-color:yellow">
(b) <backgroundcolor>yellow</background color>
(c) <color.background="yellow">
(d) <backgrndcolor="yellow">
2. The HTML tag used to make a text italic is
(a) <italic> (b) <i>
(c) <textitalic> (d) <slantingtext>

Model Questions: (Cont.)
3. The HTML tag used to define an internal style sheet is
(a) <style> (b) <stylesheet>
(c) <css> (d) <internal link>
4. JavaScript is defined under which HTML element?
(a) <jscript> (b) <script>
(c) <scriptjava> (d) <define.js>
5. Which of the following statements is used for creating
a function?
(a) function=Functionname()
(b) function Functionname()
(c) function:Functionname()
(d) function "Functionname"

Internet and Web Technology (CLASS-4) [CSS & JS]

Recommended

More Related Content

What's hot (20)

Similar to Internet and Web Technology (CLASS-4) [CSS & JS] (20)

More from Ayes Chinmay (7)

Recently uploaded (20)

Internet and Web Technology (CLASS-4) [CSS & JS]