Download to read offline
![JAVASCRIPT
VARIABLES, OPERATORS & COMMENTS
var myVariable = 'BurningKeyboards';
myVariable = 'Perpetuum';
var myIntVariable = 10;
var myBoolVariable = true;
var myArrayVariable = [1, 'Bob', 'Steve', 10];
var myObjectVariable = document.querySelector('h1');
var add = 6 + 9;
var concat = "Hello " + "world!";
var subtract = 9 - 3;
var multiply = 8 * 2;
var divide = 9 / 3;
/*
Everything in between is a comment.
*/
// This is a one line comment
7](https://image.slidesharecdn.com/05-javascript-burningkeyboards-170704140725/85/05-JavaScript-burningkeyboards-7-320.jpg)
![JAVASCRIPT
LOOPS
// while loop
var i = 0;
while( i < 10 ) {
console.log(i);
i += 1;
}
// do while loop
var i = 0;
do {
console.log(i);
i += 1;
} while ( i < 10 )
// for loop
for ( var i = 0; i < 10; i++ ) {
console.log(i);
}
// for in statements
var obj = {a:1, b:2, c:3};
for ( var prop in obj ) {
// check if property is inherited or not
if(obj.hasOwnProperty(prop)) {
console.log("obj." + prop + " = " + obj[prop]);
}
}
9](https://image.slidesharecdn.com/05-javascript-burningkeyboards-170704140725/85/05-JavaScript-burningkeyboards-9-320.jpg)
![JAVASCRIPT
ARRAYS
// create an empty array
var myArray = [];
// create array with items. Can store any type
var myOtherArray = [myArray, true, "A random string"];
// call specific value in an array
myOtherArray[0];
// change value for this item
myOtherArray[0] = false;
// add to end of array
myOtherArray[myOtherArray.length] = "new stuff";
// or you can use push()
myOtherArray.push("new stuff");
// you can remove this last item by using pop()
myOtherArray.pop();
// shift and unshift will do the same for the begging of the Array
myOtherArray.shift();
myOtherArray.unshift(1,2);
// this will add 1 and 2 to beginning of array and return new length
myOtherArray.splice(2, 1);
// this will remove and return the third item only.
// first arg is where to start and second is how many things to splice. this example is 1.
10](https://image.slidesharecdn.com/05-javascript-burningkeyboards-170704140725/85/05-JavaScript-burningkeyboards-10-320.jpg)
![JAVASCRIPT
OBJECTS
// create an object
var newObject = {};
// add a property to object
newObject.newPropName = "super fly";
// or other syntax
newObject['other new prop name'] = "mildly fly";
// Now newObject.newPropName will return super fly
newObject.newPropName;
// now to delete
delete newObject.newPropName;
11](https://image.slidesharecdn.com/05-javascript-burningkeyboards-170704140725/85/05-JavaScript-burningkeyboards-11-320.jpg)
![JAVASCRIPT
TYPE CHECKING
var myNumber = 1;
var myString = "some Text";
var bools = true;
var myArray = [];
var myObj = {};
var notNumber = NaN;
var nullified = null;
typeof myNumber; // returns "number"
typeof myString; // returns "string"
typeof bools; // returns "boolean"
typeof myArray; // returns "object".
// Not super helpful so must check if it has length property to see if it is an array.
typeof myArray === 'object' && myArray.hasOwnProperty('length'); // returns true
typeof myObj; // returns "object". Must do the same test as above but expect false back from check.
typeof notNumber; // returns "number". this is confusing but returns this as NaN is part of the global Number object.
// must check if isNaN()
typeof notNumber === 'number' && isNaN(notNumber); // returns true if type of is "number" and is still NaN
12](https://image.slidesharecdn.com/05-javascript-burningkeyboards-170704140725/85/05-JavaScript-burningkeyboards-12-320.jpg)
![JAVASCRIPT
VARIABLES, OPERATORS & COMMENTS
var myVariable = 'BurningKeyboards';
myVariable = 'Perpetuum';
var myIntVariable = 10;
var myBoolVariable = true;
var myArrayVariable = [1, 'Bob', 'Steve', 10];
var myObjectVariable = document.querySelector('h1');
var add = 6 + 9;
var concat = "Hello " + "world!";
var subtract = 9 - 3;
var multiply = 8 * 2;
var divide = 9 / 3;
/*
Everything in between is a comment.
*/
// This is a one line comment
7](/p?url=https%3A%2F%2Fimage.slidesharecdn.com%2F05-javascript-burningkeyboards-170704140725%2F85%2F05-JavaScript-burningkeyboards-7-320.jpg&__src=https%3A%2F%2Fwww.slideshare.net%2Fslideshow%2F05-javascript-burningkeyboards%2F77502738&__type=image)
![JAVASCRIPT
LOOPS
// while loop
var i = 0;
while( i < 10 ) {
console.log(i);
i += 1;
}
// do while loop
var i = 0;
do {
console.log(i);
i += 1;
} while ( i < 10 )
// for loop
for ( var i = 0; i < 10; i++ ) {
console.log(i);
}
// for in statements
var obj = {a:1, b:2, c:3};
for ( var prop in obj ) {
// check if property is inherited or not
if(obj.hasOwnProperty(prop)) {
console.log("obj." + prop + " = " + obj[prop]);
}
}
9](/p?url=https%3A%2F%2Fimage.slidesharecdn.com%2F05-javascript-burningkeyboards-170704140725%2F85%2F05-JavaScript-burningkeyboards-9-320.jpg&__src=https%3A%2F%2Fwww.slideshare.net%2Fslideshow%2F05-javascript-burningkeyboards%2F77502738&__type=image)
![JAVASCRIPT
ARRAYS
// create an empty array
var myArray = [];
// create array with items. Can store any type
var myOtherArray = [myArray, true, "A random string"];
// call specific value in an array
myOtherArray[0];
// change value for this item
myOtherArray[0] = false;
// add to end of array
myOtherArray[myOtherArray.length] = "new stuff";
// or you can use push()
myOtherArray.push("new stuff");
// you can remove this last item by using pop()
myOtherArray.pop();
// shift and unshift will do the same for the begging of the Array
myOtherArray.shift();
myOtherArray.unshift(1,2);
// this will add 1 and 2 to beginning of array and return new length
myOtherArray.splice(2, 1);
// this will remove and return the third item only.
// first arg is where to start and second is how many things to splice. this example is 1.
10](/p?url=https%3A%2F%2Fimage.slidesharecdn.com%2F05-javascript-burningkeyboards-170704140725%2F85%2F05-JavaScript-burningkeyboards-10-320.jpg&__src=https%3A%2F%2Fwww.slideshare.net%2Fslideshow%2F05-javascript-burningkeyboards%2F77502738&__type=image)
![JAVASCRIPT
OBJECTS
// create an object
var newObject = {};
// add a property to object
newObject.newPropName = "super fly";
// or other syntax
newObject['other new prop name'] = "mildly fly";
// Now newObject.newPropName will return super fly
newObject.newPropName;
// now to delete
delete newObject.newPropName;
11](/p?url=https%3A%2F%2Fimage.slidesharecdn.com%2F05-javascript-burningkeyboards-170704140725%2F85%2F05-JavaScript-burningkeyboards-11-320.jpg&__src=https%3A%2F%2Fwww.slideshare.net%2Fslideshow%2F05-javascript-burningkeyboards%2F77502738&__type=image)
![JAVASCRIPT
TYPE CHECKING
var myNumber = 1;
var myString = "some Text";
var bools = true;
var myArray = [];
var myObj = {};
var notNumber = NaN;
var nullified = null;
typeof myNumber; // returns "number"
typeof myString; // returns "string"
typeof bools; // returns "boolean"
typeof myArray; // returns "object".
// Not super helpful so must check if it has length property to see if it is an array.
typeof myArray === 'object' && myArray.hasOwnProperty('length'); // returns true
typeof myObj; // returns "object". Must do the same test as above but expect false back from check.
typeof notNumber; // returns "number". this is confusing but returns this as NaN is part of the global Number object.
// must check if isNaN()
typeof notNumber === 'number' && isNaN(notNumber); // returns true if type of is "number" and is still NaN
12](/p?url=https%3A%2F%2Fimage.slidesharecdn.com%2F05-javascript-burningkeyboards-170704140725%2F85%2F05-JavaScript-burningkeyboards-12-320.jpg&__src=https%3A%2F%2Fwww.slideshare.net%2Fslideshow%2F05-javascript-burningkeyboards%2F77502738&__type=image)
![JAVASCRIPT
JAVASCRIPT OOP
23
function Person(first, last, age, gender, interests) {
this.name = {
first,
last
};
this.age = age;
this.gender = gender;
this.interests = interests;
this.bio = function() {
console.log(this.name.first + ' ' + this.name.last);
if (this.gender == "male") {
console.log('He is ' + this.age + ' years old.');
console.log('He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
} else {
console.log('She is ' + this.age + ' years old.');
console.log('She likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
}
};
this.greeting = function() {
console.log('Hi! I'm ' + this.name.first + '.');
};
}](/p?url=https%3A%2F%2Fimage.slidesharecdn.com%2F05-javascript-burningkeyboards-170704140725%2F85%2F05-JavaScript-burningkeyboards-23-320.jpg&__src=https%3A%2F%2Fwww.slideshare.net%2Fslideshow%2F05-javascript-burningkeyboards%2F77502738&__type=image)
Uploaded byDenis Ristic
05 JavaScript #burningkeyboards
The document provides an overview of JavaScript, including that it is used to make web pages interactive, runs in browsers, and supports built-in. It discusses the DOM, common events, using the console, variables, operators, comments, conditionals, loops, arrays, objects, type checking, functions, events, timers, accessing and manipulating DOM elements, working with CSS/classes, and AJAX requests.
