X
Javascript Basics, Part 1
Table of Contents
History
HTML + CSS
HTML is a markup language (HyperText Markup Language). this means it is a method of annotating a document (introducing hierarchy through symbols, indentations, etc)
CSS (Cascading Style Sheets) is a method of determining the presentation of a document written in a markup language.
Javascript
Javascript is a programming language. This means it gives websites interactivity (interactivity not only meaning reactionary to a user, but also reactionary towards content, setting, size, etc).
Javascript was designed and written in May of 1995 to syntactically mirror languages like Java. It was originally released by the company Netscape Communications under the name of LiveScript. It was quickly renamed JavaScript (which caused some confusion) as a marketing ploy to give it a buzz (according to Wikipedia of course…).
In 2005, Jesse James Garret coined Ajax— a method of creating web applications where data can be loaded in the background, avoiding the need for full page reloads and leading to more dynamic applications. Basically, it allowed for the field of “UI/UX” to exist (Facebook was founded around the same time— the notion of a web “product” coincides with this invention).
Basics
Loading your JS
We use the <script> tag to connect our HTML page with our JavaScript file as follows:
<script type="text/javascript" src="path/file.js"></script>
We can also include javascript within a script tag:
<script type="text/javascript"> var myvar = "your javascript here"; </script>
Datatypes
There are four primary data types in Javascript.
string: "string"
number: 200
boolean: true
array: ["an", "array", "is", "another", "data type"]
Strings
Strings are used to store textual information.
We can have strings "in double quotes" or in 'single quotes'. The main thing is not to have them "in mixed quotes'.
Quotes in Strings
Invert quote type:
"this string can 'say something in quotes' like this"
Escaped quote type:
"this string can \"say something in quotes\" like this"
HTML Entities (Unicode)
Unicode is a computing industry standard for the consistent encoding, representation, and handling of text expressed in most of the world’s writing systems.
We often use Unicode to represent symbols that aren’t (aren’t) supported by HTML’s standard Latin character set.
"“financial pain points” a security deposit to rent an apartment"
“ => “
” => ”
‘ => ‘
’ => ’
Numbers
Numbers are used to represent numerical data.
Integer: 36
Float: 1.2345
Booleans
Booleans are used to represent a binary value (true or false).
Booleans come as either true or false
Arrays
Arrays can be thought of as lists of data types. A collection of information— potentially with mixed values.
The basic format of an array starts with [, ends with ], and has each value separated by a ,. Whitespaces are ignored but help with legibility.
Array Examples
Empty array: []
Single element: ["one"]
Multiple elements: ["one", 2, "three", 4.5]
Array Indexing [] + number = index into array
JavaScript is a zero indexed language:
["red", "white", "blue"][0] => "red"
["red", "white", "blue"][1] => "white"
["red", "white", "blue"][2] => "blue"
Array Details
Array length: ["red", "white", "blue"].length => 3
Note: First element at zero, last element at one less than array length.
Variables
Declaration: var myVariable; (returns undefined)
Assignment: myVariable = 3;
Declaration and Assignment: var myVariable = 3;
Reassignment:
var className = 'Web Advanced'
className = 'Web Advanced: Javascript'
Console Logging
Console logging is useful to return values and test if your code is working. console.log will probably be your #1 javascript debugging tool.
console.log("Hello world");
Console log accepts any variable or data type. Multiple values can be strung together, separated with a comma:
console.log(myVar, "Hello", 7);
The Chrome JavaScript Console, accessed via View > Developer > JavaScript Console (or alt+cmd+I):
Relational Operators
Less than: <
Greater than: >
Less than or equal to: <=
Greater than or equal to: >=
Relational Examples
1 < 2
// true
2 <= 1
// false
1 <= 1
// true
var myNum = 4;
var altNum = 6;
myNum < altNum
// true
1 > 1
// false
Equality
// == data type-converting comparison
2 == 2 // true
3 == 2 // false
"hi" == "hi" // true
"2" == 2 // true
// === strict comparison
"2" === 2 // false
2 === 2 // true
// != not equal (type-converting comparison)
2 != "2" //false
2 != 2 // false
2 != 3 // true
// !== strict comparison
2 !== "2" // true
2 !== 2 // false
2 !== 3 // true
If Statement
if(true){
// do something
}
if(false){
// do something else
}
If/else Statement
if(true){
// do something
}else {
// do something else
}
If/else if Statement
if(true){
// do something
}else if(false) {
// do something
}else{
// do something else
}
And (&&)
var name = "lukas",
school = "parsons";
if(name == "lukas" && school == "parsons"){
console.log("that's me!");
}
Or (||)
var overSixteen = true,
parentsPresent = false;
if (overSixteen || parentsPresent) {
console.log('Amazing...you can go to an R-rated movie.');
}
Basic Math
Addition: 1 + 1 = 2
Subtraction: 1 - 1 = 0
Multiplication: 5 * 3 = 15
Division: 10 / 2 = 5
Order of operations: (10 + 2)/6 = 2, 10 + 2/6 = 10.3333334
Modulus: 4 % 2 = 0, 5 % 2 = 1 (a modulus gives the remainder— good for determining odds/evens, etc)
Increment/Decrement (++, –)
Increment:
myVar = myVar + 1;
myVar++;
Decrement:
myVar = myVar - 1;
myVar--;
For Loop
A for loop is used to repeat a sequence of actions (insteading of typing those actions out for each and every possible case).
for (var multiplier = 1; multiplier <= 10; multiplier++) {
var result = multiplier * 6;
console.log(result);
}
Array Iteration
var array = [1, 2, 3];
for (var counter = 0; counter < array.length; counter++) {
console.log(array[counter]);
}
Basic DOM Manipulation
To add new elements to your html document via javascript:
1) Make sure you have an existing element to append your new elements to.
2) Create your element in javascript: var element = document.createElement("div");
3) Give your new element a class name: element.className = "important"
4) to populate your element, you have several options:
4a) you can give your element a text node:
var element = document.createElement("div");
element.className = "important"
var node = document.createTextNode("some text");
element.appendChild(node);
document.getElementById('body').appendChild(element)
4b) Or you can use javascript’s template literals, with preset variables:
var element = document.createElement("div");
element.className = "important"
var content = "some content",
subtitle = "a subtitle"
element.innerHTML = `
<h1>${content}</h1>
<h2>${subtitle}</h2>
`
document.getElementById('wrapper').appendChild(element);
where ${variable} is used to output any changing content
In Class Examples
Example 1:
A basic array outputting information to the console:
var simpleArray = [1,2,3,4,5,6,7,8,9,10]
for (var i = 0; i < simpleArray.length; i++){
if(simpleArray[i] % 2 == 0){
console.log("even: " + simpleArray[i])
} else{
console.log("odd: " + simpleArray[i])
}
}
Example 2:
A complex array consisting of subarrays
var complexArray = [[4.5, "welcome"], [2, "to web"], [6, "advanced"]]
for(var l = 0; l < complexArray.length; l++){
var element = document.createElement("div");
element.className = "module"
element.innerHTML = `
<h1 style="font-size:${complexArray[l][0]}rem;">${complexArray[l][1]}</h1>
`
document.getElementById('wrapper').appendChild(element);
}
In Class Exercise
Create two or more arrays of equal length.
Using a for loop, iterate through your arrays, combining each corresponding array value in an interesting way using template literals. Think about the variables you have at your disposal (array values, your for loop counter) and how you can use these to create surprising combinations.
Output your results into the DOM.