Please enable JavaScript.
Coggle requires JavaScript to display documents.
JAVASCRIPT M1, JS CODE, DATA VARIABLES, DOC OBJECT MODEL, WORKING WITH…
JAVASCRIPT M1
-
JavaScript is used to make dynamic websites, create mobile apps and games, process data, and much more!
JavaScript makes web pages and applications…interactive
You can add JavaScript code to HTML tags directly. The example below uses the onclick attribute to display an alert message. onclick='alert("Hello")'>Press here
-
Alert messages make users aware of important information. They are usually triggered by something the user does.
-
To display an alert, include the message inside the parentheses ().
-
Displaying an alert message is only one of the many user interactions you can code with JavaScript!
An alert box contains a message and an OK button. To continue using the page, the user has to click the OK button to close the alert. This ensures they read the important information.
-
-
In interactive web pages, the user can trigger changes in elements.
JS CODE
-
You know JavaScript can be added directly to HTML tags. However this can take time and make your HTML document a bit messy.
In this lesson, you’ll learn a different way to add JavaScript (JS) to your web projects.
Just like with CSS, there are different ways to organize your code.
Adding JS code directly inside HTML tags is called... inline JS
All the JS code for a web page can be grouped together in the HTML doc inside one <script> container tag. This method is called internal JS.
Script is another word for code. In web development, scripting means giving instructions for the web browser to execute.
The browser executes the instructions in the <script> tags when it loads the page
-
Web browsers read and execute JavaScript instructions. Each instruction is called a statement. You can include as many statements as you need in your script.
When JS code is added to an HTML document grouped together within <script> tags, this is called… internal JS
-
The console is a browser tool that helps developers test code.
Logging messages to the console is a quick way to find and fix issues in your code. console.log("Welcome to the console");
-
JS statements are read and executed one by one, from top to bottom. The execution of the code will be interrupted if an error is found.
Errors in code are known as bugs. Debugging means fixing errors in code so that it executes correctly.
DATA VARIABLES
Data comes in different shapes and forms. Computers treat different types of data in different ways.
A piece of text data is called string. You can use either single or double quotes to create a string, just ensure the opening and closing quotes match.
-
-
Computer programs use variables to store important information that can be used again, like items in a shopping cart, prices and discounts.
To create a variable, use the word let followed by the variable name.
let item = "bike";
A variable = box, has a name and a value.
To create a variable, give the variable a name and connect name and value with an equal = sign
You can create as many variables as you need in your programs.
Variables can store strings, numbers and other types of data.
Humans use code to give instructions to computers, but the code will also be read by other human coders (or future you!)
-
DOC OBJECT MODEL
-
The structure of a web page can be represented as a tree. This is helpful when creating dynamic pages.
Some HTML elements are placed inside others. This is called… NESTING
The tree diagram that represents the structure of a page is known as the Document Object Model (DOM).
The parent of all the elements that comprise the content of a web page is… THE BODY
-
To modify an element in the DOM of a page, first you need to access it. document.getElementById() is used to access elements in a page with a specific ID.
This script will modify the text in the paragraph element when the page is loaded.document.getElementById("p1");
DOM properties are values (of HTML elements) that you can get, set or change.
For example, .textContent is used to access the text content of an element
You can use variables to store information about the HTML elements
This script stores the text content of the element in a variable named c. Once the information has been stored, it can be used in the code.
Every time you need to modify an element from the DOM, you need to access it first. A convenient way to keep the element in the working memory is to store its details in a variable that you can call later in your code, as many times as you need.
-
-
WORKING WITH VARIABLES
Variables are key to web development. They allow you to store, label, and play with data.
A variable’s name is used to identify where that information is stored. You can access the value that a variable is storing by calling its name
Once a variable has been created, you can use it in your code.
You can update the value stored in a variable. The variable will forget the previously stored value. Updating the value of a variable is called reassigning a variable
-
Variables need to be given a unique name.
If you declare 2 variables with the exact same name, your code will result in…A BUG