2.5 - Hello World(s)!

News:

Links / URLS on my site may be out of date - I made some changes to the organization of the pages. Always refresh your browser (holding CTRL or SHIFT will clear the cache).

Cyber Patriot (Cyber Titan) Security Competition

Option cyber security competition opportunity - Click here to join!

  • Closing security holes in operating systems while keeping the system live

    • Training ahead of the events

  • 2 to 5 participants per team

  • 6 hour competitions

    • Fridays or weekends (mostly Fridays)

  • All or nothing (no skipping events) because this is a paid thing

  • Top 10 Canadian teams compete in Cyber Titan

Review

HTML is a document markup language that creates static web pages (no interaction). It uses tags to change where items are placed or how they look. We have several resources to help us lookup tags and examples:

Today's Lesson: 2.5 - Hello World(s)!

First let's look at two more HTML items:

The <div> tag:

  • Defines a division or a section in an HTML document. (w3schools reference)

  • An invisible (unless styled) block or section that can contain any amount of other HTML.

  • More on this later

The id attribute:

  • Used to give an element a unique identification. Each id must be unique. (w3schools reference)

  • <p id="Intro"> or <a href="ocsb.ca" id="Board Site"> or <div id="Title">

  • Do not confuse this with the name attribute! It gets confusing

  • More useful later when we know JavaScript

Output to the user is crucial in programming:

"Hello World" is the first program almost everyone writes.

Let's ask our computer to print "Hello world!" to the console five different ways:

  1. Use jsconsole.com and type console.log("Hello world!")

    • Change your console.log("Hello world!") to alert("Hello world!")

  2. Open our developer tools in Chrome and ask that console to do the same thing - typically F12 or CTRL+SHIFT+I

  3. Create a new HTML Repl (name it Hello World)

    • Type console.log("Hello world!"); in the script.js file

    • That file is loaded during HTML loading and interpreted line-by-line, in order

    • Try adding more than one console.log(); command...

  4. In the script.js file, change your console.log("Hello world!"); to alert("Hello world!");

Scripting (programming) in JavaScript

If HTML is the content and CSS is the style, then JavaScript is the functionality.

JavaScript is a separate product from HTML and can be run as a standalone - in the console - but that's pretty boring. It is also important to understand that server-side NodeJS is very different from client-side JavaScript. We will be using client-side JavaScript.

How to add JavaScript to HTML

Similar to CSS, you can add JavaScript code inline inside your HTML

<script>

alert("Hello World!");

</script>

But this is not recommended. The most accepted method is using an external file and linking to it:

<script src="filename.js"></script>

Today's Task(s) / Homework

Extra