Web Development Study Jam #2 _ Basic JavaScript.pptx

Intro Slides Below
Directions for use:
Please make a copy of this before editing the doc.
1. Select the “File” drop down menu above
2. Go to “Make a copy”, select
3. Rename the file and save it to your Drive
4. Begin creating your presentation!

Web Dev Study Jam #2
Wahyu Setiawan
@whysetiawan17
github.com/whysetiawan
linkedin.com/in/whysetiawan
Basic JavaScript

Introduction
JavaScript is a powerful programming language that
can add interactivity to a website. It was invented by
Brendan Eich.
With more experience, you'll be able to create games,
animated 2D and 3D graphics, comprehensive
database-driven apps, and much more!
JavaScript

Prepare Your Weapon
• Download NodeJS https://nodejs.org/en/download/
• Your Lovely Text Editor (VSCode, WebStorm, Vim, Sublime Text, etc)

JavaScript
In Browser
javascript was only used in browsers to build interactive web pages some

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>

JavaScript
In Node
JavaScript code out of a browser so we can pass our JavaScript code to node
for execution and this means with JavaScript we can build the backend for
our web and mobile applications

console.log(“hello world”)
// hello world

JavaScript
so in a nutshell JavaScript code can be run inside of a browser or out side a
browser using node

Variable
Programming language use a variable to store data
temporarily in a computer's memory so we store our
data somewhere and give that memory location and
name and with this name we can read the data at the
given location in the future
JavaScript

let winner = “Argentina is winner” // String Literal
let port = 3000 // Number Literal
let isDone = True // Number Literal
// Cannot be a reserved keyword
// Should be meaningful
// Cannot start with a number (1name)
// Cannot contain a space or hyphen (-)

JavaScript
Dynamic Typing
Static
(statically-typed)
Dynamic
(Dynamic-typed)
string name = ‘Jhon’
let name = ‘Jhon’

Object
object in JavaScript and other programming languages
is like an object in real life think of a person a person
has name age address and so on these are the
properties of a person you have the same concept in
JavaScript
JavaScript

let name = “Jorge Lorenzo”
let age = 40
let person = {
name : “Jorge Lorenzo”
age : 30
}
console.log(person.name)
// “Jorge Lorenzo”

Arrays
enables storing a collection of multiple items under a
single variable name, and has members for performing
common array operations.
JavaScript

let colors = [“Red”,“Blue”,“Orange”]
console.log(colors[0])
// “Red”

JavaScript
● JavaScript arrays are resizable and can contain a mix of different data
types
● JavaScript arrays are zero-indexed

Function
functions are one of the fundamental building blocks
in JavaScript a function is basically a set of statements
that performs a task or calculates a value
JavaScript

// Arrow function (Modern JS)
const greet = () => {
console.log("hello world")
}
greet()
// hello world
// function with parameter
const greetName = (name) => {
console.log("hello " + name)
}
greetName("Jorge")
// hello Jorge
// Old JS function
function greet(){
console.log("hello world")
}
greet()
// hello world
// function with parameter
function greetName(name){
}
greetName("Jorge")
// hello Jorge

JavaScript
Types Functions
function greetName(name){
}
greetName("Jorge")
// hello Jorge
function square(number) {
return number*number
}
console.log(square(2))
// 4

Document Object Model (DOM)
The Document Object Model (DOM) is the data
representation of the objects that comprise the
structure and content of a document on the web.
JavaScript

<html>
<head>
<script>
// run this function when the document is loaded
window.onload = () => {
// create a couple of elements in an otherwise empty HTML page
const heading = document.createElement("h1");
const headingText = document.createTextNode("Big Head!");
heading.appendChild(headingText);
document.body.appendChild(heading);
};
</script>
</head>
<body></body>
</html>

JSX
It is called JSX, and it is a syntax extension to JavaScript,
recommend using it with React to describe what the UI
should look like
JavaScript

const name = "Josh Perez";
const element = <h1>Hello, {name}</h1>;

Next Step you Can Learn
JavaScript
● Modern JavaScript (ES6)
● Node Js
● TypeScript
● Frontend Web Framework
● Backend Framework (JS)
● Mobile Development (React
Native)

Let’s build Movie App
Movie App Feature :
● Show List Off Movie
● Show Detail Movie
Data can be from API(Tmdb) or static JSON
5 January 2023 (link nya menyusul)

Web Development Study Jam #2 _ Basic JavaScript.pptx

More Related Content

Similar to Web Development Study Jam #2 _ Basic JavaScript.pptx (20)

Recently uploaded (20)

Web Development Study Jam #2 _ Basic JavaScript.pptx