Javascript

4.
Javascript
Pemrograman Aplikasi Web

Review
Tugas HTML
1. source code html native
2. format t2_htmlN_nim
3. tugas individu
4. deadline 02/03/2023 jam 23.59
5. Submit di GClassroom
Javascript
JavaScript adalah bahasa pemrograman yang berbentuk kumpulan skrip yang biasanya digunakan untuk
menambahkan interaksi antara halaman web dengan pengunjung halaman web. JavaScript dijalankan
pada sisi klien yang akan memberikan kemampuan fitur-fitur tambahan halaman web yang lebih baik
dibandingkan fitur-fitur yang terdapat pada HTML.
Saat ini javascript tidak hanya digunakan di sisi client (browser) saja. Javascript juga digunakan pada
server, console, program desktop, mobile, IoT, game, dan lain-lain.
Prinsip Dasar Javascript
Prinsip dasar yang terdapat pada bahasa pemrograman javascript adalah sebagai berikut.
▪ Javascript mendukung paradigma pemrograman imparatif (Javascript dapat menjalankan perintah program
baris demi baris, dengan masing-masing baris berisi satu atau lebih perintah), fungsional (struktur dan elemen-
elemen dalam program sebagai fungsi matematis yang tidak memiliki keadaan (state) dan data yang dapat
berubah (mutable data)), dan orientasi objek (segala sesuatu yang terlibat dalam program dapat disebut
sebagai “objek”).
▪ Javascript memiliki model pemrograman fungsional yang sangat ekspresif.
▪ Pemrograman berorientasi objek (PBO) pada Javascript memiliki perbedaan dari PBO pada umumnya.
▪ Program kompleks pada javascript umumnya dipandang sebagai program-program kecil yang saling
berinteraksi.
Prinsip Dasar Javascript
JavaScript memiliki struktur sederhana, kodenya dapat disisipkan pada dokumen HTML atau berdiri
sendiri. Struktur penulisan JavaScript dalam dokumen atau internal berada dalam tag.
<script>
</script>
Location in body / head ?
<!DOCTYPE html>
<html> 1. Embed (Kode Javascript ditempel
<head>
<script> langsung pada HTML)
function myFunction() {
document.getElementById("demo").innerHTML = 2. Inline (kode Javascript ditulis pada
"Paragraph changed.";
} atribut HTML)
</script>
</head>
<body>
3. Eksternal (Kode Javascript ditulis
<h2>Demo JavaScript in Head</h2> terpisah dengan file HTML)
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try
it</button>
</body>
</html>
JavaScript Can Change HTML Content
document.getElementById("demo").innerHTML =
"Hello JavaScript";
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
Using innerHTML
<p id="demo"></p> Ada 4 cara menampilkan output pada

Javascript:
1. Menggunakan Fungsi console.log();

<script>
2. Menggunakan Fungsi alert();
document.getElementById("demo").innerHTML
3. Menggunakan Fungsi document.write();
= 5 + 6;
4. Menggunakan innerHTML.
</script>
Js statement
let x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4
JavaScript Syntax
// How to create variables:
var x;
let y;
// How to use variables:
x = 5;
y = 6;
let z = x + y;
JavaScript Variables
var x = 5; const price1 = 5;
var y = 6; const price2 = 6;
var z = x + y; let total = price1 + price2;
let x = 5;
let y = 6;
let z = x + y;
JavaScript Operators
// Assign the value 5 to x
let x = 5;
// Assign the value 2 to y
let y = 2;
// Assign the value x + y to z:
let z = x + y;
JavaScript Arithmetic
Operator Description
+ Addition
- Subtraction
* Multiplication
** Exponentiation (ES2016)
/ Division
% Modulus (Remainder)
++ Increment
-- Decrement
Js Assignment Operators
Js DataTypes
Js Functions
// Function to compute the product of p1 and p2
function myFunction(p1, p2) {
return p1 * p2;
}
Js Objects
let car = "Fiat";
const car = {type:"Fiat", model:"500", color:"white"};
// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};
// Display some data from the object:
document.getElementById("demo").innerHTML = "The car type is " + car.type;

Js Events
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
</script>
<p id="demo"></p>
JS If Else
<p id="demo">Good Evening!</p>
<script>
if (new Date().getHours() < 18) {
document.getElementById("demo").innerHTML =
"Good day!";
</script>
Js Switch
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
Js For Loop
for (let i = 0; i < cars.length; i++)

{
text += cars[i] + "<br>";
}
Do while
Js Break
for (let i = 0; i < 10; i++) {
if (i === 3) { break; }
text += "The number is " + i + "<br>";
}
Js Iterable
<p id="demo"></p>
<script>
// Create a String
const name = "Javascripts";
// List all Elements

let text = ""
for (const x of name) {
text += x + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
Nested Loop
JSON
"Terima Kasih":[
{"PesanAwal":"Sekian", "PesanAkhir":"End"},
{"PesanAwal":"Terima", "PesanAkhir":"Kasih"},
{"PesanAwal":"Hati", "PesanAkhir":"Hati"}

Javascript

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Javascript

Diunggah oleh

Hak Cipta:

Format Tersedia

4.

Pemrograman Aplikasi Web

1. source code html native

4. deadline 02/03/2023 jam 23.59

▪ Javascript memiliki model pemrograman fungsional yang sangat ekspresif.

document.getElementById("demo").innerHTML = "My First JavaScript";

<p id="demo"></p> Ada 4 cara menampilkan output pada

1. Menggunakan Fungsi console.log();

// How to create variables:

// How to use variables:

var x = 5; const price1 = 5;

var y = 6; const price2 = 6;

var z = x + y; let total = price1 + price2;

// Assign the value 5 to x

// Assign the value 2 to y

// Assign the value x + y to z:

// Function to compute the product of p1 and p2

function myFunction(p1, p2) {

let car = "Fiat";

const car = {type:"Fiat", model:"500", color:"white"};

const car = {type:"Fiat", model:"500", color:"white"};

// Display some data from the object:

document.getElementById("demo").innerHTML = "The car type is " + car.type;

<button onclick="displayDate()">The time is?</button>

if (new Date().getHours() < 18) {

for (let i = 0; i < cars.length; i++)

text += cars[i] + "<br>";

for (let i = 0; i < 10; i++) {

text += "The number is " + i + "<br>";

// List all Elements

Anda mungkin juga menyukai