7742 JavaScript | thirtyone

7742-G a Brief Introduction to JavaScript

JavaScript is a scripting language used to create and control dynamic website content, i.e. anything that moves, refreshes, or otherwise changes on your screen without requiring you to manually reload a web page.

JavaScripting
introduction information:
• We can use a <script> tag to add JavaScript code to an html page.
• A script in an external file can be inserted with <script src="path/to/script.js"></script>.

Let’s try a simple Hello World script:

<!DOCTYPE HTML>
<html>

<body>

<p>Before the script...</p>

<script>
alert( 'Hello, world!' );
</script>

<p>...After the script.</p>

</body>

</html>

Variables
A variable is a “named storage” for data. We can use variables to store goodies, visitors, and other data.
To create a variable in JavaScript, use the let keyword (you may see this as ‘var’ in older JavaScript files)

The statement below creates (in other words: declares) a variable with the name “message” notice teh semicolon after the variable declaration:

   let message;
   message = 'Hello!';
   alert(message); // shows the variable content

There are two limitations on variable names in JavaScript:
1. The name must contain only letters, digits, or the symbols $ and _.
2. The first character must not be a digit.

Examples of valid names:

let userName;
let test123;

Interaction

As we’ll be using the browser as our demo environment, let’s see a few functions for the user to interact with: alert, prompt and confirm.

alert
shows a message.

prompt
shows a message asking the user to input text. It returns the text or, if Cancel button or Esc is clicked, null.

confirm
shows a message and waits for the user to press “OK” or “Cancel”. It returns true for OK and false for Cancel/Esc.

EXAMPLES: let's try these by adding these to our 'hello world' pages:

Alert
This one we’ve seen already. It shows a message and waits for the user to press “OK”.
example:

alert("Hello");

Prompt
The visitor can type something in the prompt input field and press OK. Then we get that text in the result. Or they can cancel the input by pressing Cancel or hitting the Esc key, then we get null as the result.
The call to prompt returns the text from the input field or null if the input was canceled.
example:

let age = prompt('How old are you?', 100);

alert(`You are ${age} years old!`); // You are 100 years old!

Confirm
The function confirm shows a modal window with a question and two buttons: OK and Cancel.
The result is true if OK is pressed and false otherwise.

let isInMaxClass = confirm("Are you in Max Class?");

alert( isInMaxClass ); // true if OK is pressed

What is the DOM?
the Document Object Model

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree.

The HTML DOM allows JavaScript to change the content of HTML elements.

JavaScript can create dynamic HTML content.

For Example we can write the time and DATE to an html page.

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

Changing HTML Content with JavaScript

The easiest way to modify the content of an HTML element is by using the innerHTML property.

To change the content of an HTML element, use this syntax:

document.getElementById(id).innerHTML = new HTML

In this example we will use a paragraph tag <p> to create a paragraph and add our "Hello World" message to that <p>., we can assign that paragraph an id of "p1". this allows us to call on that ID later with a JavaScript Script Tag.

Example:

<!DOCTYPE html>

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New text!";
</script>

</body>
</html>

Here is a list and information on DOM Browser events that are used for interactivity.

Functions in JavaScript
Functions are one of the fundamental building blocks in JavaScript.

A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output.

To use a function, you must define it somewhere in the scope from which you wish to call it.

A function definition (also called a function declaration, or function statement) consists of the function keyword, followed by:

• The name of the function.
• A list of parameters to the function, enclosed in parentheses and separated by commas.
• The JavaScript statements that define the function, enclosed in curly brackets, {...}.

For example, the following code defines a simple function named myFunction and multiplies two numbers and displays the results using innerHTML.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>This example calls a function which performs a calculation, and returns the result:</p>

<p id="demo">answer goes here</p>

</body>
</html>

Below is an example, when the document is clicked, change text on the page. Notice the 'onclick' attribute in the <p> tag.

<!DOCTYPE html>
<html>
<body>

<p id="demo" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>

<script>

function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed!";
}
</script>

</body>
</html>

Changing HTML Content with JavaScript

​