Read "Streaming Systems" 1&2, Streaming 101 Read "F1, a distributed SQL database that scales" Read "Zanzibar, Google’s Consistent, Global Authorization System" Read "Spanner, Google's Globally-Distributed Database" Read "Designing Data-intensive applications" 12, The Future of Data Systems IOS development with Swift Read "Designing Data-intensive applications" 10&11, Batch and Stream Processing Read "Designing Data-intensive applications" 9, Consistency and Consensus Read "Designing Data-intensive applications" 8, Distributed System Troubles Read "Designing Data-intensive applications" 7, Transactions Read "Designing Data-intensive applications" 6, Partitioning Read "Designing Data-intensive applications" 5, Replication Read "Designing Data-intensive applications" 3&4, Storage, Retrieval, Encoding Read "Designing Data-intensive applications" 1&2, Foundation of Data Systems Three cases of binary search TAMU Operating System 2 Memory Management TAMU Operating System 1 Introduction Overview in cloud computing 2 TAMU Operating System 7 Virtualization TAMU Operating System 6 File System TAMU Operating System 5 I/O and Disk Management TAMU Operating System 4 Synchronization TAMU Operating System 3 Concurrency and Threading TAMU Computer Networks 5 Data Link Layer TAMU Computer Networks 4 Network Layer TAMU Computer Networks 3 Transport Layer TAMU Computer Networks 2 Application Layer TAMU Computer Networks 1 Introduction Overview in distributed systems and cloud computing 1 A well-optimized Union-Find implementation, in Java A heap implementation supporting deletion TAMU Advanced Algorithms 3, Maximum Bandwidth Path (Dijkstra, MST, Linear) TAMU Advanced Algorithms 2, B+ tree and Segment Intersection TAMU Advanced Algorithms 1, BST, 2-3 Tree and Heap TAMU AI, Searching problems Factorization Machine and Field-aware Factorization Machine for CTR prediction TAMU Neural Network 10 Information-Theoretic Models TAMU Neural Network 9 Principal Component Analysis TAMU Neural Network 8 Neurodynamics TAMU Neural Network 7 Self-Organizing Maps TAMU Neural Network 6 Deep Learning Overview TAMU Neural Network 5 Radial-Basis Function Networks TAMU Neural Network 4 Multi-Layer Perceptrons TAMU Neural Network 3 Single-Layer Perceptrons Princeton Algorithms P1W6 Hash Tables & Symbol Table Applications Stanford ML 11 Application Example Photo OCR Stanford ML 10 Large Scale Machine Learning Stanford ML 9 Anomaly Detection and Recommender Systems Stanford ML 8 Clustering & Principal Component Analysis Princeton Algorithms P1W5 Balanced Search Trees TAMU Neural Network 2 Learning Processes TAMU Neural Network 1 Introduction Stanford ML 7 Support Vector Machine Stanford ML 6 Evaluate Algorithms Princeton Algorithms P1W4 Priority Queues and Symbol Tables Stanford ML 5 Neural Networks Learning Princeton Algorithms P1W3 Mergesort and Quicksort Stanford ML 4 Neural Networks Basics Princeton Algorithms P1W2 Stack and Queue, Basic Sorts Stanford ML 3 Classification Problems Stanford ML 2 Multivariate Regression and Normal Equation Princeton Algorithms P1W1 Union and Find Stanford ML 1 Introduction and Parameter Learning

Javascript basics

2017-12-27

Introduction

Primitives

// Numbers
4
9.3
-10
10 % 3


// Strings
"Hello"
"hi " + "day"
"Sing \"hi\" "
"hello".length
"hello"[1] // get "e"


// Booleans
true
false

//null and undefined
null
undefined

Variables

  • Can change the value and type of a variable
  • Name should be camel cased
  • Variables that are declared but not initialized are undefined
  • null is “explicitly nothing”
// pattern
var name =  "John";
var isTrue = true;

"hello " + name

Built-in functions

// alert: get a pop-up
alert("msg");
  

// prompt: get user input
var num = prompt("Enter a number");
    // convert input to number
if (Number(num) === 4) {
    alert("yes");
}


// console.log: print something on the console
console.log("msg");


//clear() will clear the console

Use js code in another file

Just include a script tag in the HTML code.

<script src="js_file_path"></script>

Control flow

Boolean logic

5 == "5" // equal to, perform type coercion
5 === 5
5 !== "5" // equal value and type

null == undefined
null !== undefined

true == "1"
false == "12" // true
0 == false

NaN == NaN  // false


// operators
&&
||
!


// falsy values, anything else will be truthy
null
""
0
NaN
false
undefined

Conditionals

if (age < 18) {

} else if (age < 30) {

} else {

}

Loops

// while
var i = 1;
while (i < 2) {
    i++;
}

// for
for (var i = 0; i < 5; i++) {

}

// for in
var obj = {a: 1, b: 2, c: 3};
    
for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

Functions

function capitalize(x) {
    return x.charAt(0).toUpperCase() + str.slice(1);
}

Scope

When we define something outside a function, we still have the access to that variable and the value can be changed inside that function.

var y = 99;
function print() {
    y = 100;    // no var declaration
    console.log(y);
}
print();
// y will be 100

Higher order functions

A function can take another function as input.

function hi() {
    console.log("hi");
}
setInterval(hi, 1000); // call hi() every 1 second, it will return a number as an exit flag
clearInterval(exitFlag); // exit


// anonymous func
setInterval(function() {
    console.log("hello");
}, 2000);

Arrays

// initialize
var a1 = [];
var a2 = new Array();


// arrays can hold any type of data
var a3 = ["a", 49, true, null];
a3[4] = 1;  // size is dynamic
a3.length   // 5

Array methods

MDN js Array reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

  • push/pop
    • push: add to the end of an array
    • pop: remove the last item in an array
  • shift/unshift
    • unshift: add to the front of an array
    • shift: remove the first item in an array
  • indexOf: find the index of an item in an array; -1 if none
  • slice: like substring()
var nums = [1, 2, 3];
nums.push(4);
var last = nums.pop();

Array iterations

var nums = [1, 2, 3, 4];

for (var i = 0; i < nums.length; i++) {
    console.log(nums[i]);
}

// for each
nums.forEach(function(num) {
    console.log(num);
});

function printNum(num) {
    console.log(num);
}

nums.forEach(printNum); // don't put () in, because if we do, js will call the function immediately

// define myForEach
Array.prototype.myForEach = function(func) {
    for (var i = 0; i < this.length; i++) {
        func(this[i]);
    }
}

Objects

// define
var person = {
    name: "Jack",
    age: 32,
    city: "LA"
};

// initialize
var person = {};
    // or
var person = new Object();
person.name = "Jack"; 


// access
person["name"];
person.name;


// update
person.name = "Jay";


// functions
var person = {
    name: "Jack",
    age: 32,
    city: "LA",
    greet: function(name) {
        return "Hi " + name + ", from " + this.name;    // this keyword
    }
};

var dog = {};
dog.greet = function() { return "WHOOF"; }

For the two access methods, note:

  1. Use [] if the field name start with number, obj["12a"]
  2. Lookup using a variable with [], var str = "name"; obj[str]
  3. Use [] with field name including spaces, obj["one color"]

Misc

Javascript console

In Chrome, Ctrl + Shift + J will open the Javascript console.

Map

var myMap = new Map();

var keyString = 'a string',
    keyObj = {},
    keyFunc = function() {};

// setting the values
myMap.set(keyString, "value associated with 'a string'");
myMap.set(keyObj, 'value associated with keyObj');
myMap.set(keyFunc, 'value associated with keyFunc');

myMap.size; // 3

// getting the values
myMap.get(keyString);    // "value associated with 'a string'"
myMap.get(keyObj);       // "value associated with keyObj"
myMap.get(keyFunc);      // "value associated with keyFunc"

Creative Commons License
Melon blog is created by melonskin. This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.
© 2016-2019. All rights reserved by melonskin. Powered by Jekyll.