7 pemrograman internet javascript

Java Script Bikin Website tambah Interaktif..

Toni Tegar Sahidi [email protected]

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

Artinya?

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>

sebelum di-klik

sesudah di-klik

#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

#1 Menulis Output ke HTML

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

... <button type="button" onclick="lakukanSesuatu()">Sesuatu</button> ...

#2 Mengganti Konten HTML

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

#3 Interaksi terhadap Event

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

#4 Mengubah Style HTML

#5 Pengecekan Input

<body> <h1>My First JavaScript</h1> <p>Please input a number.</p> <input id="demo" type="text"> <button type="button" 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

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>");

}

dan lain lain...

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

next session

Server Side Programming

7 pemrograman internet javascript

Education