Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Web Development Study Jam #2 _ Basic JavaScript.pptx
1. 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!
2. Web Dev Study Jam #2
Wahyu Setiawan
@whysetiawan17
github.com/whysetiawan
linkedin.com/in/whysetiawan
Basic JavaScript
3. 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
4. Prepare Your Weapon
• Download NodeJS https://nodejs.org/en/download/
• Your Lovely Text Editor (VSCode, WebStorm, Vim, Sublime Text, etc)
7. 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
9. JavaScript
so in a nutshell JavaScript code can be run inside of a browser or out side a
browser using node
10. 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
11. 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 (-)
13. 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
14. let name = “Jorge Lorenzo”
let age = 40
let person = {
name : “Jorge Lorenzo”
age : 30
}
console.log(person.name)
// “Jorge Lorenzo”
15. Arrays
enables storing a collection of multiple items under a
single variable name, and has members for performing
common array operations.
JavaScript
16. let colors = [“Red”,“Blue”,“Orange”]
console.log(colors[0])
// “Red”
17. JavaScript
● JavaScript arrays are resizable and can contain a mix of different data
types
● JavaScript arrays are zero-indexed
18. 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
19. // 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){
console.log("hello " + name)
}
greetName("Jorge")
// hello Jorge
21. 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
22. <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>
23. 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
24. const name = "Josh Perez";
const element = <h1>Hello, {name}</h1>;
26. Next Step you Can Learn
JavaScript
● Modern JavaScript (ES6)
● Node Js
● TypeScript
● Frontend Web Framework
● Backend Framework (JS)
● Mobile Development (React
Native)
27. Web Dev Study Jam #2
Wahyu Setiawan
@whysetiawan17
github.com/whysetiawan
linkedin.com/in/whysetiawan
Basic JavaScript
28. 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)