7 pemrograman internet javascript

961 views
888 views

Published on

PEMROGRAMAN INTERNET - JAVASCRIPT

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

No Downloads
Views
Total views
961
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
71
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

×