Download presentation
Presentation is loading. Please wait.
1
Web Systems Development (CSC-215)
Lecture 15: Introduction to JavaScript Monday 23rd April 2018
2
Javascript: dynamic functionality for websites
3
Offers functionality that is not otherwise possible because it runs in the browser and has direct access to all elements in a web page
4
JavaScript First appearance in Netscape Navigator in 1995
Not related to Java Grew more powerful when HTML started using the Document Object Model Like PHP, follows programming syntax of C Heart of Ajax (which along with HTML5 helps produce fluid front ends)
5
JavaScript & HTML Runs entirely within web browsers
8
Scripts in <head>
When you want it to run when the page loads When it includes a function call that will be needed multiple times …
9
Including JavaScript Files
The script files themselves (.js) should NOT contain any <script> tags
10
Debugging JavaScript Errors
Use browser tools PHP errors were standard, JavaScript error handling will be browser implementation dependent For example Firefox -> Tools -> Web Developer -> Web Console
12
Syntax overview
13
Comments: C++ style // /* */
14
Semi colons: optional – unless there are multiple statements on a single line
15
Variable names: Like c++ except that $ is allowed
Variable names: Like c++ except that $ is allowed. Not using it is good practice.
16
String Variables Double or single quotes
17
Escaping
18
String Assignment & Use
19
Numeric Variables
20
Arrays
22
Accessing Array Values
23
Arithmetic Operators
26
Logical Operators
27
String Concatenation
28
typeof
29
Functions
30
Globals Define outside of functions
31
Document object model
32
Document Object Model JavaScript built in the context of the DOM
The DOM breaks down parts of an HTML document into discrete objects Each with its own properties and methods Each subject to JavaScript’s control
33
JavaScript Objects, Methods & Properties
34
DOM: Hierarchy of Parent & Child Elements
37
Short Form
38
Safe & Conventional Form
Previous ones might not work in IE
39
Shortcut
40
Using the DOM The links value is an array
41
Using the DOM Retrieve length of array
42
Using the DOM Extract and display all links
43
Using the DOM Referencing history
44
Using the DOM Replace currently loaded URL
45
Expressions and Control Flow
Syntax overview
46
Expressions Similar to C++, PHP in style
48
True/False All values evaluate to true except The string false -0
-0 Empty string Null Undefined NaN (not a number, e.g., after division by zero)
49
Literals & Variables
50
Simple Statements
52
Operator Precedence
53
OnError
55
Try Catch
56
If
57
Else
58
While
59
Do While
61
Explicit Casting
62
Class Activity Create a JavaScript program that inputs a number n from a user and then displays the sum to n For n = 5 output = 15
63
Class Activity Using prompt/alert boxes for input/ouput
64
Lecture content adapted from chapter 14 & 15 of Learning PHP, MySQL, JavaScript, CSS & HTML5.
Similar presentations
