JS

JavaScript
An Introduction
 Nomenclature & terms of Web (request)
 Some History of JavaScript
 Usage of JavaScript (Libraries)
Topics that We  DOM and what it is ?
will cover  JavaScript Quirk
 JavaScript Framework (the top 3)
 Lesson Plan if I want to master JS
 Syntax & Changes in ES5, ES6, ES7
 Detailed comparison of JavaScript Frameworks
 Actual code practice (not a hands on workshop)
Not covered in  How to make money with websites
today’s
workshop
Web Development
Clearing up some nonmenclature
In General
 What you can see & Interact in the world wide web
 E.g. Website & Mobile Application
 Focus on the design, usability, behavior of the
application
Front End
 How about other languages like Django (Python), PHP, Java
Applet , Ruby on Rails and other languages that can front – end
websites?
 No matter which language you use to write your front end

Front End website, it will ultimately be compiled into HTML, CSS, JS
(cont.)
 EVERYTHING ELSE that powers the website which the user
cannot see
 The Backbone of a website
Back End  Controls the business logic of a website, on how data are handled,
storing information, security, saving / retrieving information from
databases, authentication
 PHP (And its Framework Laravel)
 Java (Java BEANS, Spring Framework
 .NET
Back End  C#
(cont.)  Python
 Ruby
History of JavaScript
 Written by Breiden Eich in 1997 ( in 10 days)
 For a browser called Mosaic Netscape
 Initial Name called LiveScript / Mocha
(not to be confused with mochaJS)
A short History
of JavaScript
 Java is a popular language back then.
 The owner of Java, Sun MicroSystem made a agreement with

Why the name Netscape, the owner of JavaScript (back then known as Mocha/
LiveScript)
JavaScript?
 JavaScript is written to be a complimentary scripting language
with Java
 The language is written to LOOK SIMILAR to Java, and later

changed to JAVASCRIPT
JAVASCRIPT IS NOT JAVA !
Aside from the common keyword , they act VERY DIFFERENTLY underneath and
requires a VERY DIFFERENT DESIGN APPROACH.
The language is written for Different Purpose.

Abbreviation for Computer Manufacturers Association
ECMAScript is created as a set of standard for web

ECMAScript language that resembles JavaScript
ES5, ES6, ES7, ES8

Written in 2009 - Demonstrate that
JavaScript can be used to write back –end
Server Language
Known as NodeJS or Node

NodeJS –
When Wildly popular due to its performance and
JavaScript get Ease of learning (it is JavaScript)
serious Contributed to surge of JavaScript Developer

And its demand
Companies
that used
NodeJS
Where do people use
JavaScript
Just how common this language is
Front End
Website
Development
Back End
Website
Development
Mobile
Development
Desktop App
Brain JS
Machine
Learning &
Neural
Network
Data
Visualization
Atwood Law
(Rule 34 of
programming
language)
Before JS, we need to
talk about DOM
And understand what it refers to
 One of the most frequently seen term if you browse any web
development related forum, or JavaScript Related forum
 Abbreviation for Document Object Model
 DOM Manipulation
What is DOM  Traversing the DOM
 ???????
This is
Document
 Title is an object
<title></title>
 Body is an object
<body></body>
This is Object  Paragraph p is an object
<p></p>
 Everything you see with this

opening <></> is an object
The structure (or the model) of the html site can
be written as
html
title header body
This is Model h1 ul p
li
 Refers to “going through” (traversing) through the html
(document) to look for a component (object)
DOM
Traversing
 Refers to “changing” (manipulating) certain information in the
html (document) using the html tags (object)
DOM
Manipulation
 Refers to “going through” (traversing) through the html
(document) to look for a component (object)
DOM
Traversing
 Every JavaScript Framework has a slightly different way to
manipulate DOM / communicate with DOM
 DOM Manipulation can be used to hide/show things, manipulate

information, animating to name a few
About DOM  Core concept to know , even though the exact syntax might be
(short different
conclusion)
The Quirks of
JavaScript (Vanilla)
Why this is not Java
 Defined as the type of variables
 INT, FLOAT, BOOLEAN, STRING, CHAR, for each type of data

Weak Typing Type (integers, floating number, boolean, string)
Variable
 In JavaScript there is only VAR
;
A very Lenient
Language
;
First Class
Function
;
Prototypal
Inheritance
JavaScript FrameWorks
A lot a lot of them, but we are only talking about the BIG 3
Framework vs
Library
 You might learn html, css and JavaScript, but most functioning
websites in the world uses a variant of JavaScript Framework for
more functionality and lesser time
A case of
 At least in Malaysia, if you want to be hired as a Front End
Frameworks Developer / Back End JS developer, learning a framework and
mastering is essential to get you HIRED
 Taken from https://2018.stateofjs.com/front-end-
frameworks/overview/
2018 Trend of
JavaScript
 React is JavaScript Framework created by Facebook Development
team
 Comes in two flavor

 ReactJS (for web and Single Page Application Development)
 React Native (for native mobile application)
React  http://reactjs.org
 https://facebook.github.io/react-native/
 Developed in 2013
 Companies that use ReactJS and React Native
 AirBNB (React Native for mobile Application)

 Netflix (Website)
 Facebook (Messenger is written in React Native)
 Atlassian (websites)
React Portfolio
 Requires knowledge of JavaScript ES6 to utilize well
 Probably the most Vanila JS framework
 Backed by Facebook with fast changing updates
About React
 Angular is JavaScript Framework created by Google
 Comes in two flavor
 AngularJS (JavaScript based, commonly named as AngularJS 1.x)
 Angular (typescript based Version 2 and above)
 Unlike ReactJS and ReactNative, AngularJS and Angular are quite

different to each other
Angular
 Developed in 2010 (AngularJS)
 Companies that use AngularJS/Angular
 Google Cloud Partner

 HBO
 MSNBC
 Nike
Angular  GM
Portfolio
 Introduces a lot of different concepts – Modules, Directives,
Router, Change Detection,pipes
 AngularJS reaches its EOL, and mostly focus on Angular
 Does not require as much knowledge of JS compared to React
 Popularity has gone down since its inception
About Angular
 Vue is Open sourced JavaScript Framework
 The preferred Framework of the PHP Laravel Community and the

Chinese Developer scene
VueJS  AliBaba backed up VueJS to certain extent, but not as much as

Google/Facebook did on their respective Framework
 Developed in 2015
 Companies that use VueJS
 AliBaba
 Xiaomi
Angular  Facebook (in its newsfeed)
Portfolio  Netflix (internal use)

 9gag
 Very Lightweight, comes with the script version and the packaged
version
 Share a few similarities with AngularJS such as directives, pipes,
string interpolation
 A rising star and the easiest one syntax wise
About Vue
 If you are a Vanila JavaScript guru and looking for a framework, go
for React
Personal  If you are new to JavaScript Framework and looking for a JS

Framework to start learning, go for Vue
Recommenda
tion  If your company requires you to use AngularJS/Angular, learn that
Bonus Section: How to
be a JS developer
My own personal experience
The Baby Step  Learn Html
Path (If you  Learn CSS
know
NOTHING  https://www.codecademy.com/ (Code Academy)
about web
 If you know nothing about this, your website will show NOTHING
development)
 Learn the concept of variables
 Data Types
If you know  Loops
nothing about  If Else conditional statement
programming  Functions
( FOUNDATION)
 Concept of Object Oriented Paradigm (OOP)
You learned
about C++ and  If you want to understand Java, JavaScript, Python, C#, this is
Java in your important to at least KNOW about its existence
college and you

think u know  Prototypal Inheritance in JavaScript
programming
 AJAX Http Call
You learn about  Asynchronous Programming (Callback, Promise)
basics of  Concept of DOM Manipulation
programming  JavaScript Behavior and Operators
and Object, and  JSON
would like to  ES6 and ES5 Syntax
learn something
JS specific
 Learn a Framework
I know a few
things about  Web Framework : ReactJS, VueJS (I omitted Angular because of
personal bias, even though it is my entry point)
JavaScript and
I want to do  Mobile Framework: React Native (Requires you to learn ReactJS)
actual Design  Ionic Framework (Requires you to learn Angular 2)
:
I want to be a  Learn NodeJS
Full Stack Web
Developer  Choose between learning ExpressJS or NextJS or MeteorJS
 I know nothing Tier (HTML CSS, Programming Concepts)
 I know nothing about OOP Tier ( Learn Concepts of Object)
In Summary,  I know nothing about JS Tier (Learn JavaScript)
this is the  I know nothing about Framework Tier (Learn a front end
Framework of your choice)
mastery Level  I Want to be full stack tier (learn Node)
 Google Chrome (Most Developer Friendly Browser)
 Simple Code Editor (Bracket.io for Mac , notepad++ for Windows)
What do you  Visual Studio Code Editor (The best and it’s free, think of it as a
powerful document editor meant for Coding, you need one of this)
need to Install  Node Package Manager (if you want to learn JavaScript
Frameworks)
For Books, buy the Head First Series
For Online courses, go for Udemy because they are cheap

Recommende (PM Me if you want some links)
d Books and
Website Or pay some of the experienced developer for some 1 to 1 coaching,
recommended if you want to learn FAST (cheaper than bootcamp
confirmed)

JS

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

JS

Hochgeladen von

Copyright:

Verfügbare Formate

JavaScript

 No matter which language you use to write your front end

 The Backbone of a website

 The owner of Java, Sun MicroSystem made a agreement with

 The language is written to LOOK SIMILAR to Java, and later

The language is written for Different Purpose.

ECMAScript is created as a set of standard for web

ES5, ES6, ES7, ES8

Known as NodeJS or Node

serious Contributed to surge of JavaScript Developer

 Everything you see with this

 DOM Manipulation can be used to hide/show things, manipulate

 INT, FLOAT, BOOLEAN, STRING, CHAR, for each type of data

 Comes in two flavor

 AirBNB (React Native for mobile Application)

 Unlike ReactJS and ReactNative, AngularJS and Angular are quite

 Google Cloud Partner

 The preferred Framework of the PHP Laravel Community and the

VueJS  AliBaba backed up VueJS to certain extent, but not as much as

Portfolio  Netflix (internal use)

Personal  If you are new to JavaScript Framework and looking for a JS

college and you

For Online courses, go for Udemy because they are cheap

Das könnte Ihnen auch gefallen