INFO 30005
Web Information Technologies
Introduction to
Copyright By PowCoder代写 加微信 powcoder
Separation of Concerns
Structure Presentation Behaviour
Online Resources …
Where JS runs
web browser (front-end)
in HTML and JS files
in the dev-tools console
Node (back-end)
VS Code + Code Runner
read eval print loop
Html + JavaScript
Html + JavaScript
Names can contain letters, digits, underscores, and dollar signs.
Names must begin with a letter, $ + _
Names are case sensitive (y and Y are different variables)
Reserved words (like JavaScript keywords) cannot be used as names
In JavaScript, the equal sign (=) is an “assignment” operator, not an “equal to” operator.
var productName = “coffee”;
var x = 5 + 2 + 3;
var x = “John” + ” ” + “Doe”;
var x = “5” + 2 + 3;
var x = 2 + 3 + “5”;
Variable scope
// code here can NOT access productName function myFunction() {
var productName = “coffee”;
/* function scope:
code here CAN access productName */
Variable scope
myFunction();
/* global variable:
code here can access productName */
function myFunction() {
productName = “coffee”;
{ var x = 10; var x = 2; // Here x is 10
}{ // x CAN be used here
var x = 2;
let x = 2;
// Here x is 2 }
// Here x is 2
let x = 10;
// Here x is 10 }{
/* BLOCK scope:
x CANNOT be used here */
let x = 2;
// Here x is 2
// Here x is 10
const PI = 3.14159265359;
// You can create a const object: const car = {type:”Fiat”, model:”500″, color:”white”};
// You can change a property:
car.color = “red”;
//But you can NOT reassign a constant object -> car = {} //ERROR
const PI = 3.141592653589793; const PI;
PI = 3.14;
PI = PI + 10;
// This will give an error PI = 3.14159265359; // This will also error
var x = 10;
// Here x is 10 {
const x = 2;
// Here x is 2 }
// Here x is 10
Variable Declaration
const let var
Block Function
Reassignable Mutable
No Yes Yes Yes Yes Yes
Recommendation
Declare all variables at the start of the file Declare all functions before calling them Prefer Let and Const over Var
Data Types
var length = 16;
var lastName = “Johnson”;
var x = {firstName:”John”, lastName:”Doe”};
Data Types
x = “John”;
// Now x is undefined
// Now x is a Number
// Now x is a String
JavaScript Types are Dynamic
Data Types
To be able to operate on variables, it is important to know something about the type. Without data types, a computer cannot safely solve this:
var x = 36 + ”coffee”;
Does it make any sense to add “coffee” to thirty six? Will it
produce an error or will it produce a result?
JavaScript will treat the example above as:
var x = ”36″ + “coffee”;
Data Types
var x = 10 + 17 + “Eddy”;
Data Types Strings are written with quotes (single or double)
var productName1 = “coffee XC60”; // Using double quotes
var productName2 = ‘coffee XC60’; // Using single quotes
var answer1 = “It’s alright”;
var answer2 = “He is called ‘Johnny'”; var answer3 = ‘He is called “Johnny”‘;
// Single quote inside double quotes // Single quotes inside double quotes // Double quotes inside single quotes
function name(parameter1, parameter2, parameter3) {
keyword function
// code to be executed
function product(a, b) { return a * b; // declare the function
> product(3, 4) // run the function – returns 12
How to declare
function product(a, b) { // these all do the same thing
return a * b; }
const product2 = function(a, b) { return a * b;
const product3 = (a, b) => { return a*b } // arrow function
condition is true or false
if (myAge!=21) {
console.log(“not 21”);
console.log(“is 21”);
var fruit =
[‘banana’,’apple’,‘pear’];
fruit[0] = ‘kiwi’;
fruit.length
Array Functions
push, pop, slice, splice, shift,
unshift, indexOf, sort, reverse,
forEach, length
for(let index = 0; index < 10; index++){ console.log(index); function fibonacci(n){ var i; var fib = []; fib[0] = 0; fib[1] = 1; for(i = 2; i <= n; i++){ fib[i] = fib[i-2] + fib[i-1]; return(fib); dynamically allocated function fibonacci(n){ var i; var fib = []; fib[0] = 0; fib[1] = 1; for(i = 2; i <= n; i++){ fib[i] = fib[i-2] + fib[i-1]; return(fib); function fibonacci(n){ var i; var fib = []; fib[0] = 0; fib[1] = 1; for(i = 2; i <= n; i++){ fib.push(fib[i-2] + fib[i-1]); return(fib); Loop: While let index = 0; while(index < 10){ console.log(index); }
Click the button to get the sum of the numbers in the array.
Sum of numbers in array:
var sum = 0;
var numbers = [65, 44, 12, 4];
function myFunction(item) { sum += item; demo.innerHTML = sum;
}
For in / of
var myArray = [3,6,2,5];
for(let el in myArray){ console.log(el);
for(let el of myArray){
console.log(el);
0,1,2,3 3,6,2,5
Document Object Model
Browser DOM
Root element:
Element: Element:
Text: “Google”
Text: “My Homepage
Text: “My Homepage”
document.URL document.links document.body document.head
Selecting Elements
var target = document.querySelector(“ ”);
CSS Selector
But only the first…
Selecting Elements
var h = document.querySelector(“h1”);
h.style.color = “red”;
Element:
Editing Elements
var heading = document.querySelector(“h1”);
heading.textContent = “Title”; heading.style.color = “blue”;
Editing Elements
Click me to change my HTML content (innerHTML).
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed!”; }