Web Design

The Web

 

HTML Meaning and Content
CSS Presentation & Style
JavaScript & jQuery

Scripting, manipulating the DOM

Excellent resource: W3 Schools

JavaScript Can Change HTML Content

document.getElementById("demo").innerHTML = "Hello JavaScript";

JavaScript Can Change HTML Styles (CSS)

document.getElementById("demo").style.fontSize = "35px";

JavaScript Can Hide HTML Elements

document.getElementById("demo").style.display = "none";

JavaScript Can Show HTML Elements

document.getElementById("demo").style.display = "block";

The Beginnings

  • Types
  • Variables
  • Operations
  • Functions

Primitive Types

  • Number (64 bit floating point)
  • String (16 bit Unicode)
  • Boolean
  • BigInt
  • Symbol
  • undefined
  • null (sort of)

JavaScript Strings

  • JavaScript strings are for storing and manipulating text.

  • A JavaScript string is zero or more characters written inside quotes.

  • Strings are very robust and we can manipulate them in a variety of ways. For simplicity we will stick to the basics.

  • Let's play with strings demo

The Beginnings

  • Types
  • Variables
  • Operations
  • Functions

Text

Variables

Declaration-> let age = 61

reassign -> age = 24

Operations -> let nextAge = age + 1

 

The Beginnings

  • Types
  • Variables
  • Operations
  • Functions

Mathematical Operators

  • addition + (also see Strings)     
  • subtraction -
  • multiplication *
  • division /        

Boolean Logical Operators

  • and  &&                                        
  • or  ||
  • not  !

Comparison operators

  • equal to ==
  • equal value and equal type ===
  • greater than >                  
  • less than <
  • greater than or equal to >=
  • less than or equal to <=

The Beginnings

  • Types
  • Variables
  • Operations
  • Functions

What is a function?

A function is a block of reusable code written to perform a specific task. A function consists of a set of statements but executes as a single unit. In JavaScript, we have some browser built-in functions like alert(), prompt(), and confirm()

function nameOfFunction() {
	//some code here....
}

A function consists of:

  • Function keyword
  • The name of the function
  • Parentheses (which can take in parameters, or also be empty)
  • The body of the function (wrapped in curly braces).
function sayHello() {
	console.log("Hello world"); 
}

Here’s how to call the function:
sayHello();         
 //output: Hello world

Another example with parameters

function sum(num1, num2){
	return num1 + num2;
}

To invoke this function, we call it like this:

sum(1, 2);

//output: 3

Use the name of the function ->

<- Pass in values for the parameters
in the parentheses

Changing HTML with JavaScript

JavaScript Can Change HTML Content

document.getElementById("demo").innerHTML = "Hello JavaScript";

JavaScript Can Change HTML Styles (CSS)

document.getElementById("demo").style.fontSize = "35px";

JavaScript Can Hide HTML Elements

document.getElementById("demo").style.display = "none";

JavaScript Can Show HTML Elements

document.getElementById("demo").style.display = "block";

Each of these examples start with document.
What is being referred to?

Each browser Window object has the following:

 

Window object has:

  • Document (DOM)
  • History
  • Location
  • Screen
  • Storage
  • Console
  • GlobalEventHandlers
  • ...

This is what we are interacting with ->

This and the following pages use information from W3 Schools. There is a link to the content on the last slide of this section :)

When a web page is loaded, the browser creates a Document Object Model of the page. The HTML DOM model is constructed as a tree of Objects:

The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

document.getElementById("list").style.listStyleType = "square";

id="list"

Before

After

  • HTML DOM methods are actions you can perform (on HTML Elements).
  • HTML DOM properties are values (of HTML Elements) that you can set or change.
  • The HTML DOM can be accessed with JavaScript (and with other programming languages).
  • In the DOM, all HTML elements are defined as objects.
  • The programming interface is the properties and methods of each object.
  • A property is a value that you can get or set (like changing the content of an HTML element).
  • A method is an action you can do (like add or deleting an HTML element).

Accessing Elements

 
HTML
<html lang="en">
  <head>
    <title>getElementById example</title>
  </head>
  <body>
    <p id="para">Some text here</p>
    <button onclick="changeColor('blue');">blue</button>
    <button onclick="changeColor('red');">red</button>
  </body>
</html>
JavaScript
function changeColor(newColor) {
  const elem = document.getElementById("para");
  elem.style.color = newColor;
}
Result

In this example getElementById() is a method and elem.style.color accesses a property

Method Description
document.getElementById(id) Find an element by element id
document.getElementsByTagName(name) Find elements by tag name
document.getElementsByClassName(name) Find elements by class name

Finding HTML Elements

Changing HTML Elements

Property Description
element.innerHTML = new html content Change the inner HTML of an element
element.attribute = new value Change the attribute value of an HTML element
element.style.property = new style Change the style of an HTML element
Method Description
element.setAttribute(attribute, value) Change the attribute value of an HTML element

We can also add and delete elements, however we will not cover that this week. You can find more information about adding and deleting elements in your JavaScript & jQuery book :)

Online resources include: 

W3 schools JS HTML DOM

How do we include JavaScript code?

You don't have to get or download JavaScript. JavaScript is already running in your browser on your computer, on your tablet, and on your smart-phone. JavaScript is free to use for everyone.

We do however need to reference our code in our files. Much like CSS, you can put a script within the body, in the head of the page or in a separate JavaScript file using the .js extension.

In most cases:

In the body


 

 

In the header

 

 

 

In an external .js file