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
140
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
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
5つのアンチパターンから学ぶLT設計
narihara
1
170
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.4k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
750
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
250
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
生成AI時代のコンポーネントライブラリの作り方
touyou
1
210
XP, Testing and ninja testing
m_seki
3
240
AIともっと楽するE2Eテスト
myohei
6
2.6k
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
110
Featured
See All Featured
How to Ace a Technical Interview
jacobian
278
23k
A Tale of Four Properties
chriscoyier
160
23k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Faster Mobile Websites
deanohume
307
31k
How to train your dragon (web standard)
notwaldorf
95
6.1k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
4 Signs Your Business is Dying
shpigford
184
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Building Applications with DynamoDB
mza
95
6.5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
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