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

Like this? Share it with your network

Share

7 pemrograman internet javascript

on

  • 1,108 views

PEMROGRAMAN INTERNET - JAVASCRIPT

PEMROGRAMAN INTERNET - JAVASCRIPT

Statistics

Views

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

Actions

Likes
2
Downloads
57
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 Presentation Transcript

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