FIT1050 Web Fundamentals
Client-Side Scripting With JavaScript
Copyright Warning
Copyright By PowCoder代写 加微信 powcoder
Commonwealth of Australia Copyright Act 1968
This material has been reproduced and communicated to you by or on behalf of Monash University in accordance with section 113P of the Copyright Act 1968 (the Act).
The material in this communication may be subject to copyright under the Act. Any further reproduction or communication of this material by you may be the subject of copyright protection under the Act.
Learning objectives
What is JavaScript?
¡ñ The history and many names of JavaScript
¡ñ Understand what JavaScript is used for Language features
¡ñ Terminology and syntax rules
¡ñ Basic event handling model Using data and functions
¡ñ Variables and data types ¡ñ Functions
What is JavaScript?
JavaScript is not Java! Developed in 1995 by for
Netscape, originally named “Mocha”.
¡ñ Eventually shipped as LiveScript
¡ñ Renamed to JavaScript to capitalise
on Java’s success.
¡ñ Microsoft develops a competing
implementation named JScript
Standardised by ECMA in 1996 using the name ECMAScript.
The ECMAScript name sounds like a
skin disease and won’t ever catch on…
… Stop trying to make fetch happen.
https://www.smashingmagazine.com/2009/07/misunderstanding-markup-xhtml-2-comic-strip/
Continued evolution of JavaScript
The development of the ECMAScript standard continues:
¡ñ ECMAScript 2016-2022+ Ongoing yearly feature update versions.
Core language and standardisation improvements. Abandoned due to development and compatibility concerns. “ECMAScript 2009” – major revision includes new “strict mode”. “ECMAScript 2015” – major revision with wide browser support.
Unlike W3C standards, modern JavaScript features can break code in older browsers. Web developers are responsible for implementing compatibility.
JavaScript is…
JavaScript is designed as a single-threaded client-side scripting language
¡ñ Single-threaded
¡ð Commands are executed one at a time from a single call stack.
¡ñ Client-side
¡ð Runs on the client – in the user¡¯s web browser.
¡ñ Scripting language
¡ð Programming languages are used to make standalone programs.
¡ð Scripting languages run commands to control existing programs.
Well, actually… JavaScript can also run server-side using Node.js!
JavaScript as a client-side language
JavaScript code is downloaded to the user’s computer to be executed in the browser.
This has advantages compared running code on a remote server:
¡ñ Can process user interaction events in real-time.
¡ñ Can execute code without using server resources.
¡ñ Can update the browser contents without waiting for a server.
Running client-side means JavaScript cannot perform some tasks:
¡ñ User logins (database of users exists only on the server)
¡ñ Secure operations (code loaded into browser can be inspected by users)
¡ñ Store data on the server (e.g. posting to content online for others to access)
Language Features and Syntax
Syntax example
JavaScript uses a C-like syntax.
¡ñ Executable statements
¡ñ Statement blocks
¡ñ Variables for data storage
¡ñ Functions for code reuse
¡ñ Objects that have their own
¡ð Variables (properties)
¡ð Methods (functions)
¡ñ Conditional/iterative control flow
If you have some programming experience, core concepts should be familiar.
var end = 10;
for ( i = 0; i < end; i++ ) {
console.log( i * 2 );
Statements
¡ñ Any single command instruction is a statement.
¡ñ Statements that can evaluate to produce a value are called expressions.
var a = 1; // statements can be short and simple
if ( a == 1 ) { // statement blocks have one or more commands document.querySelector( 'body' ).style.color = '#ff0000'; document.querySelector( 'body' ).innerHTML = 'Hello';
} else { // the start of another statement block document.querySelector( 'body' ).innerHTML = 'Goodbye';
Case sensitivity
All JavaScript keywords and identifiers are case-sensitive!
console.log();
Console.log();
console.LOG();
// outputs a log message
// Error: Console is undefined
// Error: LOG is not a function
var firstname = "Will";
var firstName = "Will";
VAR firstname = "Will";
// this is a variable
// this is a different variable
// Error: unexpected identifier
Whitespace and semicolons
Some guidelines for readable code:
¡ñ Finish statements with a semicolon (actually somewhat optional)
¡ñ Start complete statements on a new line (for readability)
¡ñ Indent code within block (for readability)
However, this code written as a single line is perfectly valid:
var a=1;if(a==1){document.querySelector('body').style.color
='#ff0000';document.querySelector('body').innerHTML='Hello'}
else{document.querySelector('body').innerHTML='Goodbye'}
Inline and block comments are both supported:
// Single line comments end a the next newline var a = 1; // comments can start after code
// var b = 2;
/* Block comments
can span across
multiple lines */
this entire line of code is disabled
Comments are useful for internal documentation and testing.
JavaScript's event loop
The browser constantly listens for all event messages using an event loop.
We can attach listeners for specific events to HTML elements, allowing elements to react to messages by running code.
Event-based programming
Most JavaScript code is used to add interactions to a webpage.
Typically:
1. Select an element A to interact with.
2. Select an element B to modify.
3. Wait for an interaction on element A
and call a function when it happens.
4. The function modified element B.
var thingA = document.
querySelector("#A");
var thingB = document.
querySelector("#B");
thingA.addEventListener(
"click", updateB);
function updateB() {
thingB.style.color = 'red';
Working with Data And Variables
Rules for naming variables
Names must begin with either a:
¡ñ Letter (case-sensitive)
¡ñ _ (underscore) or $
After the first letter, names can contain:
¡ñ Letters (case-sensitive)
¡ñ Numbers
¡ñ Underscores and dollar signs
Identifiers cannot be named using reserved keywords.
Data can be stored in variables
You should declare each variable the first time it is used.
var b = 1;
console.log( a, b );
var c, d, e;
var f = 2, g = 3, h = 4;
// a is declared, but undefined
// b is declared, and defined as 1
// a is now defined as 2
// Output: 2, 1
// c, d, e declared, but undefined
// f, g, h declared and defined
ES6 block-scoped variables
In modern browsers, the let keyword declarations variable that can be scoped to any statement block - not just functions!
for ( var i = 0; i < 10; i++ ) {
console.log( i ); // Output: 10
for ( let i = 0; i < 10; i++ ) {
console.log( i ); // i is not defined (no longer exists)
ES6 block-scoped constants
In modern browsers, variables declared with the const keyword cannot be updated after the initial declaration:
let limit = 10;
for ( let i = 0; i < limit; limit++ ) { // infinite loop! }
const limit = 10;
for ( let i = 0; i < limit; limit++ ) { // exit with error }
Primitive data types
JavaScript provides just a few primitive data types, which are dynamically handled. Any non-constant variable can be re-assigned with a value or any type.
¡ñ Strings
¡ñ Numbers ¡ñ Booleans
¡ñ Null (no value)
"" 'a' "1" 'abc' "abc def"
0 1 -10 12345 1.2345677
false true
Automatic type coercion
Operations with different data types, result in automatic type coercion.
var a = 1 + 2;
var b = 1 + '2';
var c = '1' + 2;
var d = Number( '1' ) + 2;
// no coercion, a = 3
// implicit coercion, b = "12"
// implicit coercion, c = "12"
// explicit coercion, d = 3
Automatic coercions can be dangerous, but also convenient:
console.log( 'The value of variable a is: ' + a );
Truthy and falsy
The following values are treated as falsy (can coerce to Boolean false):
¡ñ Empty strings
¡ñ Number zero
¡ñ Boolean false false
By definition null, undefined and NaN are falsy, but will require special handling. All other values are interpreted as truthy (coerce to Boolean as true).
0 -0 0.0 -0.0
if ( 'hello' && 5 && true ) { console.log( 'truthy' ) }
Creating Functions to Reuse Code
Declaring and calling functions
Functions are often declared with a identifier name.
function sayHello() { // sayHello declared return 'hello';
sayHello(); // executed by calling
This allows the code within a function to be re-used easily - especially important for complex functions containing logic
Camel-case identifier names are preferred
You can use a mix of uppercase and lowercase letters, but conventions exist for general naming style to promote consistency.
function addNumbers() { ... }
function AddNumbers() { ... }
function aDdNuMbErS() { ... }
// camel-case is preferred
// legal, looks like a class
// legal, but please don't!
Remember that JS is case-sensitive - apply case consistently!
Variables can be scoped to a function
Variables declared using var outside of functions are globally accessible. When the declaration is within a function, the variable is accessible within the function only.
function sayHello() {
var a = 'hello';
sayHello();
console.log( a );
// Can also use let for block-scope
// Output: "hello"
// ReferenceError: a is not defined
Functions can import data
Functions can import external data into parameters. Parameters are scoped variables that are defined as part of the function.
function addNumbers( a, b ) { // declare some parameters return a + b; // use them like variables
addNumbers( 1, 2 ); // pass arguments into parameters
This allows a function to reused and execute using different data on each call.
Defining function as expressions
This is practically identical in most situations:
const addNumbers = function( a, b ) { // declare the function return a + b;
addNumbers( 1, 2 ); // call the function
This example uses const to ensure that the function definition can never be accidentally overwritten. However, var and let can also be used.
ES6 arrow function expressions
A newer compact function expression syntax can be used in modern web browsers:
function addNumbers( a, b ) {
return a + b;
let addNumbers = ( a, b ) => {
return a + b;
// traditional declaration
let addNumbers = ( a, b ) => a + b; // implicit return
// arrow function expression
¡ñ Mobile web design and development.
¡ñ Implementing basic mobile responsive layout using CSS.
Self-study this week
¡ñ Choose your topic and template for Assignment 3.
¡ñ Work on research and planning for your website construction.
¡ñ Participation Milestone 4 takes place during next week’s lab class.
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com