Javascript Handout 1.0 Javascript

Javascript
Handout 1.0
JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
Web pages are not the only place where JavaScript is used. Many desktop and server programs use JavaScript. Node.js is
the best known. Some databases, like MongoDB and CouchDB, also use JavaScript as their programming language.
 JavaScript and Java are completely different languages, both in concept and design.
Java creates applications that run in a virtual machine or browser while JavaScript code is run on a browser only.
JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997.
ECMA-262 is the official name of the standard. ECMAScript is the official name of the language.
Review:
HTML
HTML is the standard markup language for creating Web pages.
 HTML stands for Hyper Text Markup Language
 HTML describes the structure of Web pages using markup
 HTML elements are the building blocks of HTML pages
 HTML elements are represented by tags
 HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
 Browsers do not display the HTML tags, but use them to render the content of the page
 The <!DOCTYPE html> declaration defines this document to be HTML5

 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the document
 The <title> element specifies a title for the document
 The <body> element contains the visible page content
 The <h1> element defines a large heading
 The <p> element defines a paragraph
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
HTML Page Structure

Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Note: Only the content inside the <body> section (the white area above) is displayed in a browser.
HTML Elements
An HTML element usually consists of a start tag and end tag, with the content inserted in between:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:
<p>My first paragraph.</p>
Attributes provide additional information about HTML elements.
HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"
Example
 <a href="https://www.w3schools.com">This is a link</a>
CSS
CSS is a language that describes the style of an HTML document.
CSS describes how HTML elements should be displayed.
What is CSS?
 CSS stands for Cascading Style Sheets

 CSS describes how HTML elements are to be displayed on screen, paper, or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External stylesheets are stored in CSS files
CSS Solved a Big Problem
HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web
developers. Development of large websites, where fonts and color information were added to every single page,
became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
CSS removed the style formatting from the HTML page!
CSS rule-set consists of a selector and a declaration block:
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
In the following example all <p> elements will be center-aligned, with a red text color:
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
 External style sheet

 Internal style sheet
 Inline style
External Style Sheet
With an external style sheet, you can change the look of an entire website by changing just one file!
Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes
inside the <head> section:
Example
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file
must be saved with a .css extension.
Here is how the "mystyle.css" looks:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Internal Style Sheet
An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the <head> section of an HTML page:
Example
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Inline Styles
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.
The example below shows how to change the color and the left margin of a <h1> element:
Example
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
Introduction:
Using The class Attribute
The class attribute specifies one or more class names for an HTML element.
The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name.
In CSS, to select elements with a specific class, write a period (.) character, followed by the name of the class:
Example
Use CSS to style all elements with the class name "city":
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
</style>
</head>
<body>
<h2>The class Attribute</h2>
<p>Use CSS to style elements with the class name "city":</p>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
Using The class Attribute in JavaScript
JavaScript can access elements with a specified class name by using the getElementsByClassName()method:
<!DOCTYPE html>
<html>
<body>
<h2>Using The class Attribute in JavaScript</h2>
<p>Click the button, to hide all elements with the class name "city", with JavaScript:</p>
<button onclick="myFunction()">Hide elements</button>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
</script>
</body>
</html>
Using The id Attribute
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
The id value can be used by CSS and JavaScript to perform certain tasks for a unique element with the specified id value.
In CSS, to select an element with a specific id, write a hash (#) character, followed by the id of the element:
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
</style>
</head>
<body>
<h2>The id Attribute</h2>
<p>Use CSS to style an element with the id "myHeader":</p>
<h1 id="myHeader">My Header</h1>
</body>
</html>
Using The id Attribute in JavaScript
JavaScript can access an element with a specified id by using the getElementById() method:
<!DOCTYPE html>
<html>
<body>
<h2>Using The id Attribute in JavaScript</h2>
<p>JavaScript can access an element with a specified id by using the getElementById() method:</p>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
</script>
</body>
</html>

Javascript Handout 1.0 Javascript

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Javascript Handout 1.0 Javascript

Diunggah oleh

Hak Cipta:

Format Tersedia

Javascript

2. CSS to specify the layout of web pages

3. JavaScript to program the behavior of web pages

 HTML stands for Hyper Text Markup Language

 HTML describes the structure of Web pages using markup

 HTML elements are the building blocks of HTML pages

 HTML elements are represented by tags

 The <!DOCTYPE html> declaration defines this document to be HTML5

HTML tags are element names surrounded by angle brackets:

<tagname>content goes here...</tagname>

HTML Page Structure

<tagname>Content goes here...</tagname>

<p>My first paragraph.</p>

Attributes provide additional information about HTML elements.

 All HTML elements can have attributes

 Attributes provide additional information about an element

 Attributes are always specified in the start tag

 Attributes usually come in name/value pairs like: name="value"

 <a href="https://www.w3schools.com">This is a link</a>

CSS describes how HTML elements should be displayed.

 CSS stands for Cascading Style Sheets

CSS Solved a Big Problem

HTML was created to describe the content of a web page, like:

CSS removed the style formatting from the HTML page!

CSS rule-set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

 External style sheet

External Style Sheet

Here is how the "mystyle.css" looks:

<h2>The class Attribute</h2>

<p>Use CSS to style elements with the class name "city":</p>

<p>London is the capital of England.</p>

<p>Paris is the capital of France.</p>

<p>Tokyo is the capital of Japan.</p>

<h2>Using The class Attribute in JavaScript</h2>

<button onclick="myFunction()">Hide elements</button>

<p>London is the capital of England.</p>

<p>Paris is the capital of France.</p>

<p>Tokyo is the capital of Japan.</p>

for (var i = 0; i < x.length; i++) {

<p>Use CSS to style an element with the id "myHeader":</p>

<h1 id="myHeader">My Header</h1>

Using The id Attribute in JavaScript

<h2>Using The id Attribute in JavaScript</h2>

<h1 id="myHeader">Hello World!</h1>

<button onclick="displayResult()">Change text</button>

document.getElementById("myHeader").innerHTML = "Have a nice day!";

Anda mungkin juga menyukai