WELCOME TO
JAVASCRIPT 101
SKG Node.js Meetup
Let's talk about
- What is it
- Who uses it
- Variables
- Functions
- Objects
Kostas Bariotis
http://kostasbariotis.com
- Back End Engineer @
- Blogger
- Have worked mostly with Web Technologies
@kbariotis
What is JavaScript
- Standard codename "ECMAScript"
- Is not "Interpretive Java"
- The scripting language for Web pages
- The sugar in Non-Browser Environments
-
Object-oriented language with first-class functions
-
Executes at Runtime
Who uses JavaScript
- Web Browsers
- Servers (Node.js, etc)
- IoT
- Cross Platform Apps
- Native Apps
Most Popular Technologies
StackOverflow Survey 2015
Compensation by Technology
StackOverflow Survey 2015
Variables
- Use var to declare
- Loosely Typing
- Types
- Type Coersion
- Hoisting
Primitive Values
- Number
- String
- Boolean
- Null
- Undefined
- NaN
Reference Values
- Object
- Function
- Array
- Date
- RegExp
/* Java Example (strong typing) */
int a = 13; // int declaration
String b = "thirteen"; // String declaration
/* JavaScript Example (loose typing) */
var a = 13; // Number declaration
var b = "thirteen"; // String declaration
/* Type Coersion */
7 + 7 + 7; // = 21
7 + 7 + "7"; // = 147
"7" + 7 + 7; // = 777
1 == true; // = true
1 === true; // = false
7 == "7"; // = true
7 === "7"; // = false;
console.log(typeof "Javascript 101"); // string
console.log(typeof 1); // number
console.log(typeof undefined); // undefined
console.log(typeof {}); // object
console.log(typeof function(){}); // function
console.log(typeof []); // object
console.log(typeof null); // object
console.log(typeof NaN); // number
Do not use them!
Global Variables
Hoisting
bla = 2
var bla;
console.log(bla); // 2
// is implicitly understood as:
var bla;
bla = 2;
Always declare variables at the top!
var obj = {};
Objects
var obj = new Object();
as in Object Oriented Programming
- Not Class Oriented
- Unordered Collection of properties
- Key-Value Structures
- Array Access or Object Access
- Created in Runtime
- Object Literal --> {}
- Prototypical Inheritance
/* Javascript Objects */
var Course = {
property: "Javascript 101",
method: function() {
console.log("Are we
done yet??!?!");
};
}
Course.method();
Course['method']();
/* PHP Objects */
class Object {
var $property = "Javascript 101";
public function method() {
print_r("Are we done
yet!?!?!");
}
}
var Course = new Object();
Course.method();
/* Method 2 */
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
var rand = new Person("Rand McKinnon", 33, "M");
var ken = new Person("Ken Jones", 39, "M");
/* Method 3 */
var Animal = {
type: "Invertebrates",
displayType : function(){
console.log(this.type);
}
}
var animal1 = Object.create(Animal);
animal1.displayType();
var fish = Object.create(Animal);
fish.type = "Fishes";
fish.displayType();
Functions
- Functions are objects
- First Class Citizens
- Will have properties and values
- Is Closure
- Can create and return other functions
- Have own scope
function helloWorld() {
console.log("Hello World");
}
var helloWorld = function() {
console.log("Hello World");
}
/* Passed the Body as a String, Not Recommended */
var helloWorld = new Function('console.log("Hello World");');
helloWorld();
function makeAdder(x) {
return function(y) {
return x + y;
};
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
console.log(add5(2)); // 7
console.log(add10(2)); // 12
console.log(makeAdder(5)(2)); // 7
/* Function Expression */
alert(foo()); // ERROR! foo wasn't loaded yet
var foo = function() { return 5; }
/* Function Declaration */
alert(foo()); // Alerts 5. Declarations are loaded before any code can run.
function foo() { return 5; }
Function Declaration vs Function Expression
Functions Arguments
- Store in pseudo-array `arguments`
- Primitives Type arguments are always passed by Value
- Reference Type arguments are always passed by Reference
var testFunction = function(a, b, obj){
obj.modified = true;
console.log(arguments);
};
var obj = {};
obj.modified = false;
console.log(obj.modified); // "false"
testFunction(1, a, obj); // { '0': 1, '1': a, '2': { modified: true } }
console.log(obj.modified); // "true"
JQUERY IS NOT JAVASCRIPT
Thank you fellows!
Follow me, @kbariotis.