JavaScript CMPT 281 Outline Introduction to

debby-jeon

Published 2026-01-24 · 47 slides · 0 views

↓ Download

JavaScript CMPT 281 Outline Introduction to

JavaScript CMPT 281 Outline Introduction to - slide 1 of 47

JavaScript CMPT 281 Outline Introduction to - slide 2 of 47

JavaScript CMPT 281 Outline Introduction to - slide 3 of 47

JavaScript CMPT 281 Outline Introduction to - slide 4 of 47

JavaScript CMPT 281 Outline Introduction to - slide 5 of 47

JavaScript CMPT 281 Outline Introduction to - slide 6 of 47

JavaScript CMPT 281 Outline Introduction to - slide 7 of 47

JavaScript CMPT 281 Outline Introduction to - slide 8 of 47

JavaScript CMPT 281 Outline Introduction to - slide 9 of 47

JavaScript CMPT 281 Outline Introduction to - slide 10 of 47

JavaScript CMPT 281 Outline Introduction to - slide 11 of 47

JavaScript CMPT 281 Outline Introduction to - slide 12 of 47

JavaScript CMPT 281 Outline Introduction to - slide 13 of 47

JavaScript CMPT 281 Outline Introduction to - slide 14 of 47

JavaScript CMPT 281 Outline Introduction to - slide 15 of 47

JavaScript CMPT 281 Outline Introduction to - slide 16 of 47

JavaScript CMPT 281 Outline Introduction to - slide 17 of 47

JavaScript CMPT 281 Outline Introduction to - slide 18 of 47

JavaScript CMPT 281 Outline Introduction to - slide 20 of 47

JavaScript CMPT 281 Outline Introduction to - slide 21 of 47

JavaScript CMPT 281 Outline Introduction to - slide 22 of 47

JavaScript CMPT 281 Outline Introduction to - slide 23 of 47

JavaScript CMPT 281 Outline Introduction to - slide 24 of 47

JavaScript CMPT 281 Outline Introduction to - slide 25 of 47

JavaScript CMPT 281 Outline Introduction to - slide 26 of 47

JavaScript CMPT 281 Outline Introduction to - slide 27 of 47

JavaScript CMPT 281 Outline Introduction to - slide 28 of 47

JavaScript CMPT 281 Outline Introduction to - slide 29 of 47

JavaScript CMPT 281 Outline Introduction to - slide 30 of 47

JavaScript CMPT 281 Outline Introduction to - slide 31 of 47

JavaScript CMPT 281 Outline Introduction to - slide 32 of 47

JavaScript CMPT 281 Outline Introduction to - slide 33 of 47

JavaScript CMPT 281 Outline Introduction to - slide 34 of 47

JavaScript CMPT 281 Outline Introduction to - slide 35 of 47

JavaScript CMPT 281 Outline Introduction to - slide 36 of 47

JavaScript CMPT 281 Outline Introduction to - slide 37 of 47

JavaScript CMPT 281 Outline Introduction to - slide 38 of 47

JavaScript CMPT 281 Outline Introduction to - slide 39 of 47

JavaScript CMPT 281 Outline Introduction to - slide 40 of 47

JavaScript CMPT 281 Outline Introduction to - slide 41 of 47

JavaScript CMPT 281 Outline Introduction to - slide 42 of 47

JavaScript CMPT 281 Outline Introduction to - slide 43 of 47

JavaScript CMPT 281 Outline Introduction to - slide 44 of 47

JavaScript CMPT 281 Outline Introduction to - slide 45 of 47

JavaScript CMPT 281 Outline Introduction to - slide 46 of 47

JavaScript CMPT 281 Outline Introduction to - slide 47 of 47

Description

JavaScript CMPT 281 Outline Introduction to JavaScript Resources What is JavaScript? JavaScript in web pages Announcements Assignment 3 Layout with tables JavaScript Resources Resources Why JavaScript? HTML CSS JavaScript Separation of

Download this presentation From Below

"JavaScript CMPT 281 Outline Introduction to" is the property of its rightful owner. Permission is granted to download and print the materials on this website for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.

Presentation Transcript

JavaScript CMPT 281<br>

Outline Introduction to JavaScript
Resources
What is JavaScript?
JavaScript in web pages<br>

Announcements<br>

Assignment 3 Layout with tables<br>

JavaScript Resources<br>

Resources<br>

Why JavaScript?<br>

HTML + CSS + JavaScript<br>

Separation of Concerns<br>

What is Javascript?<br>

What is Javascript? A scripting programming language
Cannot be run without a browser
Embedded in most web browsers
A way to create web pages that respond dynamically to user action
A tool for server-side development<br>

Types of computer languages High-Level vs. Low Level
Compiled vs. Interpreted
Structured vs. Object Oriented
Scripting vs. Programming<br>

JavaScript High-Level vs. Low Level
Compiled vs. Interpreted
Structured vs. Object Oriented
Scripting vs. Programming<br>

History Need for ‘client side’ interaction
Code executes on the local machine
No need for network connection once script runs
Developed by Netscape in 1995
(Not related to the Java Language)
Actually ECMAScript (ECMA-262)
en.wikipedia.org/wiki/ECMAScript
Several variants (JScript, Action Script…)<br>

What can JavaScript do? It is a full programming language
API (application programming interface) is specific to working with browsers
Restrictions:
Security-based limitations
No networking
No access to local file system
Limited UI toolkit and graphics
(This is changing with HTML5)<br>

What can JavaScript do? Benefits:
Close integration with the browser
Access the webpage and all elements within
Adjust or create HTML
Open and resize browser windows
Run animations, play sounds<br>

Example: writing to the page<br>

Example: loading a random image<br>

Where do scripts go? In the HMTL page
Like styles, can be external, internal, or inline
Use these for different situations<br>

Where do scripts go? For scripts that respond to user events, and for functions:
Either external or internal
In <head>…</head>
For scripts that write document content:
In <body>…</body><br>

Body example <html>
<head>
</head>

<body>

<script type="text/javascript">
document.write("This message written by JavaScript");
</script>

</body>
</html><br>

Internal example <html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert was called with the onload event");
}
</script>
</head>

<body onload="message()">
</body>
</html<br>

External example <html>
<head>
<script type="text/javascript" src="xyz.js"></script>
</head>
<body>
</body>
</html><br>

How does JS access the page? DOM: Document Object Model
A framework to describe a web page (document) in a tree-like structure<br>

DOM<br>

Using the DOM to get at the page <html><body><p id="intro">Hello World!</p><script type="text/javascript">x=document.getElementById("intro");document.write(x.firstChild.nodeValue);</script></body></html><br>

JavaScript Basics<br>

JavaScript Basics Statements
Variables
Events
Functions
Dialogs<br>

Statements <script type="text/javascript">

var a = 10;
var b = 11;
var c;
c = a + b;
alert(‘The answer is’ + c);

</script><br>

JavaScript Variables Variables are used to store data.
Rules for variable names:
Variable names are case sensitive
They must begin with a letter or the underscore character
strname – STRNAME (not same)<br>

JavaScript Variables Variables: containers for data
All variables have
Name
Type – JavaScript is loosely typed
Value or “null”
To declare a variable
var variableName
Beware of reserved words:
E.g., ‘if’, ‘Document’, ‘Math’, etc.<br>

JavaScript Operators Arithmetic Operators<br>

JavaScript Operators Assignment Operators<br>

JavaScript Operators Comparison Operators<br>

JavaScript Operators Logical Operators<br>

User and Browser Events<br>

Functions <script type=“text/javascript”>
function dontClick()
{
alert("I told you not to click!");
}
</script>
...

<input type="button" value="Don't Click Me!" onClick="dontClick()"/><br>

Dialogs alert("Hello!");
confirm("Delete files?");
var name=prompt("Your name?", "Tim Berners-Lee");<br>

Coding Tips Check your statements are on one line
Check your " and ' quotes match
Take care with capitalisation
Lay it out neatly - use tabs
Use the Chrome developer tools
Or Firebug for Firefox<br>

A Word About Comments JavaScript Comments
These comments must be within a script
// begins a single line comment
These can start anywhere on the line, but the remainder of the line becomes a comment
/* All of your comments here… */
Everything between the start and end comment markers are comments
Can be on a single line or span many…

HTML Comments
<br>

Ending Statements With a Semicolon? With traditional programming languages, like C++ and Java, each code statement has to end with a semicolon (;).
Many programmers continue this habit when writing JavaScript, but in general, semicolons are optional!
Semicolons are required if you want to put more than one statement on a single line.<br>

Example<br>

JavaScript Libraries<br>

Reminders for this week Do the JavaScript tutorials on w3schools:
'JS Basic‘: www.w3schools.com/js/
Assignment
Reading:
Pattern group I: Designing Effective Page Layouts
Pages 631-657<br>

JavaScript CMPT 281 Outline Introduction to

Related Topics

Share

Embed code

Download this presentation From Below

Presentation Transcript