JavaScript Basics Three evening classes A, B and C

JavaScript Basics Three evening classes A, B and C
Version 2.4 June 23, 2018

HTML Nomenclature: <body> . . . </body> or
Elements, Tags, Attributes and Attribute Values A Text file with extension .htm or .html Composed of HTML elements, like <body> </body> or <p> </p>

HTML Nomenclature: Elements
Most elements (about 100) have an opening tag <body> and a closing tag </body> A few elements (about 10) have no closing tags Examples: <img> (image) <br> (break) <hr> (horizontal rule) <meta> ("Meta" information)

“Legal" web page must follow some rules. Examples: One and only one <html> element. One and only one <head> element. One and only one <body> element. One and only one <title> element.

“Legal" web page must follow some rules. Examples: One and only one <html> element. One and only one <head> element. One and only one <body> element. One and only one <title> element. The <html> element contains just 2 elements, <head> and <body>. The <title> element always inside the <head> element.

Opening tag of an HTML element can have attributes and attribute values. <body class="artistic" onLoad="init()"> attribute attribute

Opening tag of an HTML element can have attributes and attribute values. <body class="artistic" onLoad="init()"> Attribute Value Attribute Value

Opening tag of an HTML element can have attributes and attribute values. <body class="artistic" onLoad="init()"> An HTML element attribute is separated from its attribute value with an equal sign.

<body class="artistic" onLoad="init()"> HTML attribute names should be in Camel case (convention) Attribute values should be in either single or double quotes HTML element names and attribute names are NEVER in quotes.

CSS – Cascading Style Sheet
Web pages optionally use CSS. 99.99% of all web pages use CSS.

CSS Syntax body { background-color: blue; color: white; } p {
background-color: red; color: blue;

CSS Nomenclature: Selector, Property, Property Value selector selector
body { background-color: blue; color: white; } p { background-color: red; color: blue; selector

CSS Nomenclature: Selector, Property, Property Value properties body {
background-color : blue; color : white; } p { background-color : red; color :blue; properties

CSS Nomenclature: Selector, Property, Property Value property values
body { background-color: blue ; color: white ; } p { background-color: red; color: blue ; property values

Three Ways to place CSS in Web Page:
1. Embedded <style> element in <head> <head> . . . <style> body { background-color: blue; color: white; } </style> </head>

Three Ways to place CSS in Web Page:
2. External .css file with <link> element my.html <head> . . . <link rel="stylesheet" href="my.css"> </head> my.css body { background-color: blue; color: white; }

Three Ways to put CSS in a Web Page:
3. In-line css with a style attribute: <body style="background-color:blue; color:white">

Problem 1: from downloaded js1.html on
Create web page js1-embedded-css.html from downloaded js1.html on scottsdevelopers.com | Resources | Intro to JavaScript | Class B Add embedded CSS with a <style> element that Changes webpage background color to blue Changes the paragraph text color to yellow

Problem 2: Use Output should be identical to Problem 1.
Create web page js1-external-css.html and js1-external-css.css from js1.html Use <link rel="stylesheet" href="js1-external-css.css"> Output should be identical to Problem 1.

Problem 3: Create web page js1-inline-css.html from js1.html Use <body style="background-color:blue;"> <p style="color:yellow;"> Output should be identical to Problem 1.

Variables, Data Types, Primitive Data Types, Functions, Objects
JavaScript Nomenclature: Variables, Data Types, Primitive Data Types, Functions, Objects

JavaScript Nomenclature: Variables
variables can be primitive or non-primitive.

Non-Primitive Data Types:
Number Character String Boolean Non-Primitive Data Types: Objects .

var numStudents = 23; (Number) var name="Scott"; (String)
Example Primitive Data Types: var numStudents = 23; (Number) var name="Scott"; (String) var isHappy = true; (Boolean) .

var car = { year:1970, make:'BMW', color:'silver', isDiesel: true }
Example Object: var car = { year:1970, make:'BMW', color:'silver', isDiesel: true }

Example Object: var car = { year:1970, make:'BMW', color:'silver', isDiesel: true } variable

Example Object: var car = { year:1970, make:'BMW', color:'silver', isDiesel: true } Object

Example Object: var car = { year:1970, make:'BMW', color:'silver', isDiesel: true } Properties

Example Property: year:1970 Name:Value Pair

var hotel = { chain:'Best Western', name:'The Retreat', numRooms: 24,
Another Example Object: var hotel = { chain:'Best Western', name:'The Retreat', numRooms: 24, hasPool: false }

Primitive Data Types: Object Data Types
Built into the JavaScript Language. Object Data Types Created by Programmers to represent the real world.

Property values of an Object accessed with “Dot” notation Example:
alert("hotel name is " + hotel.name); "

Problem 4: Store Hotel Data in two Hotel Objects Step 1
Download to Atom and Desktop js5.html from scottsdevelopers.com | Resources | Intro to JavaScript | Class B

Problem 4: Compare web page and source

Convert this data into Objects
Problem 4: Convert this data into Objects

Problem 4: Store Hotel Data in two Hotel Objects

Problem 4: Store Hotel Data in two Hotel Objects Step 2
Download to Atom and Desktop js5.js from scottsdevelopers.com | Resources | Intro to JavaScript | Class B

Problem 4: Compare data in web page source HTML content with equivalent JavaScript Objects:

Problem 4: Information is content text in HTML elements

Problem 4: Information is in JavaScript Object variables

Problem 4: Step 3 Create an external <script> to the
JavaScript file js5.js with <script src="js5.js"></script> in the <head>

Problem 4: Step 3 . . . <style> </style>
<head> . . . <style> </style> <script src="js5.js"></script> </head>

Problem 4: Step 4 Change pure HTML lines: to
<p>Chain: Best Western </p> to HTML and JavaScript lines: <p>Chain: hotel1.chain </p>

Problem 4: Step 4

Problem 4: Step 4 Want to see it again?

Problem 4: Step 4

Problem 4: Step 5 Look at web page:

You can’t mix HTML

With JavaScript

How to write JavaScript in HTML?

This is where we want to write JavaScript:

Need to insert a <script> element:

How about this?:

Time for a new JavaScript function! document.write("Hello, World!");

Time for a new JavaScript function!
document.write("Hello, World!"); Writes directly to the web page from JavaScript.

This is the JavaScript to write out the hotel1
This is the JavaScript to write out the hotel1.chain variable to the screen: <script> document.write(hotel1.chain); </script>

Complete Solution: <p>Chain: <script>document.write(hotel1.chain);</script></p>

Problem 4: <h2> Hotel 1 </h2>
<p>Chain: <script> document.write(hotel1.chain) </script> </p> <p>Name: <script> document.write(hotel1.name) </script> </p> <p>Number of Rooms: <script> document.write(hotel1.numRooms) </script> </p> <p>Has Pool?: <script> document.write(hotel1.hasPool) </script> </p> <h2> Hotel 2 </h2> <p>Chain: <script> document.write(hotel2.chain) </script> </p> <p>Name: <script> document.write(hotel2.name) </script> </p> <p>Number of Rooms: <script> document.write(hotel2.numRooms) </script> </p> <p>Has Pool?: <script> document.write(hotel2.hasPool) </script> </p>

Problem 4:

Homework: Update js5.html with a <button> which removes two rooms from both hotels and removes the pool from the Radisson.

JavaScript Basics Three evening classes A, B and C

Similar presentations

Presentation on theme: "JavaScript Basics Three evening classes A, B and C"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

JavaScript Basics Three evening classes A, B and C

Similar presentations

Presentation on theme: "JavaScript Basics Three evening classes A, B and C"— Presentation transcript:

Similar presentations

About project

Feedback