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
78
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
91
Color Palettes Of The Most Colorful Birds
arnellebalane
0
100
Let's build a video streaming app using Web technologies
arnellebalane
0
120
Let's build a video calling app with Web technologies and Firebase!
arnellebalane
0
130
Ridiculous Scientific Names
arnellebalane
0
180
Fishes With Terrestrial-Animal Names
arnellebalane
0
140
Making the Web more capable with Project Fugu
arnellebalane
0
100
Frontend Web Development in 2021+
arnellebalane
0
150
Extending CSS using Houdini
arnellebalane
0
94
Other Decks in Programming
See All in Programming
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
チームリードになって変わったこと
isaka1022
0
190
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.8k
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
Domain-Driven Transformation
hschwentner
2
1.9k
CI改善もDatadogとともに
taumu
0
110
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
Honoをフロントエンドで使う 3つのやり方
yusukebe
5
2.2k
Featured
See All Featured
A Tale of Four Properties
chriscoyier
158
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
RailsConf 2023
tenderlove
29
1k
Designing Experiences People Love
moore
139
23k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
GraphQLとの向き合い方2022年版
quramy
44
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
How to Ace a Technical Interview
jacobian
276
23k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
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