Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction to JavaScript
Search
Arnelle Balane
November 21, 2020
Programming
1
84
Introduction to JavaScript
Arnelle Balane
November 21, 2020
Tweet
Share
More Decks by Arnelle Balane
See All by Arnelle Balane
Introduction to building Chrome Extensions
arnellebalane
0
110
Color Palettes Of The Most Colorful Birds
arnellebalane
0
110
Let's build a video streaming app using Web technologies
arnellebalane
0
130
Let's build a video calling app with Web technologies and Firebase!
arnellebalane
0
140
Ridiculous Scientific Names
arnellebalane
0
220
Fishes With Terrestrial-Animal Names
arnellebalane
0
150
Making the Web more capable with Project Fugu
arnellebalane
0
110
Frontend Web Development in 2021+
arnellebalane
0
160
Extending CSS using Houdini
arnellebalane
0
110
Other Decks in Programming
See All in Programming
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
460
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
590
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.8k
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
250
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
180
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.8k
エンジニア向け採用ピッチ資料
inusan
0
180
XP, Testing and ninja testing
m_seki
3
220
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
100
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
童醫院敏捷轉型的實踐經驗
cclai999
0
210
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
110
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
720
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Agile that works and the tools we love
rasmusluckow
329
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
GitHub's CSS Performance
jonrohan
1031
460k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
It's Worth the Effort
3n
185
28k
Transcript
Introduction to JavaScript Software Developer, Newlogic Arnelle Balane @arnellebalane
Arnelle Balane I write code @ Newlogic Google Developers Expert
for Web Technologies @arnellebalane UncaughtException @uncaughtxcptn Please subscribe to our channel!
Exercises github.com/arnellebalane/javascript-workshop
Why JavaScript?
StackOverflow Developer Survey 2020 Most Popular Technologies
Easy to get started Why JavaScript? It’s everywhere! Browsers Server-side
Desktop
The JavaScript Language Part One
Values, types, and operators
Values, types, and operators Booleans true false
Values, types, and operators Numbers 1 2 3 4.5 5.6
1.2 2.3 3.4 4.5 NaN
"this is also a string" Values, types, and operators Strings
'this is a string' `and this is also a string`
Values, types, and operators Empty Values null undefined
Values, types, and operators Unary Operators ! - typeof get
a value’s type negate logically negate a number
Values, types, and operators Unary Operators !true -100 typeof 'hello'
= false = 'string'
Values, types, and operators Binary Operators / * + addition,
division multiplication - subtraction string concatenation % modulo ** exponent
Values, types, and operators Binary Operators 5 ** 2 5
- 4 * 3 + 2 / 1 5 % 2 = 25 = 1 = -5
Values, types, and operators Comparison Operators === == < strict
equality/inequality equal, not equal != !== <= >= >
Values, types, and operators Comparison Operators 1 == '1' =
true = true 1 == 1 1 === '1' = false
logical “or”, either or both of the values Values, types,
and operators Logical Operators || && logical “and”, both values should be true should be true
Values, types, and operators Falsy Values false null undefined ''
0 NaN
Variables
Variables Declaring variables let var const let name = 'arnelle';
const name = 'arnelle'; var name = 'arnelle';
Variables Valid names first_name name lastName balance$ address1 PhoneNumber
Variables Invalid names first-name 2ndItem const
Exercises 01-data-types-variables
Conditional execution
if-else statement Conditional execution if (condition) { } else if
(condition) { } else { }
if-else statement Conditional execution const age = 12; if (age
>= 18) { // A } else { // B }
Iteration
while loop Iteration while (condition) { }
while loop Iteration while (true) { console.log('hi'); }
while loop Iteration let count = 0; while (count <
10) { console.log('hi'); count = count + 1; }
for loop Iteration for (initialize; condition; update) { }
for loop Iteration for ( let count = 0; count
< 10; count = count + 1 ) { console.log('hi'); }
Exercises 02-conditionals-and-iteration
Functions
Declaring a function Functions function add(num1, num2) { return num1
+ num2; }
Calling a function Functions function add(num1, num2) { return num1
+ num2; } add(1, 2); // 3
Function expressions let add = function(num1, num2) { return num1
+ num2; }; Functions
Arrow functions let add = (num1, num2) => num1 +
num2; Functions
Immediately Invoked Function Expression (IIFE) Functions (function() { let num
= 12; console.log(num); })();
Immediately Invoked Function Expression (IIFE) Functions (() => { let
num = 12; console.log(num); })();
Exercises 03-functions
Data structures
Objects Data structures { property1: value1, property2: value2 }
Objects Data structures let user = { username: 'arnelle', isAdmin:
true };
Objects Data structures let user = { username: 'arnelle', isAdmin:
true }; user.username; // 'arnelle'
in operator Data structures let user = { username: 'arnelle',
isAdmin: true }; 'username' in user; // true 'email' in user; // false
delete operator Data structures let user = { username: 'arnelle',
isAdmin: true }; delete user.username;
Arrays Data structures [1, 2, 3, 4, 5] [1, 'a',
true, undefined]
Arrays Data structures let nums = [1, 2, 3]; nums[0];
// 1 nums[1] = 4; nums.length; // 3 nums.includes(1); // true
Array Methods Data structures push pop concat find filter map
forEach reduce reverse shift slice some https://developer.mozilla.org/en-US/docs/Web/JavaScri pt/Reference/Global_Objects/Array
Exercises 04-arrays-and-objects
Variable scope
var a = 1; console.log(a); Global scope Variable scope
var a = 1; function main() { var b =
2; } console.log(a); console.log(b); Function scope Variable scope
Function scope Variable scope function main() { if (true) {
var a = 1; } console.log(a); } console.log(a);
Block scope Variable scope function main() { if (true) {
let a = 1; } console.log(a); } console.log(a);
Object-Oriented Programming with JavaScript Part Two
function createPerson(name) { let obj = {}; obj.name = name;
obj.sayName = () => { console.log(obj.name); }; return obj; } let me = createPerson('arnelle');
Constructor function Object-Oriented Programming function Person(name) { this.name = name;
this.sayName = () => { console.log(this.name); }; }
Instantiation Object-Oriented Programming function Person(name) { this.name = name; this.sayName
= () => { console.log(this.name); }; } let me = new Person('arnelle');
function Person(name) { this.name = name; } Person.prototype.sayName = function()
{ console.log(this.name); }; Object prototypes Object-Oriented Programming
class Person { constructor(name) { this.name = name; } sayName()
{ console.log(this.name); } } class keyword Object-Oriented Programming
Exercises 05-classes
JavaScript in the Browser Part Three
Loading JavaScript file JavaScript in the browser <script src="file.js"></script>
Document Object Model
<html> <body> <h1>Hello World</h1> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> <button>Click
Here</button> </body> </html> html body h1 ul button Hello World Click Here ul ul ul One Two Three
Querying elements Document Object Model let btn = document.querySelector('button'); What
we can do: https://developer.mozilla.org/en-US/docs/Web/API/Element
Events Document Object Model btn.onclick = () => { console.log('click!');
}; All the events! https://developer.mozilla.org/en-US/docs/Web/Events
Events Document Object Model btn.addEventListener('click', () => { console.log('click!'); });
All the events! https://developer.mozilla.org/en-US/docs/Web/Events
AJAX ( Asynchronous JavaScript and XML )
let xhr = new XMLHttpRequest(); XHR AJAX https://developer.mozilla.org/en-US/docs/We b/API/XMLHttpRequest
let xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => {
}; XHR AJAX
let xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => {
if (xhr.readyState === xhr.DONE) { console.log(xhr.responseText); } }; XHR AJAX
let xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => {
if (xhr.readyState === xhr.DONE) { console.log(xhr.responseText); } }; xhr.open('GET', url); xhr.send(); XHR AJAX
Exercises 06-browser
What’s next? The End
Eloquent JavaScript eloquentjavascript.net
MDN Web Docs developer.mozilla.org
Thank you! UncaughtException @uncaughtxcptn Arnelle Balane @arnellebalane Introduction to JavaScript