Introduction to
JavaScript
Software Developer, Newlogic
Arnelle Balane
@arnellebalane
Slide 2
Slide 2 text
Arnelle Balane
I write code @ Newlogic
Google Developers Expert
for Web Technologies
@arnellebalane
UncaughtException
@uncaughtxcptn
Please subscribe to our
channel!
logical “or”, either or both of the values
Values, types, and operators
Logical Operators
||
&& logical “and”, both values should be true
should be true
Slide 20
Slide 20 text
Values, types, and operators
Falsy Values
false
null undefined
'' 0 NaN
Slide 21
Slide 21 text
Variables
Slide 22
Slide 22 text
Variables
Declaring variables
let
var
const
let name = 'arnelle';
const name = 'arnelle';
var name = 'arnelle';
Slide 23
Slide 23 text
Variables
Valid names
first_name
name
lastName
balance$
address1
PhoneNumber
Slide 24
Slide 24 text
Variables
Invalid names
first-name
2ndItem
const
Slide 25
Slide 25 text
Exercises
01-data-types-variables
Slide 26
Slide 26 text
Conditional execution
Slide 27
Slide 27 text
if-else
statement
Conditional execution
if (condition) {
} else if (condition) {
} else {
}
Slide 28
Slide 28 text
if-else
statement
Conditional execution
const age = 12;
if (age >= 18) {
// A
} else {
// B
}
Slide 29
Slide 29 text
Iteration
Slide 30
Slide 30 text
while loop
Iteration
while (condition) {
}
Slide 31
Slide 31 text
while loop
Iteration
while (true) {
console.log('hi');
}
Slide 32
Slide 32 text
while loop
Iteration
let count = 0;
while (count < 10) {
console.log('hi');
count = count + 1;
}
Slide 33
Slide 33 text
for loop
Iteration
for (initialize; condition; update) {
}
Slide 34
Slide 34 text
for loop
Iteration
for (
let count = 0;
count < 10;
count = count + 1
) {
console.log('hi');
}
Slide 35
Slide 35 text
Exercises
02-conditionals-and-iteration
Slide 36
Slide 36 text
Functions
Slide 37
Slide 37 text
Declaring a function
Functions
function add(num1, num2) {
return num1 + num2;
}
Slide 38
Slide 38 text
Calling a function
Functions
function add(num1, num2) {
return num1 + num2;
}
add(1, 2); // 3
Slide 39
Slide 39 text
Function expressions
let add = function(num1, num2) {
return num1 + num2;
};
Functions
class Person {
constructor(name) {
this.name = name;
}
sayName() {
console.log(this.name);
}
}
class
keyword
Object-Oriented Programming
Slide 65
Slide 65 text
Exercises
05-classes
Slide 66
Slide 66 text
JavaScript in the
Browser
Part Three
Slide 67
Slide 67 text
Loading JavaScript file
JavaScript in the browser
Slide 68
Slide 68 text
Document Object Model
Slide 69
Slide 69 text
Hello World
One
Two
Three
Click Here
html
body
h1 ul button
Hello World Click Here
ul ul
ul
One Two Three
Slide 70
Slide 70 text
Querying elements
Document Object Model
let btn = document.querySelector('button');
What we can do:
https://developer.mozilla.org/en-US/docs/Web/API/Element
Slide 71
Slide 71 text
Events
Document Object Model
btn.onclick = () => {
console.log('click!');
};
All the events!
https://developer.mozilla.org/en-US/docs/Web/Events
Slide 72
Slide 72 text
Events
Document Object Model
btn.addEventListener('click', () => {
console.log('click!');
});
All the events!
https://developer.mozilla.org/en-US/docs/Web/Events
Slide 73
Slide 73 text
AJAX
( Asynchronous JavaScript and XML )
Slide 74
Slide 74 text
let xhr = new XMLHttpRequest();
XHR
AJAX
https://developer.mozilla.org/en-US/docs/We
b/API/XMLHttpRequest
Slide 75
Slide 75 text
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
};
XHR
AJAX
Slide 76
Slide 76 text
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState === xhr.DONE) {
console.log(xhr.responseText);
}
};
XHR
AJAX
Slide 77
Slide 77 text
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState === xhr.DONE) {
console.log(xhr.responseText);
}
};
xhr.open('GET', url);
xhr.send();
XHR
AJAX
Slide 78
Slide 78 text
Exercises
06-browser
Slide 79
Slide 79 text
What’s next?
The End
Slide 80
Slide 80 text
Eloquent JavaScript
eloquentjavascript.net
Slide 81
Slide 81 text
MDN Web Docs
developer.mozilla.org
Slide 82
Slide 82 text
Thank you!
UncaughtException
@uncaughtxcptn
Arnelle Balane
@arnellebalane
Introduction to JavaScript