AC2010 – Kỹ Thuật Lập Trình
GV: TS. Nguyễn Đình Văn – Viện MICA
Học kì I 2020 - 2021
Bài 3: Javascript overview
Outline
• The history of Javascript
• Why Javascript as the programming language
• Introduction to frontend Javascript
• Introduction to Nodejs
• Introduction to Git
• Getting started with Javascript programming
• Team project introduction
History of Javascript
Introduction
• Javascript (JS) is a script language of the ECMAScript standard.
• Other languages: ActionScript (flash) Jscript (Microsoft)
• Invented: 1995 – Netscape Communications Coop.
• Current standard: ES9 – June 2018
• Javascript is NOT Java brother/sister/child…
• Javascript is the most popular programming language in the world!
• 95% out of 1.6billion websites in the world using JS
• Javascript is originally created to “make the web alive”
• Almost all animations, videos, images effect on the web are using JS
• Work on “front-end” of web applications
WEB VS EVERYTHING ELSE (2019)
Introduction Web apps Windows Android Ios
1% 4%
18%
77%
Github Top Programming Languages over time 2018
Statistic of programming languages 2019 - StackOverflow
The 3 musketeers
• Traditionally HTML + CSS +
Javascript are the front-end of any
website.
• Other languages needed for
backend
• PHP, Java, Ruby, Python …
• A webserver required (Apache) to
handle users’ connection
The morden Javascript
• As of 2009 with the birth of Nodejs,
Javascript is now server-side programming
language too
• Working in backend
• Does not need a webserver software
• 2013: React Native uses JS to implement
both Android and IOs applications
• Facebook app is written using React Native
• 2013: Electronjs uses JS to implement
cross platform application (Linux, macOS,
Windows)
• Visual studio code is written using Electronjs
Resources
• Recommended resources to learn Javascript:
• W3Schools: [Link]
• [Link]
• Course Teams: cx03bao
Why Javascript?
Why JS as your first Programming Lanugage
• THE most popular programming language by far.
• Easy to learn the basics
• Instant feedback (with cool new stuff)
• Up-to-date features
• Rich libraries
• Large community (Most of your questions are likely 1 google away)
Why JS as your first Programming Lanugage
• What can you do with Javascript:
• Make a website fullstack (with a bit HTML, CSS)
• Desktop apps for multiple platforms (Linux, Windows, macOS)
• Mobile apps for multiple platform (Android, IOs)
• Even machine learning (AI) is possible with JS
• Fast paced development
• Apps can be developed relatively fast
• Up-to-date features and functionalities
Front-end Javascript
Hello World - 1
• Step 1: Create two text files, rename them to [Link], [Link] in the same
directory
• Step 2: fill in the content of [Link] and [Link] respectively
Hello World - 1
• Step 3: Open [Link] using Chrome
• The result should be as follow
Hello World – 2
• Edit the [Link] as follow
Hello World - 2
• F5 to refresh Chrome webpage ([Link])
• F12 to open Chrome Developer Tool
• See the result in console tab
Hello World - 3
• Edit the [Link] and [Link] as follow
• Refresh the [Link]
• Click on the button and see what changes?
Front-end Javascript
• Front-End Javascript does:
• Logic handling
• Data handling
• Dynamic HTML & CSS
• Event Handling
• Communication
• Front-End Javascript does NOT:
• Access, Read, Write files in client machine
• Access, Read, Write files in Server machine
• Read information from an oppened webpage from another Server
• Protect page source or images (anything in the browser is accessible)
NodeJS
Nodejs
• Started in 2009 as a replacement for Apache webserver
• A free, open-source, cross platform runtime environment that allows
creating Server-side tools and applications in Javascript.
• Based on Google V8 Javascript engine
• Event-based, single thread architecture
• In other word: Javascript in Server side, independent from browsers
(much like how C++, Python, Java work)
Nodejs Architecture
Why Nodejs?
• Nodejs is fast, lightweight with a big community
• Site using Nodejs: [Link], [Link], [Link], etc…
What does Nodejs do?
• [Link] can generate dynamic page content
• [Link] can create, open, read, write, delete, and close files on the
server
• [Link] can collect form data
• [Link] can add, delete, modify data in your database
Run a Nodejs Program
• Require Nodejs installed
• Create a [Link] file in E:\[Link]
• Run command node [Link]
NPM
• NPM stands for: Node Package Manager
• Put nodejs modules (libraries) in the right place
• Manage dependencies intelligently
• Wide use-case support
• Can be used to publish, discover, install and develop node programs
• Visit: [Link]
Git Basic
What is Git?
• A content tracker: what has been changed compare to the latest
version?
• A version control system: Allow control different version of the same
Project (code) and from multiple developers (team work)
• Distributed Version Control System: Git has a remote repository
which is stored in a server and a local repository which is stored in the
computer of each developer. This makes code easier to backup,
fallback.
Why Git
• Scenario 1: individual developer:
• Working on a Project to draw a cat automatically
• Day 1: Analyse, design solution. Start coding.
• Day 10: Decide to try a new algorithm to draw the cat.
• 5 files, 100+ lines changed
• Day 20: The new algorithm does not work
• Either trying to revert back to day 3 manually
• Or start the Project all over again
Why Git?
• Scenario 2: multiple developers
• Team of 3 developers making a website:
• A specialist in front-end GUI
• A specialist in back-end logic
• A specialist in Database
• Working on a same Project setup
• Either manually update and synchronize the code day by day (or even hour by
hour)
• Or using git to work with each other
Getting started with Git
• Install Git [Link]
• Create a free account at [Link]
• Log into gitlab account
• In the projects dashboard, click on New Project
Create a new Project with Git
Create a new Project with Git
Common Git routines
• After setting up Git folder
• To start coding:
• Step 1: update local code to the latest version
• git pull
• Step 2: make changes to code
• Step 3: commit new changes when complete:
• Git add .
• Git commit –m “new changes added”
• Git push origin master
• Conflict, Branches, Merge … will be covered later in the course
Getting started with Javascript programming
Development environment setup
• Install following:
• Visual Studio Code (recommended)
• Git (required)
• Nodejs (required)
• Google chrome (recommended)
• Notepad++ (optional)
Working with Visual Studio Code
Team Project Introduction