7 pemrograman internet  javascript
Upcoming SlideShare
Loading in...5
×
 

7 pemrograman internet javascript

on

  • 1,058 views

PEMROGRAMAN INTERNET - JAVASCRIPT

PEMROGRAMAN INTERNET - JAVASCRIPT

Statistics

Views

Total Views
1,058
Views on SlideShare
1,058
Embed Views
0

Actions

Likes
1
Downloads
53
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

7 pemrograman internet  javascript 7 pemrograman internet javascript Presentation Transcript

  • Java ScriptBikin Website tambah Interaktif..
  • Toni Tegar Sahiditonitegarsahidi@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 Scriptingadalah bahasa pemrograman yang ringan (lightweight)
  • JavaScript didesain untuk menambahinteraktifitas sebuah website
  • JavaScriptDijalankan oleh Browser dan bukan Server
  • Artinya?
  • bisa di-disable olehpengunjung 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()">DisplayDate</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 ditulisJavaScript</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(){varx=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 dibangundalam 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 CaraMenemukan elemen HTML- dengan id- dengan tag- dengan class
  • dengan idvar x=document.getElementById("intro");
  • dengan tagvar x=document.getElementById("main");var y=x.getElementsByTagName("p");
  • #5 Programming Features 1/6
  • Commentvar x=5; /* declare x and assign 5 to it */var y=x+2; // declare y and assign x+2 to it
  • Variablevar x=5;var y=6;var z=x+y;
  • Tipe Datavar x // Now x is undefinedvar x = 5; // Now x is a Numbervar x = "John"; // Now x is a String
  • Objectperson=new Object();person.firstname="John";person.lastname="Doe";person.age=50;person.eyecolor="blue";
  • IF-Elseif (time<20) { x="Good day"; } else { x="Good evening"; }
  • Loopingfor (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