7 pemrograman internet javascript
Post on 15-Jan-2015
723 Views
Preview:
DESCRIPTION
TRANSCRIPT
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 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>
e.g.
<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
<script> function lakukanSesuatu() { document.getElementById("demo").style.color="#ff0000"; } </script>
#5 Pengecekan Input
<script> function myFunction() { var x=document.getElementById("demo").value; if(x==""||isNaN(x)) { alert("Not Numeric"); } } </script>
<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
top related