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
85
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
120
Let's build a video streaming app using Web technologies
arnellebalane
0
140
Let's build a video calling app with Web technologies and Firebase!
arnellebalane
0
140
Ridiculous Scientific Names
arnellebalane
0
230
Fishes With Terrestrial-Animal Names
arnellebalane
0
150
Making the Web more capable with Project Fugu
arnellebalane
0
120
Frontend Web Development in 2021+
arnellebalane
0
170
Extending CSS using Houdini
arnellebalane
0
110
Other Decks in Programming
See All in Programming
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
270
はじめてのMaterial3 Expressive
ym223
2
250
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
290
Testing Trophyは叫ばない
toms74209200
0
850
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
120
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
480
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
0
180
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
330
Namespace and Its Future
tagomoris
6
700
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
510
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Deep Dive into Kotlin Flow
jmatsu
1
310
Featured
See All Featured
Bash Introduction
62gerente
615
210k
4 Signs Your Business is Dying
shpigford
184
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Documentation Writing (for coders)
carmenintech
74
5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Agile that works and the tools we love
rasmusluckow
330
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Six Lessons from altMBA
skipperchong
28
4k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Statistics for Hackers
jakevdp
799
220k
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