Introduction to JavaScript
HTML -> to structure web pages
CSS -> to make them beautiful
JavaScript -> to program the behavior of the website
CSS -> to make them beautiful
JavaScript -> to program the behavior of the website
JavaScript is one of the most popular and widely used programming language
in the world right now. It is growing faster than any other langauge
Companies like Netflix, Walmart and PayPal build entire applicatios around JavaScript
here is the average salary of a JS Developer
72,000/Year. It is a great opportunity to get a good job out of learning JS
Can work as a front-end developer, back-end developer, and full-stack developer
For a long JS was used in browsers to build interactive web pages
but now with huge community support and investments by companies
JavaScript today can make web/mobile apps, real-time networking apps, command-line tools, games
Designed originally only on browser which run by the JavaScript Engine
Firefox: SpiderMonkey
Chrome: V8
Node is build by JavaScript engine and embedded inside a C++ prgram
so we can now run JS outside of browser, which means we can build the backend for our web and mobile application,
1. browser - Developer tools, web application - codepen
2. Code editors - Node, Atom
1. browser - Developer tools, web application - codepen
2. Code editors - Node, Atom
Console.log("Hello World")/Console.log('Hello World');/alert('yo');2+2;
a feature for debugging purposes, this is useful as you don't have to remove your debugging code when you deploy to production
1. Web browser
2. VSC
3. CodePen.io and today we will be using codepen.io for the class
a feature for debugging purposes, this is useful as you don't have to remove your debugging code when you deploy to production
1. Web browser
2. VSC
3. CodePen.io and today we will be using codepen.io for the class
Dynamic Typing
One thing seperate JavaScript from other programming language is a Dynamic Typing
In static, the type of that variable is set and can not be change in the future
In dynamic, you can change it anytime you want and as well as during the program is running, so called the run-time Use - typeof name;
age = 30,age = 30.1 still number, we do not have 2 types of numbers, like floating points, integers, and double number selectedChoice = object;
In static, the type of that variable is set and can not be change in the future
In dynamic, you can change it anytime you want and as well as during the program is running, so called the run-time Use - typeof name;
age = 30,age = 30.1 still number, we do not have 2 types of numbers, like floating points, integers, and double number selectedChoice = object;
variable
we use variables to store data temporarily
you have different box and you label them, can easily get it
name of variable;
let name;
console.log(name);
let name = 'Jay';
// cannot be reserved keyword;
// should be meaningful
// cant start with number
// cannot contain space or hyphen(-)
// Case sensitive
let firstName ~~camelnotation
let firstName = 'Mosh', lastName = "Jay";
// cannot be reserved keyword;
// should be meaningful
// cant start with number
// cannot contain space or hyphen(-)
// Case sensitive
let firstName ~~camelnotation
let firstName = 'Mosh', lastName = "Jay";
Constant
const interestRate = 1,
let interestRate=0.3;
always can change it later; console.log(interestRate); change let to const; save the changes the error occured; use let if you want change the variables;
const interestRate = 1,
let interestRate=0.3;
always can change it later; console.log(interestRate); change let to const; save the changes the error occured; use let if you want change the variables;
Primitive/ values Types
which includes: String, Number, Booolean undefined, Null
let name = "Jay"; String Literal
let age = 30; Number
let isRight = true;
let firstName = undefined;
let selectedChoice = null;
undefined is used when a variable is declared but not assigned with a value
null is used to assign a non-value to a variable
which includes: String, Number, Booolean undefined, Null
let name = "Jay"; String Literal
let age = 30; Number
let isRight = true;
let firstName = undefined;
let selectedChoice = null;
undefined is used when a variable is declared but not assigned with a value
null is used to assign a non-value to a variable
Reference Types
In a reference types there are object, array, and function. what is a object?
a person could be an object; we could put entities into objects instead of referencing differently, we could put it in a line.
we make an object and we need key value pairs
let name = 'Jay';
let age = 30;
to get cleaner
(use colon)
let person ={ name: "Jay"; age: 30; }
console.log(person);
two ways of changing it, the first is the Dot notation
person.name = "Nick";
console.log(person.name);
the second way is Bracket Notation
person["name"] = "Nate";
dot notation is shorter
Array
sometime you will be dealing with a list of objects
for example a list of color that the user just selected
in situation like that we use array to store those values
let selectedColors = [];
[]--> array, empty array,
let selectedColors = ['red', 'blue'];
console.log(selectedColors);
note that each element has a index and that determines the position of the element
index of the first element is 0, index of the second element is 1
so if you want to access an element in array, we need to use this index
console.log(selectedColors[0]);
earlier that I said JavaScript is a dynamic language so the type of variable
can change at runtime the same and which it can be work in array as well
selectedColors[2] = 'green';
other programming langauge that is not dynamic language has to follow strictly to its own types
which will cause error while running it;
selectedColors[3] = 1;
an array can be an object and it can represent a list of items
and if you want to check on the length of the array you can use build in property to check it out,
which is the name of the array,
console.log(selectedColors.length);
functions
they are fundamental blocks in JavaScript
a function is a set of statements that performs a task or calculates a value
and I will show you how you do it,
// display a message on the console
function greet(){
//body of the function -- place to add statements and gain logic in the application
console.log('Hello World'); -- semi-colon to close it
}
now we need to call the function by declaring it
greet();
functions can have inputs to change how it behave
so we can add variables inside the bracket and we refer this as a parameter
so this function has one parameter, which means the parameter is only meaningful inside of the function
and it will not be accessible outside of the scope
and now we have to change function to include this parameter in the statement,
console.log('Hello' + name);
so to call the function, we have to pass a variable or name parameter to the function to make it work
greet('Jay');
we refer to this as an argument, so Jay is the argument to the function
and name is the parameter of the greet function
let me to explain it better, so a parameter is what we have here at the time of declaration
but the argument is the actual value with supply for that parameter
run it;
greet('Jay');
greet('Nick');
functions can have one or more parameters, so like
function greet(name, lastName){
console.log('Hello ' + name + '' + lastName);
}
greet('Jay');
we did not pass a value, by default it is undefine;
greet('Jay', 'Zhu');
another example could be calculating some math for addition
so like
function plus(number){
// we need to return the answer back to whoever is calling it so we use return
// return keyword
return number+number;
}
console.log(plus(2));
we can use it on a vairable for this function like
let number = plus(2);
console.log(number);
or else we can do it in one line of code like
console.log(plus(2));
and we will get the same output for it, because when the JavaScript engine runs it
it will first look at the value inside the bracket then it will pass down to the system build in functions.
and thats is all for today, before we head on for some kahoot questions, do you have any questions on each sections?
all right lets go for some gaming time.
In a reference types there are object, array, and function. what is a object?
a person could be an object; we could put entities into objects instead of referencing differently, we could put it in a line.
we make an object and we need key value pairs
let name = 'Jay';
let age = 30;
to get cleaner
(use colon)
let person ={ name: "Jay"; age: 30; }
console.log(person);
two ways of changing it, the first is the Dot notation
person.name = "Nick";
console.log(person.name);
the second way is Bracket Notation
person["name"] = "Nate";
dot notation is shorter
Array
sometime you will be dealing with a list of objects
for example a list of color that the user just selected
in situation like that we use array to store those values
let selectedColors = [];
[]--> array, empty array,
let selectedColors = ['red', 'blue'];
console.log(selectedColors);
note that each element has a index and that determines the position of the element
index of the first element is 0, index of the second element is 1
so if you want to access an element in array, we need to use this index
console.log(selectedColors[0]);
earlier that I said JavaScript is a dynamic language so the type of variable
can change at runtime the same and which it can be work in array as well
selectedColors[2] = 'green';
other programming langauge that is not dynamic language has to follow strictly to its own types
which will cause error while running it;
selectedColors[3] = 1;
an array can be an object and it can represent a list of items
and if you want to check on the length of the array you can use build in property to check it out,
which is the name of the array,
console.log(selectedColors.length);
functions
they are fundamental blocks in JavaScript
a function is a set of statements that performs a task or calculates a value
and I will show you how you do it,
// display a message on the console
function greet(){
//body of the function -- place to add statements and gain logic in the application
console.log('Hello World'); -- semi-colon to close it
}
now we need to call the function by declaring it
greet();
functions can have inputs to change how it behave
so we can add variables inside the bracket and we refer this as a parameter
so this function has one parameter, which means the parameter is only meaningful inside of the function
and it will not be accessible outside of the scope
and now we have to change function to include this parameter in the statement,
console.log('Hello' + name);
so to call the function, we have to pass a variable or name parameter to the function to make it work
greet('Jay');
we refer to this as an argument, so Jay is the argument to the function
and name is the parameter of the greet function
let me to explain it better, so a parameter is what we have here at the time of declaration
but the argument is the actual value with supply for that parameter
run it;
greet('Jay');
greet('Nick');
functions can have one or more parameters, so like
function greet(name, lastName){
console.log('Hello ' + name + '' + lastName);
}
greet('Jay');
we did not pass a value, by default it is undefine;
greet('Jay', 'Zhu');
another example could be calculating some math for addition
so like
function plus(number){
// we need to return the answer back to whoever is calling it so we use return
// return keyword
return number+number;
}
console.log(plus(2));
we can use it on a vairable for this function like
let number = plus(2);
console.log(number);
or else we can do it in one line of code like
console.log(plus(2));
and we will get the same output for it, because when the JavaScript engine runs it
it will first look at the value inside the bracket then it will pass down to the system build in functions.
and thats is all for today, before we head on for some kahoot questions, do you have any questions on each sections?
all right lets go for some gaming time.