CMPS 2680 - Week 6

Background

CSS refreshers

CSS flexbox

Monday

Intro to JavaScript

Whereas HTML is a markup language and CSS is a style sheet language, JavaScript (JS) is a programming language. If a webpage made with just HTML and CSS is considered static (it has the same content on the server as on the client), adding JavaScript to a page can make it dynamic.

To learn more about JavaScript, visit the links below:

Intro to JavaScript – W3Schools
JavaScript Tutorial – W3Schools
Eloquent JavaScript
JavaScript and HTML DOM Reference – W3Schools
JavaScript Guide – Mozilla Developer Network
The Modern JavaScript Tutorial
JSFiddle - interactive html/css/js tester

Adding JavaScript to your site

There are a few ways to add JavaScript to your page, similar to the ways we can add CSS to a page:

Internal JavaScript


<!DOCTYPE html>
<html lang="en">
<head>
⋮
<script>
// Can be placed here
</script>
</head>
<body>
⋮
<script>
// Or here
</script>
</body>
</html>

External JavaScript


<!DOCTYPE html>
<html lang="en">
<head>
⋮
<!-- Can be placed here -->
<script src="script.js"></script>
</head>
<body>
⋮
<!-- Or here -->
<script src="script.js"></script>
</body>
</html>

script.js


// JavaScript here

JavaScript can be placed in either the head or body section. Here are some general guidelines to follow when deciding where to place JavaScript code:

Place JavaScript libraries (e.g., jQuery) in the head section.
Place general JavaScript at the end of the body section. This helps to avoid performance/page loading issues, as the HTML is rendered before any JavaScript is loaded.

inline

You can also write JavaScript code "snippets" directly as the value for an event attribute for certain elements. See the inline demo

See JavaScript Hello World

Some Methods

alert(message): The alert() method creates a pop-up box with a specified message and an OK button.


alert("Hello world!");

confirm(message): The confirm() method creates a pop-up box with a specified message, an OK button, and a Cancel button.


confirm("Press a button");

prompt(text, defaultText): The prompt() method creates a pop-up box that prompts the visitor for input. Optionally, you can set a default input value that will be used if the user does not choose to enter a response and clicks OK.


var number = prompt("Enter a number", 0);
var dog = prompt("What's your favorite type of dog?");

document.write(arg1, arg2, …): The write() method writes directly to the HTML document. It is mainly used for testing purposes, as if it is used after a HTML document has been fully loaded, it will delete all of the existing HTML.


document.write("Hello world!");

console.log(message): the console.log() method writes any message you like to the developer console. Because of this, it is mainly used for developer purposes, as the console is only visible when you open the DevTools.


console.log("Look out world, I\'m a hacker!");

Wednesday

Topics:

Friday