JavaScript Dasar untuk Membuat Website Interaktif

Java Script
Bikin Website tambah Interaktif..

Toni Tegar Sahidi
tonitegarsahidi@gmail.com

JavaScript
#1 Apa itu JavaScript?
#2 JavaScript Kenalan SIngkat
#3 Kemampuan JavaScript
#4 Document Object Model
#5 Programming Features

#1 Apa itu JavaScript

1/6

Bahasa Scripting
pada Website

Bahasa Scripting
adalah bahasa pemrograman
yang ringan (lightweight)

JavaScript
didesain untuk menambah
interaktifitas sebuah website

JavaScript
Dijalankan oleh Browser
dan bukan Server

bisa di-disable oleh
pengunjung website

#2 JavaScript
QuickStart

1/6

fungsi JavaScript berada di
<script>...</script>

<head>
<script>
function displayDate()
{
document.getElementById("demo").
innerHTML=Date();
}
</script>
</head>

<body>

<h1>My First JavaScript</h1>
<p id="demo">This is a paragraph.</p>

<button type="button"
onclick="displayDate()">Display
Date</button>

</body>

#3 Kemampuan
JavaScript

1/6

Kemampuan JavaScript
# Menulis Output ke HTML
# Mengganti konten HTML
# Bereaksi terhadap Event (misal klik)
# Mengubah Style HTML
# Mengecek sebuah input

<head>
<script>
function lakukanSesuatu()
{
document.write("<p>Ini paragraf yang ditulis
JavaScript</p>");
}
</script>
</head>

...
onclick="lakukanSesuatu()">Sesuatu</butto
n>
...

<head>
<script>
{
x=document.getElementById("demo");
x.innerHTML="Hello";
</script>
</head>

onclick=“lakukanSesuatu()">
Click Me!</button>

<body>

<h1>My First JavaScript</h1>

<p>Please input a number.</p>

<input id="demo" type="text">

onclick="myFunction()">Click Me!</button>

</body>

JavaScript TIDAK HARUS
diletakkan didalam
<head>...</head>

bisa di dalam
<body>...</body>

Atau seperti CSS, di
File Lain
<script type="text/javascript" src="http://www.dakta.com/wp-
content/plugins/audio-player/assets/audio-player.js?ver=2.0.4.1"></script>

#4 Document Object
Model

1/6

document.getElementByID("some id")

Standar W3C untuk mengakses
elemen HTML

ketika sebuah halaman Web
diLoad, Browser membuat
sebuah Document Object
Model (DOM) dari halaman
tersebut

model HTML DOM dibangun
dalam bentuk trees dari object.

*Tree menggambarkan BEBERAPA contoh Elemen HTML

jika ingin memanipulasi elemen
HTML, kita harus menemukan
elemen HTML-nya terlebih
dahulu.

jika ingin memanipulasi elemen
HTML, kita harus menemukan
elemen HTML-nya terlebih
dahulu.

*Sebagaimana Selector pada CSS

3 Cara
Menemukan elemen HTML
- dengan id
- dengan tag
- dengan class

dengan id
var x=document.getElementById("intro");

dengan tag
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

#5 Programming
Features

1/6

Comment
var x=5; /* declare x and assign 5 to it */
var y=x+2; // declare y and assign x+2 to it

Variable
var x=5;
var y=6;
var z=x+y;

Tipe Data
var x // Now x is undefined
var x = 5; // Now x is a Number
var x = "John"; // Now x is a String

Object
person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";

IF-Else
if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}

Looping
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}

Further references :
http://www.w3schools.com

next session
 Server Side Programming

JavaScript Dasar untuk Membuat Website Interaktif

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (18)

En vedette

En vedette (14)

Similaire à JavaScript Dasar untuk Membuat Website Interaktif

Similaire à JavaScript Dasar untuk Membuat Website Interaktif (20)

Plus de Toni Tegar Sahidi

Plus de Toni Tegar Sahidi (11)

Dernier

Dernier (20)

JavaScript Dasar untuk Membuat Website Interaktif