Coursera test repo
- https://github.com/jhu-ep-coursera
- https://clearlydecoded.com/
- https://clearlydecoded.com/recommended-books/
Some interesting CSS / bootstrap features:
- text-shadow -> Adds shadow to text
- class="visible-md visible-lg" -> bootstrap classes to hide elements on smaller screens
- now replaced by Hiding Elements?
- Lecture 41: define functions
var a = function () {
var message = "inside a";
console.log("a: message = " + message);
}
a();- Lecture 42: define variables, if else, undefined
// should be undefined
var x;
console.log(x);
if (x == undefined) {
console.log("x is undefined");
}
x = 5;
if (x == undefined) {
console.log("x is undefined");
}
else {
console.log("x has been defined");
}- See Lecture 43 is a nice JS cheat sheet!
- String and math operations
- Equality (see below)
- If statement and which values are interpreted as true or false
- For loop
Standard vs. strict equality:
// ***** Equality
var x = 4, y = 4;
if (x == y) {
console.log("x=4 is equal to y=4");
}
x = "4";
if (x == y) {
console.log("x='4' is equal to y=4");
}
// ***** Strict equality
if (x === y) {
console.log("Strict: x='4' is equal to y=4");
}
else {
console
.log("Strict: x='4' is NOT equal to y=4");
}- Lecture 44: Handling default values
// Default values
function orderChickenWith(sideDish) {
sideDish = sideDish || "whatever!";
console.log("Chicken with " + sideDish);
}
orderChickenWith("noodles");
orderChickenWith();- Lecture 45: Creating Objects
// [...]
// Better way: object literal
var facebook = {
name: "Facebook",
ceo: {
firstName: "Mark",
favColor: "blue"
},
"stock of company": 110
};
console.log(facebook.ceo.firstName);
var stockPropName = "stock of company";
console.log("Stock price is: " +
company[stockPropName]);-
Lecture 46: more on Functions
-
Lecture 47: referencing variables
-
Lecture 48: Function constructors, prototype and this
-
Lecture 49: Object literals and the this Keyword
-
Lecture 50: Arrays
- Index starts as 0
var array = new Array();
array[0] = "Yaakov";
array[1] = 2;
array[2] = function (name) {
console.log("Hello " + name);
};
array[3] = {course: " HTML, CSS & JS"};
console.log(array);
// call function defined on index 2 with value on index 0
array[2](array[0]);
console.log(array[3].course);
// Short hand array creation
var names = ["Yaakov", "John", "Joe"];
console.log(names);
// loop over array
for (var i = 0; i < names.length; i++) {
console.log("Hello " + names[i]);
}
// automatically extends array to length 100
names[100] = "Jim";
for (var i = 0; i < names.length; i++) {
console.log("Hello " + names[i]);
}
// iterate through values
var names2 = ["Yaakov", "John", "Joe"];
var myObj = {
name: "Yaakov",
course: "HTML/CSS/JS",
platform: "Courera"
};
for (var prop in myObj) {
console.log(prop + ": " + myObj[prop]);
}
for (var name in names2) {
console.log("Hello " + names2[name]);
}
names2.greeting = "Hi!";
// iterates through all object properties! ("name" is deprecated)
for (var name in names2) {
console.log("Hello " + names2[name]);
}-
Lecture 51: Closures
-
Lecture 52: Fake Namespaces
- 3 JS are called: script1, script2, app in the order they are embedded in html and so overwrite variables:
// script1.js
var name = "Yaakov"
function sayHello () {
console.log("Hello " + name);
};
// script2.js
var name = "John"
function sayHi () {
console.log("Hi " + name);
};
// app.js
sayHello();
sayHi();
// prints out same name:
// Hello John
// Hi John- Create own namespace:
// script1.js
var yaakovGreeter = {};
yaakovGreeter.name = "Yaakov";
yaakovGreeter.sayHello = function () {
console.log("Hello " + yaakovGreeter.name);
}
// script2.js
var johnGreeter = {};
johnGreeter.name = "John";
johnGreeter.sayHi = function () {
console.log("Hi " + johnGreeter.name);
}
// app.js
yaakovGreeter.sayHello();
johnGreeter.sayHi();
// prints out different names:
// Hello Yaakov
// Hi John- Immediately Invoked Function Expression (IIFE):
// is immediately executed with "Coursera!" as name
(function (name) {
console.log("Hello " + name);
})("Coursera!");- Expose to window outside ("global")
// script1.js
(function (window) {
var yaakovGreeter = {};
yaakovGreeter.name = "Yaakov";
var greeting = "Hello ";
yaakovGreeter.sayHello = function () {
console.log(greeting + yaakovGreeter.name);
}
window.yaakovGreeter = yaakovGreeter;
})(window);
// app.js
yaakovGreeter.sayHello();- Lecture 53: DOM Manipulation
- DOM - Document Object Model
- in JS document object represents the web page
- Get and manipulate HTML elements
function sayHello () {
var name =
document.getElementById("name").value; // get element by name and then its value
var message = "<h2>Hello " + name + "!</h2>"; // add h2 tag
document
.getElementById("content")
.innerHTML = message; // innerHTML renders HTML code as <h2></h2>
if (name === "student") {
var title =
document
.querySelector("#title") // select by query (id)
.textContent;
title += " & Lovin' it!";
document
.querySelector("h1") // select by query (element type)
.textContent = title;
}
}- Lecture 54: Handling Events
- Add JS functions to events (line onclick) of HTML page
- DOMContentLoaded event -> see below
function sayHello (event) {
// this points to element emitting the event
this.textContent = "Said it!"; // set content of that element
// [...]
}
// Unobtrusive event binding
document.querySelector("button")
.addEventListener("click", sayHello);
// use this to load embedded content after HTML page has loaded
// -> JS can be imported in HTML header instead of end of HTML content
document.addEventListener("DOMContentLoaded",
function (event) {
// [...]
}
)- Lecture 55: The event Argument
// add to object "body" "Mousemove" event and print mouse coordinates of shift is pressed
document.querySelector("body")
.addEventListener("mousemove",
function (event) {
if (event.shiftKey === true) {
console.log("x: " + event.clientX);
console.log("y: " + event.clientY);
}
}
);-
Lecture 56: HTTP Basics
- URI: Uniform Resource Identifier
GET /index.html?firstName=Yaakov HTTP/1.1GET: Method/index.html: URI StringfirstName=Yaakov: Query StringHTTP/1.1: HTTP Version
- GET method: Retrieves source, data passed as part of URI (i.e. query)
- POST method: Sends data to server to be processed, data sent in message body
- request headers:
- Host: coursera.org
- Accept-Charset: utf-8
- response structure:
- HTTP/1.1: HTTP Version
- 200: response status code
- OK: english response text of status code
-
Lecture 57: Ajax Basics
- Asynchronous Javascript And XML
- XML not much used today, but plain text and JSON
- Instead of responding with whole HTML web page, only small part is returned (much faster)
-
Lecture 58: Processing JSON
- JSON not a JS Object Literal, just a string
- Needs conversion
var obj = JSON.parse(jsonString);var str = JSON.stringify(obj);
-
Lecture 59: Using JQuery (for example website)
-
JQuery is a JS library with nice features
$(function () { // Same as document.addEventListener("DOMContentLoaded"...
// Same as document.querySelector("#navbarToggle").addEventListener("blur",...
$("#navbarToggle").blur(function (event) {
var screenWidth = window.innerWidth;
if (screenWidth < 768) {
$("#collapsable-nav").collapse('hide');
}
});
});- Lecture 61: Using JQuery (for example website)
- (Similar to Python f-strings) replace keywords in double curly braces in strings
<div class="col-md-3 col-sm-4 col-xs-6 col-xxs-12">
<a href="#" onclick="$dc.loadMenuItems('{{short_name}}');">
<div class="category-tile">
<img width="200" height="200" src="images/menu/{{short_name}}/{{short_name}}.jpg" alt="{{name}}">
<span>{{name}}</span>
</div>
</a>
</div>// Return substitute of '{{propName}}'
// with propValue in given 'string'
var insertProperty = function (string, propName, propValue) {
var propToReplace = "{{" + propName + "}}";
string = string.replace(new RegExp(propToReplace, "g"), propValue);
return string;
};