A static web page consist of HTML files, Image files, Media files and CSS files. All these can be stored together on a single folder or can be distributed in several folders.The main page or the default page is called usually "index.html". If this page exist this is the first open to see the content. Other pages may be connected to index page using a chain of links. A static web page do not need JavaScript.

To make a website you can edit the folder structure and the condent local on your computer.After you finish you can upload all content file by file to a server. Once the files are on the server, other people can visit your vebsite and see the content.It depends on the hosting plan where you should upload your files.This website is served by "Apache" that is an open source applica server. My defaul folder is called "public_html". In this folder I have created subfolder: /script.

It is not easy to purcese a hosting plan. You must know exactly what you are looking for so that you do not waste your money. To host a website on the internet you need a domain name. This will be used to create links and URL addresses. When you design a website you can use relative links to connect pages and images together. Visitors will need the link to the first page. The other pages will be visited using relative links.

URL is a string, having this format:

• protocol://domain/folder_name/file_name
• protocol://domain/folder_name/file_name?param=value
• protocol://domain/folder_name/file_name?param1=value&param2=value#hash

URL Anathomy

A static website is based on static HTML documents. These are files that hold text content and organize the display of the content using HTML tags. You have to learn HTML before you learn how to do a website.

• HTML document has hierarchical structure organized with "tags"
• One tag has a start tag an end tag that looks like this: <tag>content<tag/>
• The tag name establish the element type: <div>, <p>, <ul> and so on,
• The content, can be another element or multiple elements,
• Each element can have attributes: <tag attribute="value";...>.

In addition to static web pages you must learn some new HTML elements. These can be new tags and new attributes that we need to enhance the HTML pages for JavaScript interaction. Once we have design a page for JavaScript, we can interact with HTML and control its content using coding.

More HTML features:

• One HTML element can have a special kind of attribute is called "event attribute",
• An event attribute value is representing a JavaScript function name with parameters,
• A special HTML element can contain JavaScript code: <script>…</script>,
• JavaScript can be stored in external file with *.js extension,
• You can use one .js file in many HTML pages using: <script src="file.js">.

The secret ingredient: for a dynamic web site is in the Browser. That is the application used to render the HTML and display it on the screen. The Browser takes the HTML documents and build in memory a model for it. This is called: Document Object Model: (DOM) for short.

DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript. After you modify DOM, the browser gets a notification and it will refresh the display representation of the web page.

To learn how to modify DOM dynamicly you learn: First the DOM structure. Second, the API (Application Programming Interface). The Browser API is a set of functions, implemented for JavaScript or other language to interact with DOM.

DOM for short, is a logic tree structure. It has a root and nodes. The may contain other nodes. Each node has a specific type. There are two kind of relations between nodes: parent-child or sibling. When multiple nodes have same unique parent they are called sibling nodes and can be grouped together in an array.

DOM components:

Note: The relation between DOM components goes like this:

Document -> Node -> NodeList -> Node -> Attribute

API: for short is a set of methods and properties you can use to access and manipulate DOM components. Components are objects implemented using OOP. So they may inherit common methods that look alike. Since most doom components are nodes, you have a common behavior, but each node is specialized so you may have additional API depending on node class.

Note: Most common objects you are going to use in JavaScript are: Document, Window, Element. The following is a brief list of common APIs in web and XML scripting using the DOM.

Document API:

• document.getElementById(id)
• document.querySelector(selector)
• document.getElementsByTagName(name)
• document.createElement(name)
• parentNode.appendChild(node)

Element API:

• element.innerHTML
• element.style
• element.setAttribute()
• element.getAttribute()
• element.addEventListener()

Window API:

• window.content
• window.onload
• window.scrollTo()

Now you understand the basic idea to use JavaScript in HTML document. What else you can do?

• You can find one element by Id,
• You can find one or multiple elements by CSS selector,
• You can create new elements,
• You can remove elements,
• You can hide elements from view,
• You can show hidden elements,
• You can change elements attributes and style,
• You can associate functions to event attributes.

It may be intimidating, do not wary I will give you examples and explain it all one by one.

Find element by Id:

In next example you learn to use HTML and JavaScript together. You will create the <script> element at the end of HTML file to contain the JavaScript function. It is best to put your script at the end of HTML document, to improve performance.

<html>
<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>
<script>
   function changeColor(newColor) {
       var elem = document.getElementById('para');
       elem.style.color = newColor;
   }
</script>
</html>

Notes:

• In HTML you can add attribute "id" to any element,
• Attributes are always of type string, so you must use quotes to give a value "para",
• Finding an element by Id is the most precise method to find an element in DOM,
• The "onclick" attribute is an "event attribute". It is a trigger by the user with "mouse-click".

Find element by selector:

To find an element by selector you can use two methods:

• document.querySelector(selector)
• document.querySelectorAll(selector)

The important part is: writing the selector such that will return your desired element and not another element by mistake. First function querySelector() will return one element, the first matching your selector. Second function will return multiple elements if multiple found. If no element is found the function will return: null.

Review CSS selectors

You probably have forget what CSS selector is it true? Here is a short reminder for CSS selector notation:

• hash "#" prefix represents the ID of element,
• dot "." prefix represents the class of element,
• tag-name can be used as selector, represents all elements of a kind,
• square parenthesis represents attribute based selector [attribute]
• selectors can be combined with space or symbols: {, : . > = ~ *}

Example:

<div id="foo"></div>
<div class="bar"></div>
<script>
   document.querySelector('#foo').innerHTML = "DIV FOO";
   document.querySelector('.bar').innerHTML = "DIV BAR";
</script>

You can use CSS with the same selectors:

#foo {
   color: red;
   background: silver;
}
.bar {
   color: yellow;
   background: green;
}

Of course the output will be color but this stupid GitHub can not render colors so I have to insert a small image here to show you the result of our example:

Homework:

You may be not realizing yet, but finding an elements is the key for handle HTML. Once you found an element you can capture its handler in a variable, then use methods to change it as you wish.You must also know some properties that are useful for programming HTML with JavaScript code.

One of the important properties you need to learn: element.innerHTML property
This property represents the content of an element. Usually is a text, that can be modified using direct assignment.

<html>
   <body>
       <p id="hello">...</p>
   <body>
   <script>
      hello = document.getElementById("hello");
      hello.innerHTML = "hello world";
   </script>
</html>

element.style

After finding an element you can modify its style one value at a time or using cssText property.

<html>
    <body>
        <p id="hello">Hello World!</p>
    <body>
    <script>
        hello = document.querySelector("#hello");
        hello.style.cssText= "color:green; font-weight:bold";
    </script>
</html>

style properties

After you find an element you can change its style:

<html>
    <body>
        <p id="hello">Hello World!</p>
    <body>
    <script>
        hello = document.querySelector("#hello");
        hello.style.color= "green"
        hello.style.fontWeight = "bold";
    </script>
</html> 

Notes: 

• the property names are in camel-case and not kebab-case while setting the style.
• You can remove a style property by setting it to null: hello.style.color = null;

element.setAttribute()

You can add new attributes to an element. This may be for example "style".

<html>
    <body>
    <p id="hello">Hello World!</p>
    </body>
    <script>
      hello = document.querySelector("#hello")
      hello.setAttribute("style","color:green; font-weight:bold")
    </script>
</html>

If an element is found it can be modified so that it listen to events by using method AddEventListener()

<html>
   <body>
       <div id="test">click me!</div>
   </body>
   <script>
       // change the content of #test
       function modifyText() {
           let test = document.getElementById("test");
           if (test.innerText == "click me!")
               test.innerText = "click again!";
           else
               test.innerText = "click me!";
       }
       // add event listener
       let elm = document.getElementById("test");
       elm.addEventListener("click", modifyText, false);
   </script>
<html>

Script Element

We can use tags: <script> ... </script> to insert JavaScript code into HTML pages. One HTML page can contain many scripts. Each script must be enclosed into <script> tags.Default scripting language for web pages is JavaScript but it is possible to use other computer languages in HTML web pages using the "script" tags. Script can be located in HTML "head" or "body".

Example:

In this example JavaScript is stored in the "head" element of HTML.

<!DOCTYPE html>
<html>
<head>
    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML = "Paragraph changed.";
        }
    </script>
</head>
<body>
    <h1>My Web Page</h1>
    <p id="demo">A Paragraph</p>
    <button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

Script location:

In HTML document we nest one element in other element. So the "script" can be nested insite the "head" element or the "body" element. Web developers prefer to implement JavaScript in the "body"region of HTML. This is to allow a faster rendering of the page. JavaScript must be compiled and is better to compile the script after the page is loaded.

Example2:

In this example JavaScript is located in the "body" element.

<!DOCTYPE html>
<html>
<body>
    <h1>My Web Page</h1>
    <p id="demo">A Paragraph</p>
    <button type="button" onclick="myFunction()">Try it</button>
    <script>
        function myFunction() {
         document.getElementById("demo").innerHTML = "Paragraph changed.";
        }
    </script>
</body>
</html>

External Scripts

We can create JavaScript files with extension js that are loaded in HTML pages using "script" tag with attribute "src" like this:

<script src="sourge_file.js">

Example:

In this example JavaScript myFunction is hooked to an click event of the button. When user press the button the function is executed.

<!DOCTYPE html>
<html>
<body>
    <h1>External JavaScript</h1>
    <p id="demo">A Paragraph.</p>
    <button type="button" onclick="myFunction()">Try it</button>
    <p> Note: myFunction is stored in an external file called "myScript.js".</p>
    <script src="myScript.js"></script>
</body>
</html>

Externa file: "myScript.js" contain the declaration for function myFunction().

/* external file */
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}

Advantages:

Placing JavaScripts in external files has some advantages:

• It separates HTML and code so HTML is smaller;
• It makes HTML and JavaScript easier to read and maintain;
• Cached JavaScript files can speed up page loads;
• External JavaScript functions can be reused in many HTML pages.