Scribd
Upload
64 views56 pages

C4 Week1

This slide deck consists of 5 lecture videos covering JavaScript topics like its overview and history, use in browsers, the JavaScript language itself, functions and arrays, and control structures. It provides hyperlinks to directly jump to sections within the lectures.

Uploaded by

klxowqcyrxqebjibkg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
64 views56 pages

C4 Week1

This slide deck consists of 5 lecture videos covering JavaScript topics like its overview and history, use in browsers, the JavaScript language itself, functions and arrays, and control structures. It provides hyperlinks to directly jump to sections within the lectures.

Uploaded by

klxowqcyrxqebjibkg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 56

Table of Contents

This slide deck consists of slides used in 5 lecture videos in Week 2. Below
is a list of shortcut hyperlinks for you to jump into specific sections.

• (page 2) Week 2: JavaScript Overview and History

• (page 8) Week 2: JavaScript in the Browser

• (page 24) Week 2: The JavaScript Language

• (page 39) Week 2: JavaScript Functions and Arrays

• (page 46) Week 2: JavaScript Control Structures


JavaScript
Dr. Charles Severance
www.dj4e.com

http://www.dj4e.com/code/javascript
http://www.dj4e.com/code/javascript.zip
About JavaScript
• In addition to HTML and CSS...
• Browsers have a powerful programming language
called JavaScript that runs in the browser
• Actually not much like Java - more like Python with
a C syntax
• Very powerful and flexible - we keep “discovering”
new power
http://en.wikipedia.org/wiki/JavaScript
Inventing JavaScript
• Introduced in Netscape in 1995
• Developed by Brandon Eich
• Named to make use of Java market buzz
• Standardized today as ECMAScript

http://en.wikipedia.org/wiki/Brendan_Eich
https://www.youtube.com/watch?v=IPxQ9kEaF8c
History of programming languages
Science Calculations

System

System

bash (79)
C uses curly
braces { } for
code blocks.

Scripting/
Interpreted
http://en.wikipedia.org/wiki/History_of_programming_languages
Writing JavaScript
• Augment HTML using the Document Object Model
(DOM) – "Vanilla JavaScript"
• Augment HTML using a library like JQuery
• Building an MVC Application in the Browser using
Vue/React
• Building a server side application using Node /
Express
Language Syntax (like C/Java)
• Whitespace does not matter - spaces and
new lines
• Begin and end of blocks are curly braces
• Statements must end in semicolons

function message()
{
alert("This alert box was called with the onload event");
}
Working with JavaScript in
the Browser
http://www.dj4e.com/code/javascript
http://www.dj4e.com/code/javascript.zip
Browser Linux
settings.py Django

Click Routing urls.py

views.py

D
O
Parse
Response
Browser
Views Templates

M forms.py

Database
Shell
JavaScript Models

model.py
/admin
admin.py
JavaScript in the Browser
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>One Paragraph</p>
<script type="text/javascript">
document.write("<p>Hello World</p>")
</script>
<noscript>
Your browser doesn't support or has disabled JavaScript.
</noscript>
<p>Second Paragraph</p>
</body>
</html>
js-01.htm
Low-Level Debugging
• When in doubt, you can always add an alert() to
your JavaScript.
• The alert() function takes a string as a parameter
and pauses the JavaScript execution until you press
“OK”.
<html>
<head>
Low-Level Debugging
<title>Hello World</title>
</head>
<body>
<p>One Paragraph</p>
<script type="text/javascript">
alert("Here I am");
document.write("<p>Hello World</p>")
</script>
<noscript>
Your browser doesn't support or has disabled JavaScript.
</noscript>
<p>Second Paragraph</p>
</body>
</html>
js-02.htm
Including JavaScript
•Three Patterns:
• Inline within the document
• As part of an event in an HTML tag
• From a file
<html> js-03.htm
<head>Js-03.htm
<title>Hello World</title>
</head>
<body>
<p>One Paragraph</p>
<p><a href="js-01.htm"
onclick="alert('Hi'); return false;">Click Me</a></p>
<p>Third Paragraph</p>
</body>
</html>

JavaScript on a tag
js-04.htm
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>One Paragraph</p>
<script type="text/javascript" src="script.js">
</script>
<p>Third Paragraph</p>
</body>
</html> JavaScript in a separate file
script.js:

document.write("<p>Hello World</p>");
js-04.htm
Syntax Errors
• As in any language, we can make syntax errors
• By default, browsers silently eat any kind of
JavaScript error
• But the code stops running in that file or script
section
<p>One Paragraph</p> js-05.htm
js-05.htm
<script type="text/javascript">
alert("I am broken');
alert("I am good");
</script>
<p>Two Paragraph</p>
<script type="text/javascript">
alert("Second time");
</script>
<p>Three Paragraph</p>
Seeing the Error
• Since the end user really cannot take any action to
fix the JavaScript coming as part of a web page, the
browser eats the errors.
• As developers, we need to look for the errors -
sometimes it takes a minute to even remember to
check for a JS error.
js-05.htm
Js-05.htm
Console Logging
• Debugging using alert() can get tiring - sometimes
you want to record what happens in case something
goes wrong
• console.log("String") - and many more functions
js-06.htm
js-06.htm
<p>One Paragraph</p>
<script type="text/javascript">
console.log("First log");
alert("YO");
</script>
<p>Two Paragraph</p>
<script type="text/javascript">
console.log("Second log");
</script>
<p>Three Paragraph</p>
Using the Debugger (Firefox)

• Get into a source view.


• Click on a line of JavaScript to set a breakpoint.
• Reload the page.
Using the Debugger
JavaScript Language
http://www.dj4e.com/code/javascript
http://www.dj4e.com/code/javascript.zip
Comments in JavaScript = Awesome

// This is a comment

/* This is a section of
multiline comments that will
not be interpreted */
Statements
• White space and newlines do not matter.
• Statements end with a semicolon ;
• There are cases where you can leave the semicolon
off, but don’t bother exploiting this feature - just
add semicolons like in C, Java, PHP, C++, etc.
js-07.htm
js-07.htm
<p>One Paragraph</p>
<script type="text/javascript">
x=3+
5 * 4; console.log(
x);
</script>
<p>Second Paragraph</p>
Variable Names
• Valid Characters: a-z, A-Z, 0-9, _ and $
• Must not start with a number
• Names are case sensitive
• Starting with a dollar sign is considered “tacky”
js-08.htm
String Constants
• Double or Single Quotes - Single quotes are used
typically in JavaScript and we let HTML use double
quotes to keep our minds a little sane.
• Character Escaping - done using the backslash
character

<script type="text/javascript">
alert('One line\nTwoLine');
</script>
Numeric Constants
• Constant syntax is like most other languages
• Weirdness – One number type (no int or float)

>> x = 5/3;
1.6666666666666667
>> x = Math.trunc(x)
1
Operators
>> j = 1
1
>> j = j + 1
2
>> j = j - 5
-3
>> j = j * 5
-9
>> j = j / 5
-4.5
>> j = Math.trunc(j)
-4
More Operators
>> j = 45
45 >> j = 10
>> k = j % 7 10
3 >> j += 5
>> k++ 15
3 >> j -= 3
>> k 12
4 >> j *= 2
>> --k 24
3 >> j /= 4
>> k 6
3
Comparison Operators
>> j = 10
10 >> j = false
>> j == 10 false
true >> j == 0
>> j != 17 true
true >> j === 0
>> j < 43 false
true >> j !== false
>> j > 42 true
false >> j !== true
>> j <= 10 true
true
Logical Operators
>> k = 5; j = 0
0
>> k > 1 && j < 10
true
>> k > 10 && j > 10
false
>> k > 10 || j > 10
false
>> k > 10
false
>> ! ( k > 10 )
true
String Concatenation
• JavaScript string concatenation is like Python
except that it does implicit conversion from
integer to string

>> x = 12
12
>> y = 'Hello ' + x + ' people'
"Hello 12 people"
Variable Typing
•JavaScript is a loosely typed language and does
automatic type conversion when evaluating
expressions. It does not trace back when arithmetic is
confusing.
>> x = "123" + 10
"12310"
>> x = ("123" * 1) + 10
133
>> x = ("fred" * 1) + 10
NaN
>> x = x + 1
NaN
Variable Conversion
•If a string cannot be >> x = "fred" + 1
NaN
converted to a number, you >> isNaN(x)
end up with “Not a true
>> x = x + 1
Number” or “NaN”. It is a NaN
value, but it is sticky - all >> y = 42 / 0
operations with NaN as a Infinity
>> isNaN(y)
operand end up with NaN. false
>> isInfinty(y)
false
Determining Type
•JavaScript
provides a >> x = 25
unary typeof >> typeof x
operator that "number"
returns the >> y = "Why?"
type of a "Why?"
>> typeof y
variable or
"string"
constant as a
>> typeof z
string. "undefined"
Functions and Arrays
Functions
js-09.htm

• Functions use a typical syntax and are indicated


using the function keyword.
• The return keyword functions as expected.

<script type="text/javascript">
function product(a,b) {
value = a + b;
return value;
}
console.log("Prod = "+product(4,5));
</script>
Scope - Global (default)
js-10.htm

• Variables defined outside a function that are


referenced inside of a function have global scope.
• This is a little different than what we expect.

<script type="text/javascript">
gl = 123;
function check() {
gl = 456;
}
check();
console.log("GL = "+gl);
</script>
Making a Variable Local
js-11.htm

•In a function, the parameters (formal arguments) are


local and any variables we mark with the var keyword
are local too.
<script type="text/javascript">
gl = 123;
function check() {
var gl = 456;
}
check();
console.log("GL = "+gl);
</script>
Arrays in JavaScript
•JavaScript supports both linear arrays and associative
structures, but the associative structures are actually
objects.
>> a = ["x", "y", "z"]
["x", "y", "z"]
>> b = {"name":"chuck", "class":"dj4e"}
Object {"name":"chuck", "class":"dj4e"}
>> a[0]
"x"
>> b['name']
"chuck"
Linear Arrays

>> arr = Array() >> arr = Array()


[] []
>> arr.push('first') >> arr[0] = 'first'
1 "first"
>> arr.push('second') >> arr[1] = 'second'
2 "second"
>> arr >> arr
["first", "second"] ["first", "second"]
Array Constructor / Constants

>> arr = Array('first', 'second')


["first", "second"]
>> zzz = ["first", "second"]
["first", "second"]
>>
Control Structures
Conditional - if
js-12.htm

• Logical operators ( == != < > <= >= && ||


! === !==)
• Curly braces
<script type="text/javascript">
var ans = 42;
if (ans == 42 ) {
console.log("Hello world!"); Hello World!
} else {
console.log("Wrong answer");
}
</script>
Multi-way Ifs
js-13.htm

var x = 7;

if ( x < 2 ) {
console.log("Small");
} else if ( x < 10 ) {
console.log("Medium");
} else {
console.log("LARGE");
}

console.log("All done");
js-14.htm
js-14.htm
var fuel = 10;
while (fuel > 1) {
console.log("Vroom");
}

A while loop is a “zero-trip”


loop with the test at the top var fuel = 10;
before the first iteration starts. while (fuel > 1) {
We hand construct the iteration console.log("Vroom");
fuel = fuel - 1;
variable to implement a
}
counted loop.
Definite Loops (for)
js-15.htm

balls = {"golf": "Golf balls",


"tennis": "Tennis balls",
"ping": "Ping Pong balls"};

for (ball in balls) {


console.log(ball+' = '+balls[ball]);
}

js-12.htm
js-16.htm
js-16.htm Loop runs while TRUE (top-test)
Run after each iteration.
Before loop starts

for(var count=1; count<=6; count++ ) {


console.log(count, 'times 6 is', count * 6);
}
1 times 6 is 6
2 times 6 is 12
3 times 6 is 18
A for loop is the simplest way 4 times 6 is 24
to construct a counted loop. 5 times 6 is 30
6 times 6 is 36
Breaking Out of a Loop
js-17.htm

• The break statement ends the current loop and jumps to


the statement immediately following the loop.

for(var count=1; count<=600; count++ ) { Count: 1


if ( count == 5 ) break; Count: 2
console.log('Count:', count); Count: 3
} Count: 4
console.log("Done"); Done
Finishing an Iteration with continue
•The continue statement ends the current iteration and
jumps to the top of the loop, and starts the next iteration.

Count: 1
for(var count=1; count<=10; count++ ) { Count: 3
if ( (count % 2) == 0 ) continue; Count: 5
console.log('Count:', count); Count: 7
} Count: 9
console.log("Done"); js-18.htm Done
Try / Catch / Finally
try {
x = y + 1;
console.log(x);
}
catch(erval) { js-19.htm
console.log('Oops - Sorry');
console.dir(erval);
}
finally {
console.log('Always runs');
}
Summary
• Using JavaScript • Arrays
• Syntax errors
• Control structures
• Debugging
• Language features
• Global and local
scope
Acknowledgements / Contributions
These slides are Copyright 2010- Charles R. Continue new Contributors and Translators here
Severance (www.dr-chuck.com) as part of
www.dj4e.com and made available under a
Creative Commons Attribution 4.0 License.
Please maintain this last slide in all copies of the
document to comply with the attribution
requirements of the license. If you make a
change, feel free to add your name and
organization to the list of contributors on this
page as you republish the materials.

Initial Development: Charles Severance,


University of Michigan School of Information

Insert new Contributors and Translators here


including names and dates

You might also like