JavaScript is an interpreted programming language that allows client-side scripts to interact with users and alter document content displayed in web browsers. It enables functionality like Gmail by communicating asynchronously through browser APIs. JavaScript uses lexical scoping, closures, and prototypical inheritance. It has a DOM API for manipulating the HTML document and building interactive web applications with event-driven user interfaces. The lesson discusses JavaScript data types, expressions vs statements, functions, scopes, closures, and object-oriented programming patterns to create reusable components like counters with increment buttons. Homework includes reading about JavaScript fundamentals and watching a video on its good parts.
2. Java¡script
Noun
An interpreted computer programming language. As part of
web browsers, implementations allow client-side scripts to
interact with the user, control the browser, communicate
asynchronously, and alter the document content that is
displayed.
5. Javascript clock
var writeTime = function () {
var parent = document.getElementById('clock'),
timeElem = document.createElement('p'),
time = new Date();
!
timeElem.innerHTML = time.toUTCString();
parent.appendChild(timeElem);
};
!
writeTime();
6. Javascript clock
var writeTime = function () {
var parent = document.getElementById('clock'),
timeElem = document.createElement('p'),
time = new Date();
!
timeElem.innerHTML = time.toUTCString();
parent.innerHTML = ââ;
parent.appendChild(timeElem);
};
!
setInterval(writeTime, 500);
7. The DOM API
var writeTime = function () {
var parent = document.getElementById('clock'),
timeElem = document.createElement('p'),
time = new Date();
!
timeElem.innerHTML = time.toUTCString();
parent.innerHTML = ââ;
parent.appendChild(timeElem);
};
!
setInterval(writeTime, 500);
9. Data Types
String:
var myString = âHello Worldâ;
!
Number
var myNum = 42;
!
Array
var myArr = [5, 6, âsevenâ, 8];
!
Object
var myObj = {
key1: âValueâ,
key2: 42,
anotherKey: myArr
};
10. Statements & Expressions
An expression produces a value.
Can be written wherever a value is expected.
A value is in itself an expression.
A statement performs an action.
Statements manipulate interpreter ďŹow and perform actions.
Wherever a statement is expected, you may write an Expression. The
opposite is not true.
11. Expressions
var f = function(x) {
return (x * x) + 5;
};
!
var a = f(1);
var b = f(2 * 3);
f(x) â x2 + 5
!
f(1) â 1
f(2 Ă 3) â 36
12. Statements
var myStr = âHello Worldâ,
i;
!
for (i = 0; i < myStr.length; i++) {
console.log(myStr[i]);
}
var myStr = âHello Worldâ,
i = 0;
!
while (i < myStr.length) {
i++;
console.log(myStr[i]);
}
13. Statements
var comp = function(x, y) {
var comp = function(x, y) {
if (x > y) {
if (x > y) {
return 1;
return 1;
} else {
} else if (x < y) {
if (x < y) {
return -1;
return -1;
}
}
!
}
return 0;
!
};
return 0;
};
20. Closure
A function together with a referencing environmentâa table storing a reference to
each of the non-local variables of that function. A closure allows a function to
access non-local variables even when invoked outside its immediate lexical scope.
21. Closures
var increment = (function() {
var i = 0,
inc;
inc = function(step) {
i += step;
};
!
return inc;
}());
>>> increment(1);
1
>>> increment(1);
2
>>> increment(5);
7
>>> i
undefined
22. Closures
var counter = function(step) {
var i = 0,
inc;
!
inc = function() {
i += step;
};
!
return inc;
};
>>>
>>>
5
>>>
10
>>>
15
var n = counter(5);
n();
n();
n();
23. Brainstorm
I need to read the state of the counter without
incrementing it. How?
24. OOJS
var Counter = function(step) {
var i = 0;
!
this.inc = function() {
i += step;
};
!
this.get = function() {
return i;
}
};
>>>
>>>
0
>>>
5
>>>
5
var n = new Counter(5);
n.get();
n.inc();
n.get();
27. Requirements
We just wrote a counter object
Add a user interface
Current value should be displayed in the browser document
There should be a button to increment the count
There should be another button to reset the count
37. Review
Javascript is a general purpose,
interpreted language.
Access the outside world
through injected APIs
First-class functions
C-style syntax
DOM is an API for interacting
with the browser and itâs HTML
document
Prototypical Inheritance
Most UI code is event driven
Runs in a Virtual Machine
When used well, closures are
awesome
