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
75
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
47
Color Palettes Of The Most Colorful Birds
arnellebalane
0
74
Let's build a video streaming app using Web technologies
arnellebalane
0
86
Let's build a video calling app with Web technologies and Firebase!
arnellebalane
0
99
Ridiculous Scientific Names
arnellebalane
0
120
Fishes With Terrestrial-Animal Names
arnellebalane
0
120
Making the Web more capable with Project Fugu
arnellebalane
0
78
Frontend Web Development in 2021+
arnellebalane
0
130
Extending CSS using Houdini
arnellebalane
0
68
Other Decks in Programming
See All in Programming
Ruby Pattern Matching
bkuhlmann
0
920
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
160
Rethinking UI building strategies @ SFI 2024
letelete
0
270
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
250
Milestoner
bkuhlmann
1
410
PostmanでAPIの動作確認が楽になった話
h455h1
0
160
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
260
Anthropic Cookbook のおすすめレシピ
schroneko
6
560
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
290
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
170
Folding Cheat Sheet #2
philipschwarz
PRO
0
120
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
22
15k
Featured
See All Featured
Web development in the modern age
philhawksworth
202
10k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
321
20k
Rails Girls Zürich Keynote
gr2m
91
13k
It's Worth the Effort
3n
180
27k
In The Pink: A Labor of Love
frogandcode
138
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Web Components: a chance to create the future
zenorocha
305
41k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
GraphQLとの向き合い方2022年版
quramy
31
12k
How STYLIGHT went responsive
nonsquared
92
4.8k
Building Your Own Lightsaber
phodgson
98
5.7k
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