0
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...
#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()">Displa...
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 ...
#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");...
<body><h1>My First JavaScript</h1><p>Please input a number.</p><input id="demo" type="text"><button type="button"onclick="...
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/pl...
#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 Sel...
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 S...
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
7 pemrograman internet  javascript
7 pemrograman internet  javascript
7 pemrograman internet  javascript
7 pemrograman internet  javascript
7 pemrograman internet  javascript
Upcoming SlideShare
Loading in...5
×

7 pemrograman internet javascript

793

Published on

PEMROGRAMAN INTERNET - JAVASCRIPT

Published in: Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
793
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
68
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "7 pemrograman internet javascript"

  1. 1. Java ScriptBikin Website tambah Interaktif..
  2. 2. Toni Tegar Sahiditonitegarsahidi@gmail.com
  3. 3. JavaScript#1 Apa itu JavaScript?#2 JavaScript Kenalan SIngkat#3 Kemampuan JavaScript#4 Document Object Model#5 Programming Features
  4. 4. #1 Apa itu JavaScript 1/6
  5. 5. Bahasa Scripting pada Website
  6. 6. Bahasa Scripting pada Website
  7. 7. Bahasa Scriptingadalah bahasa pemrograman yang ringan (lightweight)
  8. 8. JavaScript didesain untuk menambahinteraktifitas sebuah website
  9. 9. JavaScriptDijalankan oleh Browser dan bukan Server
  10. 10. Artinya?
  11. 11. bisa di-disable olehpengunjung website
  12. 12. #2 JavaScript QuickStart 1/6
  13. 13. fungsi JavaScript berada di <script>...</script>
  14. 14. e.g.
  15. 15. <head><script>function displayDate(){document.getElementById("demo").innerHTML=Date();}</script></head>
  16. 16. <body><h1>My First JavaScript</h1><p id="demo">This is a paragraph.</p><button type="button"onclick="displayDate()">DisplayDate</button></body>
  17. 17. sebelum di-klik
  18. 18. sesudah di-klik
  19. 19. #3 Kemampuan JavaScript 1/6
  20. 20. Kemampuan JavaScript# Menulis Output ke HTML# Mengganti konten HTML# Bereaksi terhadap Event (misal klik)# Mengubah Style HTML# Mengecek sebuah input
  21. 21. #1 Menulis Output ke HTML
  22. 22. <head><script>function lakukanSesuatu(){document.write("<p>Ini paragraf yang ditulisJavaScript</p>");}</script></head>
  23. 23. ...<button type="button"onclick="lakukanSesuatu()">Sesuatu</button>...
  24. 24. #2 Mengganti Konten HTML
  25. 25. <head><script>function lakukanSesuatu(){x=document.getElementById("demo");x.innerHTML="Hello";</script></head>
  26. 26. #3 Interaksi terhadap Event
  27. 27. <button type="button"onclick=“lakukanSesuatu()">Click Me!</button>
  28. 28. #4 Mengubah Style HTML
  29. 29. <script>function lakukanSesuatu(){ document.getElementById("demo").style.color="#ff0000";}</script>
  30. 30. #5 Pengecekan Input
  31. 31. <script>function myFunction(){varx=document.getElementById("demo").value;if(x==""||isNaN(x)) { alert("Not Numeric"); }}</script>
  32. 32. <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>
  33. 33. JavaScript TIDAK HARUS diletakkan didalam <head>...</head>
  34. 34. bisa di dalam<body>...</body>
  35. 35. 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>
  36. 36. #4 Document Object Model 1/6
  37. 37. document.getElementByID("some id")
  38. 38. Standar W3C untuk mengakses elemen HTML
  39. 39. ketika sebuah halaman Web diLoad, Browser membuat sebuah Document Object Model (DOM) dari halaman tersebut
  40. 40. model HTML DOM dibangundalam bentuk trees dari object.
  41. 41. *Tree menggambarkan BEBERAPA contoh Elemen HTML
  42. 42. jika ingin memanipulasi elemen HTML, kita harus menemukan elemen HTML-nya terlebih dahulu.
  43. 43. jika ingin memanipulasi elemen HTML, kita harus menemukan elemen HTML-nya terlebih dahulu. *Sebagaimana Selector pada CSS
  44. 44. 3 cara
  45. 45. 3 CaraMenemukan elemen HTML- dengan id- dengan tag- dengan class
  46. 46. dengan idvar x=document.getElementById("intro");
  47. 47. dengan tagvar x=document.getElementById("main");var y=x.getElementsByTagName("p");
  48. 48. #5 Programming Features 1/6
  49. 49. Commentvar x=5; /* declare x and assign 5 to it */var y=x+2; // declare y and assign x+2 to it
  50. 50. Variablevar x=5;var y=6;var z=x+y;
  51. 51. Tipe Datavar x // Now x is undefinedvar x = 5; // Now x is a Numbervar x = "John"; // Now x is a String
  52. 52. Objectperson=new Object();person.firstname="John";person.lastname="Doe";person.age=50;person.eyecolor="blue";
  53. 53. IF-Elseif (time<20) { x="Good day"; } else { x="Good evening"; }
  54. 54. Loopingfor (var i=0;i<cars.length;i++) { document.write(cars[i] + "<br>"); }
  55. 55. dan lain lain...
  56. 56. Further references :http://www.w3schools.com
  57. 57. next session Server Side Programming
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×