Introduction to JavaScript#

What is JavaScript?#

A scripting language for including interactive and dynamic content on web pages.
JavaScript is executed on the client and can manipulate the content of web pages that use it.
JavaScript was originally created by Netscape, but had no standard, so implementations varied widely.
Standardised as ECMAScript in 1997. Most modern browsers now follow the standard and support ECMAScript 6 as specified in 2015.
- Chrome supports ECMAScript 7
- Internet Explorer supports only ES5 (but Edge has ES6)
- Older non-mainstream browsers tend to support ES3

Applications of JavaScript#

Can create levels of interaction from simple to complex:
- Pop-up or rotating advertisements
- Client-side form validation
- Recalculated data (eg, e-commerce totals)
- Animated navigation menus
Several modern browsers, especially Chrome, have focussed on speeding up and enhancing the features of JavaScript, enabling complete web applications (such as the Google Apps) to be written.

AJAX and Service Clients#

Asynchronous Javascript And XML
A set of functionality allowing a JavaScript program to request data from the web server in a non-HTML format, then use it to customize or even generate the web page on the client
The format was originally XML, but almost all modern systems use JSON instead (but the name has stuck)
Extremely valuable in creating sophisticated interactions and web pages.
Will be covered later on the module.

Limits of JavaScript#

Source code of programs is visible to the end user, although it can be obfuscated to protect it. This can be a security issue for both the code and the server.
Execution speed and APIs vary greatly between browsers and HTML versions, and it is not always easy to write code which allows for the differences.
A very common vector for malware attacks. Browsers may impose arbitrary security restrictions.

Writing a script#

1
<!DOCTYPE html> <html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <script>
5
            document.write(“Hello World!”);
6
        </script>
7
    </body>
8
</html>

Since HTML5, lang="JavaScript" is not needed.

Running a script#

JavaScript programs do not have to be compiled. They are executed simply by loading the page into a web browser.
It is suggested that you test using Firefox or Chrome, as these are very popular browsers with strong JavaScript support.
Errors in JavaScript usually cause the page to fail silently. To view the error, you must open the browser’s JavaScript console where it will be printed.
Chrome: More Tools > Developer Tools, Console
Firefox: Web Developer > Web Console

Running JavaScript#

Scripts such as the previous one, with commands written directly inside the script tag, will run as soon as they are encountered by the browser.
This is not generally considered acceptable in modern JavaScript but is OK to use while you are learning.
More commonly, scripts are set up to be triggered by events, which we will look at later.

Javascript Links#

1
<!DOCTYPE html><html>
2
    <head><title>Example</title></head>
3
        <body>
4
            <script>
5
                function hello() {
6
                    window.alert("Hello");
7
                }
8
            </script>
9
            <a href="javascript:hello()">
10
                Say hello
11
            </a>
12
        </body>
13
</html>

A link to a URL beginning with javascript: will cause the Javascript code in the URL to be executed.
This is often the easiest way of creating buttons that the user can click on to interact with a page.
For usability, it may be a good idea to distinguish this type of link from those which send the user to another web page.
Difficulties may arise if the user attempts a “open link in new window” command on a javascript: URL.

Events and JavaScript#

1
<!DOCTYPE html><html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <img src="image.jpg"
5
            onMouseOver="document.write('Ouch!');">
6
    </body>
7
</html>

Event handlers are created by adding attributes to tags within the document.
When the appropriate event (such as the mouse passing over) happens to the element represented by the tag, the code of the handler is executed.
Note that not every tag supports every event.
Also some tags (like A) have default behaviour associated with some events. A script running will override this default behaviour.
If you want the browser to continue with the default behaviour, we will see later how to tell it to.

Events#

Mouse events: onMouseDown, onMouseUp, onMouseOver, onMouseOut, onClick, onDblClick, onMouseMove, onMouseWheel.
Keyboard events: onKeyDown, onKeyUp, onKeyPress.
Events for forms: onFocus (form component selected for input), onBlur (deselected for input), onChange (value changed), onSelect (text selected in a text box), onSubmit (form submitted), onReset (form reset to defaults).

Page loading: onLoad (page/image loaded), onUnload (page unloaded), onAbort (image load halted)
Media loading: onLoadStart, onCanPlay, onCanPlayThrough, onProgress, onPlaying, onWaiting, onAbort, onError, onStalled.
Media playback: onPlay, onPause, onTimeUpdate, onVolumeChange.

Defining functions#

1
<html>
2
    <head>
3
        <title>Example</title>
4
    </head>
5
    <script>
6
        function checkForm() {
7
            if (document.getElementById("name").value == "mark") {  return true;
8
        } else {
9
                window.alert("Wrong!");
10
                return false;
11
            }
12
        }
13
    </script>
14
    <body>
15
        <form name="nform" onSubmit="return checkForm();">
16
        <input ID="name" type=text>
17
        <button type="submit">Submit</button>
18
        </form>
19
    </body>
20
</html>

All subroutines in JavaScript are functions or methods.
Functions can return values, but are not required to do so.
If an event handler returns true, the default behaviour continues (if there is one). If it returns false, it is halted.

Variables#

JavaScript programs can make use of variables in the usual way.
Variables should be declared and initialized the first time they are used; for example, let x = 2. You do not need to specify a type.
For backward compatibility JavaScript normally allows global variables to be assigned arbitrarily without being declared. However, this is a bad idea as it can create very difficult bugs if a variable name is accidentally misspelled or reused.
Adding "use strict"; to the top of your script will disable this.

Types#

JavaScript has only three basic types: numbers (integer or decimal), strings, and booleans (true / false).
- There are a total of seven primitive types, but the remaining 4 are special cases.
Variables do not need to be typed, and can be freely switched between types:
let x = 24; x = "Moose"; is legal.
When you write expressions with values of multiple types, JavaScript tries to “intelligently” convert between types. Usually it gets it right, but this can cause difficulties (as we’ll see later on)

Functions with arguments#

1
<body>
2
    <script>
3
        function greet(name) {
4
            window.alert("Hello, " + name + "!");  return false;
5
        }
6
    </script>
7
    <input ID="myname" type=text>
8
    <button onClick="greet(document.getElementById('myname’)
9
.value)">Hello!</button>
10
</body>

Function arguments are listed in a manner similar to Python, and behave in exactly the same way.
As with variables, types do not need to be specified.

Standard Operators#

Arithmetic: + - * / %
Comparison: == != > >= < <=
Logic: && (and) || (or) !(not)
Arithmetic shortcuts: x = x + 5; can be abbreviated to x += 5; any other arithmetic
operator can be abbreviated in the same way.
x = x + 1; can be further abbreviated to x++; subtraction of 1 can also be abbreviated this way, but no other operator can.

Choice#

If.. Then.. Else.. in JavaScript is identical to Java.

1
if (x == 1) {
2
    document.write("X is one");
3
    return true;
4
} else {
5
    document.write("X is not one");
6
    return false;
7
}

Loops#

While loops are also identical.

1
while (x < 5) {
2
    x = x + 1;
3
    document.write(x + "...");
4
}

For loops are also the same.
As in Java, you specify the value to start from, the condition for continuing, and how to update the value.
for (let t=1; t<5; t++) { . . . .
The command break; causes the current loop to end immediately, regardless of the condition involved.
The command continue; causes the loop to immediately move on to the next value.

Functions as variables#

1
<script>
2
    function helloEnglish() {
3
        window.alert(“Hello!”);
4
    }
5
    function helloFrench() {
6
        window.alert(“Bonjour!”);
7
    }
8
    let hello = helloEnglish;  hello();
9
    hello = helloFrench;  hello();
10
</script>

JavaScript functions can be stored in variables.
A function call is normally written as function() or function(a,b,c..).In most languages, this is a specific syntax.
But in JavaScript, the brackets that you use for calling a function are an operator (like + or &&). Thus, the value to which they are applied can come from a variable, or even from an expression!
The expression on the left hand side of the brackets must evaluate to a function or an error will occur.

Arrays#

1
<script>
2
    let friends = [“Adam”, “Ben”, “Chris”];
3
    for (t=0; t<3; t++) {
4
        document.write(friends[t]);
5
    }
6
</script>

Arrays work in a similar way to Python. As usual in JavaScript, they do not need to be declared. Here the entire array is loaded to start with, but it need not be: it is legal in JavaScript to write friends[3] = "John" even if friends is empty (but in strict mode, it must exist).
Just as functions can be stored in variables, they can also be stored in arrays!

Objects#

Structured data in JavaScript is represented using objects and classes.
JavaScript objects are a cross between objects in Java and dicts in Python:
- Methods are represented by a function stored in a field within the object;
- As well as the . (dot) operator for extracting the value of a field, which is a specific syntax, JavaScript also provides [ ] – which is an operator, and (just like function call () ), can be used on an expression!

1
<script>
2
    let myfriend = {
3
        Name: 'John',
4
        age: 24,
5
        job: 'Student'
6
    };
7
    document.writeln(myfriend.Name);
8
    document.writeln(myfriend['age']);
9
    query = 'job';
10
    document.writeln(myfriend[query]);
11
</script>

Note the syntax used to initialize the object: the object in {}s, and each property name and value in the object in a comma separated list, with colons between.
This syntax is also the data format JSON (JavaScript Object Notation) which is commonly used in other contexts, but especially for getting data from web services.

Loose Objects#

Because JavaScript objects are also dicts, they are very informal compared to Java or other class based languages.

1
<script>
2
    let myfriend = {
3
        Name: 'John',
4
        age: 24,
5
        job: 'Student'
6
    };
7
// Legal, even in strict mode!  myfriend.iamafish = false;
8
</script>

Loose Classes#

JavaScript’s loose objects mean that classes are rather awkward in JavaScript.
The good news: the syntax for classes is very close to Java.

1
class Car {
2
    constructor(brand) {
3
        this.carname = brand;
4
    }
5
    drive() {
6
        document.write("Vroom!");
7
    }
8
}
9
let mycar = new Car("Toyota");
10
document.write(mycar.carname);
11
mycar.drive();

The bad news: because of loose typing and dict equivalence, objects lose their class after creation.

1
let mycar = new Car("Toyota");
2
document.write(mycar.carname);
3
mycar.iamafish = false;
4
document.write(mycar.iamafish);
5
mycar.drive = function() {
6
    document.write("Grrk!");
7
};
8
mycar.drive();

Essentially, a class in JavaScript is an abbreviated way to construct a dict with a standard set of properties. Once constructed, it can be messed with without limit, and cannot be distinguished from an original member of that class.

The good side:
- You can very easily customize objects as you wish.
- You can easily write functions that work on a wide range of objects.
The bad side:
- Misspelling an object property name creates or updates a new property.
- A function that accepts an object may get a dict that doesn’t match anything it was expecting or even that is designed to break it.

JavaScript Evolution#

TypeScript is an alternate form of JavaScript which adds strict typing to remove this difficulty with classes.
It cannot be run by browsers; it is compiled into JavaScript before being included in web pages.
Numerous other languages exist which are compiled into JavaScript, allowing web development to be done in a range of languages.
This led to the development of WebAssembly, a non-human readable language for web page scripts, which is purely used as a compilation target.

音乐

音乐

Introduction to JavaScript#

What is JavaScript?#

Applications of JavaScript#

AJAX and Service Clients#

Limits of JavaScript#

Writing a script#

Running a script#

Running JavaScript#

Javascript Links#

Events and JavaScript#

Events#

Defining functions#

Variables#

Types#

Functions with arguments#

Standard Operators#

Choice#

Loops#

Functions as variables#

Arrays#

Objects#

Loose Objects#

Loose Classes#

JavaScript Evolution#

支持与分享

评论区

音乐

目录

音乐

音乐

Web Application Development - JS

Introduction to JavaScript#

What is JavaScript?#

Applications of JavaScript#

AJAX and Service Clients#

Limits of JavaScript#

Writing a script#

Running a script#

Running JavaScript#

Javascript Links#

Events and JavaScript#

Events#

Defining functions#

Variables#

Types#

Functions with arguments#

Standard Operators#

Choice#

Loops#

Functions as variables#

Arrays#

Objects#

Loose Objects#

Loose Classes#

JavaScript Evolution#

支持与分享

评论区

音乐

目录