Laporan8 Web

30
LAPORAN WEB1 JOB 8 ” Java Script ” Disusun oleh : MUHAMMAD AL HADAD IK 2B NIM 3.34.09.0.14 PROGRAM STUDI TEKNIK INFORMATIKA JURUSAN TEKNIK ELEKTRO Web1 Job8 Alhadad Page 1

Transcript of Laporan8 Web

Page 1: Laporan8 Web

LAPORAN WEB1

JOB 8

” Java Script ”

Disusun oleh :

MUHAMMAD AL HADAD

IK 2B

NIM 3.34.09.0.14

PROGRAM STUDI TEKNIK INFORMATIKA

JURUSAN TEKNIK ELEKTRO

POLITEKNIK NEGERI SEMARANG

2011

Web1 Job8 Alhadad Page 1

Page 2: Laporan8 Web

DAFTAR ISI

Halaman judul _________________________________________________________ 1

Daftar Isi ______________________________________________________________ 2

Pendahuluan

Tujuan Instruksional Khusus ________________________________________ 3

Dasar Teori ______________________________________________________ 3

Peralatan dan Bahan _______________________________________________ 10

Langkah Kerja _________________________________________________________ 10

Lembar Kerja __________________________________________________________ 19

Kesimpulan ____________________________________________________________ 23

Web1 Job8 Alhadad Page 2

Page 3: Laporan8 Web

I. PENDAHULUAN

A. Tujuan Instruksional Khusus

1. Memahami dan menuliskan tag-tag dalam membuat canvas html.

2. Menerapkan dan mengembangkan tag-tag dalam membuat canvas html.

B. Teori Pendahuluan

JAVA SCRIPT

Statement

JavaScript adalah urutan laporan yang akan dieksekusi oleh browser.

JavaScript Kasus Sensitif

Tidak seperti HTML, JavaScript kasus sensitif - karena menonton kapitalisasi Anda

dengan cermat bila Anda menulis JavaScript laporan, membuat atau panggilan variabel,

objek dan fungsi.

JavaScript Laporan

Sebuah pernyataan JavaScript adalah perintah untuk browser. Tujuan dari perintah ini

adalah untuk memberitahu browser apa yang harus dilakukan.

Pernyataan JavaScript memberitahu browser untuk menulis "Hello Dolly" ke halaman

web:

document.write ("Hello Dolly");

Adalah normal untuk menambahkan tanda titik koma pada akhir setiap pernyataan

dieksekusi. Kebanyakan orang berpikir bahwa ini adalah praktek pemrograman yang

baik, dan yang paling sering Anda akan melihat ini dalam contoh JavaScript di web.

Titik koma adalah opsional (menurut JavaScript standar), dan browser yang seharusnya

menafsirkan akhir baris sebagai akhir pernyataan tersebut. Karena ini Anda akan sering

melihat contoh tanpa titik koma di akhir.

Catatan: Menggunakan titik koma memungkinkan untuk menulis laporan pada satu baris.

Kode JavaScript

Kode JavaScript (atau hanya JavaScript) yang merupakan urutan pernyataan

JavaScript. Setiap pernyataan dijalankan oleh browser dalam urutan yang tertulis.

Contoh ini akan menulis sebuah heading dan dua paragraf ke halaman web: Contoh

Web1 Job8 Alhadad Page 3

Page 4: Laporan8 Web

<script type="text/javascript">

document.write ("<h1> Ini adalah pos </ h1>");

document.write ("<p> Ini adalah paragraf </ p>.");

document.write ("<p> Ini adalah paragraf lain </ p>.");

</ Script>

JavaScript Blok

Laporan JavaScript dapat dikelompokkan bersama dalam blok. Blok mulai dengan braket

{keriting kiri, dan berakhir dengan braket keriting kanan}. Tujuan dari blok adalah

membuat urutan laporan melaksanakan bersama-sama. Contoh ini akan menulis sebuah

heading dan dua paragraf ke halaman web:

Contoh

<script type="text/javascript">

{

document.write ("<h1> Ini adalah pos </ h1>");

document.write ("<p> Ini adalah paragraf </ p>.");

document.write ("<p> Ini adalah paragraf lain </ p>.");

}

</ Script>

Contoh di atas tidak terlalu berguna. Itu hanya menunjukkan penggunaan blok. Biasanya

blok digunakan untuk laporan grup bersama dalam suatu fungsi atau dalam kondisi (mana

sekelompok laporan harus dieksekusi jika kondisi terpenuhi).

Komentar JavaScript

Komentar JavaScript dapat digunakan untuk membuat kode lebih mudah dibaca.

Komentar dapat ditambahkan untuk menjelaskan JavaScript, atau untuk membuat kode

lebih mudah dibaca. Komentar baris tunggal mulai dengan / /.

Web1 Job8 Alhadad Page 4

Page 5: Laporan8 Web

Contoh berikut ini menggunakan baris komentar untuk menjelaskan kode:

<script type="text/javascript"> Contoh

/ / Tulis pos

document.write ("<h1> Ini adalah pos </ h1>");

/ / Tulis dua paragraf:

document.write ("<p> Ini adalah paragraf </ p>.");

document.write ("<p> Ini adalah paragraf lain </ p>.");

</ Script>

JavaScript Multi-Line Komentar

Komentar sejalan Multi dimulai dengan / * dan diakhiri dengan * /.

Contoh berikut menggunakan multi baris komentar untuk menjelaskan kode:

<script type="text/javascript"> Contoh

/ *

Kode di bawah ini akan menulis

satu pos dan dua paragraf

* /

document.write ("<h1> Ini adalah pos </ h1>");

document.write ("<p> Ini adalah paragraf </ p>.");

document.write ("<p> Ini adalah paragraf lain </ p>.");

</ Script>

Menggunakan Komentar untuk Mencegah Eksekusi

Pada contoh berikut komentar digunakan untuk mencegah eksekusi baris kode tunggal

(bisa cocok untuk debug):

Contoh

<script type="text/javascript">

/ / Document.write ("<h1> Ini adalah pos </ h1>");

document.write ("<p> Ini adalah paragraf </ p>.");

document.write ("<p> Ini adalah paragraf lain </ p>.");

Web1 Job8 Alhadad Page 5

Page 6: Laporan8 Web

</ Script>

Pada contoh berikut komentar digunakan untuk mencegah eksekusi sebuah blok kode

(bisa cocok untuk debug)

Contoh

<script type="text/javascript">

/ *

document.write ("<h1> Ini adalah pos </ h1>");

document.write ("<p> Ini adalah paragraf </ p>.");

document.write ("<p> Ini adalah paragraf lain </ p>.");

* /

</ Script>

Menggunakan Komentar Akhir Line

Pada contoh berikut komentar diletakkan di akhir baris kode:

Contoh

<script type="text/javascript">

document.write ("Hello"); / / Tulis "Hello"

document.write ("Dolly!"); / / Tulis "Dolly!"

</ Script>

Variabel JavaScript

Variabel adalah "wadah" untuk menyimpan informasi.

Apakah Anda Ingat Aljabar Dari Sekolah? Apakah Anda ingat aljabar dari sekolah? x

= 5, y = 6, z = x + y .Apakah Anda ingat bahwa surat (seperti x) dapat digunakan untuk

menyimpan nilai (seperti 5), dan bahwa Anda bisa menggunakan informasi di atas untuk

menghitung nilai z menjadi 11? Surat-surat disebut variabel, dan variabel dapat

digunakan untuk menyimpan nilai (x = 5) atau ekspresi (z = x + y).

Variabel JavaScript

Web1 Job8 Alhadad Page 6

Page 7: Laporan8 Web

Seperti aljabar, variabel JavaScript yang digunakan untuk menyimpan nilai atau

ekspresi. Sebuah variabel dapat memiliki nama pendek, seperti x, atau nama yang lebih

deskriptif, seperti carname. Aturan untuk nama variabel JavaScript:

1. Nama-nama variabel adalah case sensitif (y dan Y adalah dua variabel yang berbeda)

2. Nama-nama variabel harus dimulai dengan huruf atau karakter garis bawah

Catatan: Karena JavaScript bersifat case-sensitif, nama variabel adalah case-sensitive.

Contoh ,Sebuah nilai variabel bisa berubah selama eksekusi script. Anda dapat merujuk

ke variabel nama untuk menampilkan atau mengubah nilainya.

Contoh ini akan menunjukkan kepada Anda bagaimana caranya :

<html>

<body>

<script type="text/javascript">

var firstname;

firstname="Hege";

document.write(firstname);

document.write("<br />");

firstname="Tove";

document.write(firstname);

</script>

<p>The script above declares a variable,

assigns a value to it, displays the value, changes the value,

and displays the value again.</p>

</body>

</html>

Hasilnya :

Hege

Tove

Web1 Job8 Alhadad Page 7

Page 8: Laporan8 Web

The script above declares a variable, assigns a value to it, displays the value, changes the

value, and displays the value again.

Mendeklarasikan (Menciptakan) Variabel JavaScript

Membuat variabel dalam JavaScript yang paling sering disebut sebagai "menyatakan"

variabel. Anda mendeklarasikan variabel JavaScript dengan kata kunci var: var x;

var carname;

Setelah deklarasi yang ditunjukkan di atas, variabel kosong (mereka tidak memiliki nilai

belum). Namun, Anda juga dapat menempatkan nilai ke variabel ketika Anda menyatakan

mereka: var x 5 =;

var carname = "Volvo";

Setelah pelaksanaan pernyataan di atas, variabel x akan menampung nilai 5, dan carname

akan terus nilai Volvo.

Catatan: Bila Anda menetapkan nilai teks ke variabel, gunakan tanda kutip pada nilai.

Catatan: Jika Anda redeclare sebuah variabel JavaScript, tidak akan kehilangan nilainya.

Lokal Variabel JavaScript

Suatu variabel dideklarasikan dalam fungsi JavaScript menjadi LOKAL dan hanya dapat

diakses dalam fungsi tersebut. (Variabel yang memiliki lingkup lokal). Anda dapat

memiliki variabel lokal dengan nama yang sama dalam fungsi yang berbeda, karena

variabel lokal hanya diakui oleh fungsi di mana mereka dinyatakan. variabel lokal hancur

ketika Anda keluar dari fungsi. Anda akan belajar lebih banyak tentang fungsi pada bab

selanjutnya dari tutorial ini.

Global Variabel JavaScript

Variabel yang dideklarasikan di luar fungsi menjadi GLOBAL, dan semua script dan

fungsi pada halaman web dapat mengaksesnya. variabel global hancur bila Anda menutup

halaman. Jika Anda mendeklarasikan variabel, tanpa menggunakan "var", selalu menjadi

variabel GLOBAL.

Menetapkan Nilai ke Variabel JavaScript yang terpercaya

Jika Anda menempatkan nilai ke variabel yang belum dideklarasikan, variabel secara

otomatis akan dinyatakan sebagai variabel global.

Laporan: x 5 =;

Web1 Job8 Alhadad Page 8

Page 9: Laporan8 Web

carname = "Volvo";

Akan mendeklarasikan variabel x dan carname sebagai variabel global (jika mereka

tidak sudah ada).

JavaScript Aritmetika

Seperti aljabar, Anda dapat melakukan operasi aritmatika dengan variabel JavaScript:

y = x-5;

z = y +5;

JavaScript Operators

Operator JavaScript digunakan untuk menetapkan nilai-nilai + digunakan untuk

menambah nilai. Operator penugasan digunakan untuk memberikan nilai pada variabel

JavaScript. Operator aritmatika digunakan untuk menambah nilai bersama.

y = 5;

z 2 =;

x = y + z;

Nilai dari x, setelah pelaksanaan pernyataan di atas adalah 7.

JavaScript Arithmetic Operator

Operator aritmatika digunakan untuk melakukan aritmatika antara variabel dan / atau

nilai-nilai. Mengingat bahwa y = 5, tabel di bawah ini menjelaskan operator aritmatika:

Operator Deskripsi Contoh Hasil

+ Penambahan x = y +2 x = 7 y = 5

- Pengurangan x = y-2 x = 3 y = 5

* Perkalian x = y * 2 x = 10 y = 5

/ Pembagian x = y / 2 x = 2.5 y = 5

% Modulus (sisa

pembagian)

x =% y 2 x = 1 y = 5

+ + Kenaikan/Increment x = + + y x = 6 y = 6

x = y + + x = 5 y = 6

- - Decrement x =-- y x = 4 y = 4

x = y - x = 5 y = 4

JavaScript Operator Penugasan

Penugasan operator digunakan untuk memberikan nilai pada variabel JavaScript.

Mengingat bahwa x = 10 dan y = 5, tabel di bawah ini menjelaskan operator penugasan:

Operator Contoh Sama Seperti Hasil

Web1 Job8 Alhadad Page 9

Page 10: Laporan8 Web

= x = y x = 5

+ X + = y x = x + y x = 15

-= X - = y x = x-y x = 5

*= X *= y x = x * y x = 50

/= X / = y x = x / y x = 2

%= x% = y x = x% y x = 0

Operator + Digunakan pada String . Operator + juga dapat digunakan untuk

menambahkan variabel string atau nilai-nilai teks bersama-sama.Untuk menambahkan

dua atau lebih variabel string bersama, gunakan + operator.txt1 = "Apa yang sangat";

txt2 = "nice day";

txt3 = txt1 + txt2;

Setelah pelaksanaan pernyataan di atas, variabel txt3 berisi "Semoga harimu

menyenangkan".

Untuk menambahkan spasi di antara dua senar, menyisipkan spasi menjadi salah satu

string: txt1 = "Apa yang sangat";

txt2 = "nice day";

txt3 = txt1 + txt2;

atau menyisipkan ruang menjadi ekspresi: txt1 = "Apa yang sangat";

txt2 = "nice day";

txt3 = txt1 + "" + txt2;

Setelah pelaksanaan pernyataan di atas, variabel txt3 berisi:

"Sungguh hari yang sangat menyenangkan"

C. Peralatan dan Bahan

1. PC Processor minimal Pentium IV, RAM minimal 512 MB

2. Editor Web Notepad atau Edit Plus

3. Browser Mozilla, IE, dll

II. LANGKAH KERJA

1. Mengaktifkan computer

2. Membuat folder Web1Praktek8 pada direktori : D:\

3. Membuka Edit Plus atau NotePad untuk menuliskan kode program HTML.

Web1 Job8 Alhadad Page 10

Page 11: Laporan8 Web

4. Membuka lembar kerja baru dan menuliskan kode program berikut (gambar 8.1):

<html><title> Praktek8-1-KodeJavaScript-ALHADAD</title><body>

<script type="text/javascript">document.write("<h1>This is a heading</h1>");document.write("<p>This is a paragraph.</p>");document.write("<p>This is another paragraph.</p>");</script>

</body>

Gambar 8.1 Kode JavaScript

5. Menyimpan dengan nama file: Praktek8-1-KodeJavaScript-alhadad.html

6. Menjalankan hasilnya menggunakan browser .

7. Mengmbil gambar dari hasil kode program Praktek8-1-KodeJavaScript-

ALHADAD.html dan memasukkan dalam lembar kerja.

8. Mengulangi langkah kerja no 1-4 untuk melakukan praktek selanjutnya, namun pada

point 4, kode programnya sebagai berikut (gambar 8.2):

<html><title> Praktek8-2-BlokJavaScript-alhadad</title><body>

<script type="text/javascript">{document.write("<h1>This is a heading</h1>");document.write("<p>This is a paragraph.</p>");document.write("<p>This is another paragraph.</p>");}</script>

</body>

Gambar 7.2 Blok JavaScript

9. Menyimpan file dengan nama file: Praktek8-2-BlokJavaScript-alhadad.html

10. Menjalankan hasilnya menggunakan browser .

11. Mengambil gambar dari hasil kode program Praktek8-2-BlokJavaScript-

alhadad.html dan memasukkannya ke dalam lembar kerja.

12. Membuka lembar kerja baru dan menuliskan kode program berikut (gambar8.3):

Web1 Job8 Alhadad Page 11

Page 12: Laporan8 Web

<html><title>Praktek8-3-JavaScriptComments-alhadad</title><body>

<script type="text/javascript">// Write a headingdocument.write("<h1>This is a heading</h1>");// Write two paragraphs:document.write("<p>This is a paragraph.</p>");document.write("<p>This is another paragraph.</p>");</script>

</body></html>

Gambar 7.3 Java Script Comments

13. Menyimpan file dengan nama file: Praktek8-3-JavaScriptComments-

alhadad.html.

14. Menjalankan hasilnya menggunakan browser .

15. Mengambil gambar dari hasil kode program Praktek8-3-JavaScriptComments-

alhadad.html. dan memasukkannya ke dalam lembar kerja.

16. Membuka lembar kerja baru dan menuliskan kode program berikut (gambar 8.4):

<html><title>Praktek8-4-JavaScriptMulti-LineComments-alhadad</title><body>

<script type="text/javascript">/*The code below will writeone heading and two paragraphs*/document.write("<h1>This is a heading</h1>");document.write("<p>This is a paragraph.</p>");document.write("<p>This is another paragraph.</p>");</script>

Gambar 8.4 JavaScript Multi-Line Comments

17. Menyimpan file dengan nama file: Praktek8-4-JavaScriptMulti-LineComments-

alhadad.html

18. Menjalankan hasilnya menggunakan browser .

19. Mengambil gambar dari hasil kode program Praktek8-4-JavaScriptMulti-

LineComments-alhadad.html dan memasukkannya ke dalam lembar kerja.

20. Membuka lembar kerja baru dan menuliskan kode program berikut (gambar 8.5):

Web1 Job8 Alhadad Page 12

Page 13: Laporan8 Web

<html><title>Praktek8-5-UsingCommentstoPreventExecution-alhadad</title><body>

<script type="text/javascript">//document.write("<h1>This is a heading</h1>");document.write("<p>This is a paragraph.</p>");document.write("<p>This is another paragraph.</p>");</script>

</body></html>

Gambar 8.5 Using Comments to Prevent Execution

21. Menyimpan file dengan nama file: Praktek8-5-

UsingCommentstoPreventExecution-alhadad.html

22. Menjalankan hasilnya menggunakan browser .

23. Mengambil gambar dari hasil kode program Praktek8-5-

UsingCommentstoPreventExecution-alhadad.html dan memasukkannya ke dalam

lembar kerja.

24. Membuka lembar kerja baru dan menuliskan kode program berikut (gambar 8.6):

<html><title>Praktek8-6-UsingCommentstoPreventExecution_aCodeBlock-alhadad</title><body>

<script type="text/javascript">/*document.write("<h1>This is a heading</h1>");document.write("<p>This is a paragraph.</p>");document.write("<p>This is another paragraph.</p>");*/</script>

</body></html>

Gambar 7.6 Using Comments to Prevent Execution a Code Block

25. Menyimpan file dengan nama file: Praktek8-6-

UsingCommentstoPreventExecution_aCodeBlock-alhadad.html.

26. Menjalankan hasilnya menggunakan browser .

27. Mengambil gambar dari hasil kode program Praktek8-6-

UsingCommentstoPreventExecution_aCodeBlock-alhadad.html dan

memasukkannya ke dalam lembar kerja.

Web1 Job8 Alhadad Page 13

Page 14: Laporan8 Web

28. Membuka lembar kerja baru dan menuliskan kode program berikut (gambar 8.7):

<html><title>Praktek8-7-UsingCommentsAtTheEndOfaLine-alhadad</title><body>

<script type="text/javascript">document.write("Hello"); // Write "Hello"document.write(" Dolly!"); // Write " Dolly!"</script>

</body></html>

Gambar 7.7 Using Comments At The End Of a Line

29. Menyimpan file dengan nama file: Praktek8-7-

UsingCommentsAtTheEndOfaLine-alhadad.html

30. Menjalankan hasilnya menggunakan browser .

31. Mengambil gambar dari hasil kode program Praktek8-7-

UsingCommentsAtTheEndOfaLine-alhadad.html dan memasukkannya ke dalam

lembar kerja.

32. Membuka lembar kerja baru dan menuliskan kode program berikut (gambar 8.8):

<html><title>Praktek8-8-JavaScriptVariabel-alhadad</title><body>

<script type="text/javascript">var firstname;firstname="Hege";document.write(firstname);document.write("<br />");firstname="Tove";document.write(firstname);</script>

<p>The script above declares a variable,assigns a value to it, displays the value, changes the value,and displays the value again.</p>

</body></html>

Gambar 7.8 JavaScript Variabel

33. Menyimpan file dengan nama file: Praktek8-8-JavaScriptVariabel-alhadad.html

34. Menjalankan hasilnya menggunakan browser .

35. Mengambil gambar dari hasil kode program Praktek8-8-JavaScriptVariabel-

alhadad.html dan memasukkannya ke dalam lembar kerja.

Web1 Job8 Alhadad Page 14

Page 15: Laporan8 Web

36. Membuka lembar kerja baru dan menuliskan kode program berikut (gambar 8.9):

<html><title>Praktek8-9-JavaScriptOperators_AddingStringsandNumbers-alhadad</title><body>

<script type="text/javascript">var x;x=5+5;document.write(x);document.write("<br />");x="5"+"5";document.write(x);document.write("<br />");x=5+"5";document.write(x);document.write("<br />");x="5"+5;document.write(x);document.write("<br />");</script>

<p>The rule is: If you add a number and a string, the result will be a string.</p>

</body>

Gambar 8.9 JavaScript Operators Adding Strings and Numbers

37. Menyimpan file dengan nama file: Praktek8-9-

JavaScriptOperators_AddingStringsandNumbers-alhadad.html.

38. Menjalankan hasilnya menggunakan browser .

39. Mengambil gambar dari hasil kode program Praktek8-9-

JavaScriptOperators_AddingStringsandNumbers-alhadad.html dan

memasukkannya ke dalam lembar kerja.

40. Membuka lembar kerja baru dan menuliskan kode program berikut (gambar 8.10):

Web1 Job8 Alhadad Page 15

Page 16: Laporan8 Web

<html><title>Praktek8-10-IfStatement-alhadad</title><body>

<script type="text/javascript">var d = new Date();var time = d.getHours();

if (time < 10) { document.write("<b>Good morning</b>"); }</script>

<p>This example demonstrates the If statement.</p><p>If the time on your browser is less than 10, you will get a "Good morning" greeting.</p>

</body></html>

Gambar 8.10 IfStatement

41. Menyimpan file dengan nama file: Praktek8-10-IfStatement-alhadad.html

42. Menjalankan hasilnya menggunakan browser .

43. Mengambil gambar dari hasil kode program Praktek8-10-IfStatement-alhadad.html

dan memasukkannya ke dalam lembar kerja.

44. Membuka lembar kerja baru dan menuliskan kode program berikut (gambar 8.11):

Web1 Job8 Alhadad Page 16

Page 17: Laporan8 Web

<html><title>Praktek8-11-IfElseStatement-alhadad</title><body>

<script type="text/javascript">var d = new Date();var time = d.getHours();

if (time < 10) {document.write("<b>Good morning</b>");}else{document.write("<b>Good day</b>");}</script>

<p>This example demonstrates the If...Else statement.</p>

<p>If the time on your browser is less than 10,you will get a "Good morning" greeting.Otherwise you will get a "Good day" greeting.</p>

</body></html>

Gambar 8.11 If Else Statement

45. Menyimpan file dengan nama file: Praktek8-11-IfElseStatement-alhadad.html

46. Menjalankan hasilnya menggunakan browser .

47. Mengambil gambar dari hasil kode program Praktek8-11-IfElseStatement-

alhadad.html dan memasukkannya ke dalam lembar kerja

48. Membuka lembar kerja baru dan menuliskan kode program berikut (gambar 8.12):

Web1 Job8 Alhadad Page 17

Page 18: Laporan8 Web

<html><title>Praktek8-12-If_ElseIf_ElseStatement-alhadad</title><body>

<script type="text/javascript">var d = new Date();var time = d.getHours();if (time<10){document.write("<b>Good morning</b>");}else if (time>=10 && time<16){document.write("<b>Good day</b>");}else{document.write("<b>Hello World!</b>");}</script>

<p>This example demonstrates the if..else if...else statement.</p>

</body>

Gambar 8.12 Input Type Color

49. Menyimpan file dengan nama file: Praktek8-12-If_ElseIf_ElseStatement-

alhadad.html

50. Menjalankan hasilnya menggunakan browser .

51. Mengambil gambar dari hasil kode program Praktek8-12-If_ElseIf_ElseStatement-

alhadad.html dan memasukkannya ke dalam lembar kerja

Web1 Job8 Alhadad Page 18

Page 19: Laporan8 Web

III. LEMBAR KERJA

No Praktik Hasil Program Komentar

1 Praktek8-1-

KodeJavaScr

ipt-

alhadad.html

Tag <script type="text/javascript">document.write("<h1>This is a heading</h1>");document.write("<p>This is a paragraph.</p>");Kode java script yang digunakan untuk menampilkan Heading 7 paragraph.

2 Praktek8-2-

BlokJavaScri

pt.alhadad.ht

ml

Tag<script type="text/javascript">{document.write("<h1>This is a heading</h1>");document.write("<p</script> digunakan untuk menampilkan bentuk balok Heading 7 paragraph.

3 Praktek8-3-

JavaScriptCo

mments-

alhadad.html

Tag <script type="text/javascript">// Write a headingdocument.write("<h1>This is a heading</h1>");// Write two paragraphs:document.write("<p>This is a paragraph.</p>");</script>Digunakan untuk menmpilkan comments

Web1 Job8 Alhadad Page 19

Page 20: Laporan8 Web

4 Praktek8-4-

JavaScriptM

ulti-

LineCommen

ts-

alhadad.html

Tag <script type="text/javascript">/*The code below will writeone heading and two paragraphs

Digunakan untuk menampilkan comments yang lebih dari satu.

5 Praktek8-5-

UsingComme

ntstoPrevent

Execution-

alhadad.html.

Tag < script type="text/javascript">//document.write("<h1>This is a heading</h1>");document.write("<p>This is a paragraph.</p>");document.write("<p></script> Digunakan untuk menampilkan comments yang berisi paragraph langsung.

6. Praktek8-6-

UsingComme

ntstoPrevent

Execution_a

CodeBlock-

alhadad.html

Tag <script type="text/javascript">/*document.write("<h1>This is a heading</h1>");

Digunakan untuk menmpilkan comment dengan penanda asterisk.

7. Praktek8-7-

UsingComme

ntsAtTheEnd

OfaLine-

alhadad.html

Tag <script type="text/javascript">document.write("Hello"); // Write "Hello"document.write(" Dolly!"); // Write " Dolly!"</script>

Digunkana untuk menampilkan kalimat

Web1 Job8 Alhadad Page 20

Page 21: Laporan8 Web

8. Praktek8-8-

JavaScriptVa

riabel.html.

Tag <script type="text/javascript">var firstname;firstname="Hege";document.write(firstname);document.write("<br />");firstname="Tove";document.write(firstname);</script>

Digunkan untuk menmpilkan nama.

9. Praktek8-9-

JavaScriptOp

erators_Addi

ngStringsand

Numbers-

alhadad.html

Tag <script type="text/javascript">var x;x=5+5;document.write(x);document.write("<br />");x="5"+"5";document.write(x);document.write("<br />");x=5+"5";document.write(x);document.write("<br />");x="5"+5;document.write(x);document.write("<br />");</script>

Digunkan untuk menmpilkan demonstrasi if statement.

10

.

Praktek8-10-

IfStatement-

alhadad.html

Tag <script type="text/javascript">var d = new Date();var time = d.getHours();

if (time < 10) { document.write("<b>Good morning</b>"); }</script>Digunkan untuk menmpilkan demonstrasi

Web1 Job8 Alhadad Page 21

Page 22: Laporan8 Web

if statement.

11

.

Praktek8-11-

IfElseStateme

nt-

alhadad.html

<script type="text/javascript">var d = new Date();var time = d.getHours();

if (time < 10) {document.write("<b>Good morning</b>");}else{document.write("<b>Good day</b>");}</script>

<p>This example demonstrates the If...Else statement.</p>

Digunakan untuk menampilkan IfElse statement..

12

.

Praktek8-12-

If_ElseIf_Els

eStatement-

alhadad.html

Tag <script type="text/javascript">var d = new Date();var time = d.getHours();if (time<10){document.write("<b>Good morning</b>");}else if (time>=10 && time<16){document.write("<b>Good day</b>");}else{document.write("<b>Hello World!</b>");}</script>

Digunakan untuk menmpilkan if..else if...else statement.

Web1 Job8 Alhadad Page 22

Page 23: Laporan8 Web

IV. KESIMPULAN

JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien. Jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan khusus untuk di browser atau halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program.

Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek yang dibenamkan ( embedded ). Contoh sederhana dari penggunaan JavaScript adalah membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke server, merubah image kursor ketika melewati objek tertentu, dan lain lain.

JavaScript bekerja pada sisi browser. maksudnya begini : untuk menampilkan halaman web, user menuliskan alamat web di address bar url. setelah itu, browser “mengambil” file html ( dengan file jJvaScript yang melekat padanya jika memang ada ) ke server yang beralamat di URL yang diketikan oleh user. Selesai file diambil, file ditampilkan pada browser. Nah, setelah file JavaScript berada pada browser, barulah script JavaScript tersebut bekerja.

Efek dari Javascript yang bekerja pada sisi browser ini, Javascript dapat merespon perintah user dengan cepat, dan membuat halaman web menjadi lebih responsif. JavaScript melakukan apa yang tidak bisa dilakukan oleh HTML, PHP, dan CSS : menangani hal – hal yang membutuhkan respons cepat terhadap aksi dari user.

Implementasi terpopuler saat ini dari pemrograman JavaScript adalah teknik AJAX. (Asynchronous JavaScript and XMLHTTP ). teknik ini sering digunakan oleh aplikasi berbasis web seperti Gmail, Google Reader, dan lain lain. Teknik yang membuat pertukaran data antara server dan browser terjadi di belakang layar sehingga interaksi antara user dan aplikasi web semakin responsif. Post tersendiri untuk membahas hal ini akan kita siapkan.

Web1 Job8 Alhadad Page 23