LEMBAR KERJA PRAKTIKUM. - JavaScript Alert yang ditampilkan browser saat membuka halaman home/index.html :

LEMBAR KERJA PRAKTIKUM Nim : 13-1401-164 Hari / Tgl TTD Asisten Nama Kelas : Muh. Idrus : DK-13 Mata kuliah : Pemrograman Web I Materi : JavaScript - JavaScript Alert yang ditampilkan browser saat membuka halaman home/index.html : Tampilan halaman index.html :

Source code : <!DOCTYPE html> <html> <head> <title> MIS`` </title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/jscript.js"></script> </head> <body onload="welcom()"> <div id="header"> <a href="index.html"> <div id="logo"> <label>m<br>i<br>s</label> <h2> Pertemuan ke 5 Praktikum Pemrograman <span>web I</span> </h2> </a> <div id="menu"> <a href="index.html">home</a>. <a href="about.html">about</a>. <a href="project.html">project</a> <div id="content"> <div id="left"> <h1>welcome...</h1> Selamat datang di situs ini dan terima kasih atas kunjungan anda... <div id="right"> <p> <img src="images/author.png"> Saya Muhammad Idrus dan ini adalah tugas kelima praktikum web I </p> <div id="footer"> &COPY; Muh. Idrus Sukardi </body> </html>

- About/about.html Source code : <!DOCTYPE html> <html> <head> <title> MIS`` </title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/jscript.js"></script> </head> <body> <div id="header"> <a href="index.html"> <div id="logo"> <label>m<br>i<br>s</label> <h2> Pertemuan ke 5 Praktikum Pemrograman <span>web I</span> </h2> </a> <div id="menu"> <a href="index.html">home</a>. <a href="about.html">about</a>. <a href="project.html">project</a> <div id="content"> <div id="left"> <h1> Tentang Saya </h1> Nama : Muh. Idrus<br> Email : idrus.muhammad313@gmail.com<br>

Blog : http://idrusmuhammad.wordpress.com <h1> Tentang Situs Ini </h1> Merupakan situs di mana di dalamnya dapat ditemukan contoh-contoh penggunaan javascript pada halaman html. <div id="right"> <p> <img src="images/author.png"> Saya Muhammad Idrus dan ini adalah tugas kelima praktikum web I </p> <div id="footer"> &COPY; Muh. Idrus Sukardi </body> </html> - Project/project.html : Source code : <!DOCTYPE html> <html> <head> <title> MIS`` </title> <link rel="stylesheet" type="text/css" href="css/style.css">

- Calculator Alert tombol operator sebelum menginput angka : Alert tombol = sebelum ada inputan data : Contoh perhitungan :

Source code : <!DOCTYPE html> <html> <head> <title> MIS`` </title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/jscript.js"></script> </head> <body> <div id="header"> <a href="index.html"> <div id="logo"> <label>m<br>i<br>s</label> <h2> Pertemuan ke 5 Praktikum Pemrograman <span>web I</span> </h2> </a> <div id="menu"> <a href="index.html">home</a>. <a href="about.html">about</a>. <a href="project.html">project</a> <div id="content"> <div id="left"> <h1>javascript Calculator</h1> <div id="calculator"> <FORM NAME="Calc"> <INPUT id="txtinput" TYPE="text" NAME="Input"> <br> <INPUT TYPE="button" NAME="satu" VALUE="1" OnClick="Calc.Input.value += this.value"> <INPUT TYPE="button" NAME="dua" VALUE="2" OnCLick="Calc.Input.value += this.value"> <INPUT TYPE="button" NAME="tiga" VALUE="3" OnClick="Calc.Input.value += this.value"> <INPUT TYPE="button" NAME="plus" VALUE="+" OnClick="tambah()"> <br> <INPUT TYPE="button" NAME="empat" VALUE="4" OnClick="Calc.Input.value += this.value"> <INPUT TYPE="button" NAME="lima" VALUE="5" OnCLick="Calc.Input.value += this.value"> <INPUT TYPE="button" NAME="enam" VALUE="6" OnClick="Calc.Input.value += this.value">

<INPUT TYPE="button" NAME="min" VALUE="-" OnClick="kurang()"> <br> <INPUT TYPE="button" NAME="tujuh" VALUE="7" OnClick="Calc.Input.value += this.value"> <INPUT TYPE="button" NAME="delapan" VALUE="8" OnCLick="Calc.Input.value += this.value"> <INPUT TYPE="button" NAME="sembilan" VALUE="9" OnClick="Calc.Input.value += this.value"> <INPUT TYPE="button" NAME="multi" VALUE="x" OnClick="kali()"> <br> <INPUT TYPE="button" NAME="bersih" VALUE="c" OnClick="Calc.Input.value = ''"> <INPUT TYPE="button" NAME="nol" VALUE="0" OnClick="Calc.Input.value += this.value"> <INPUT TYPE="button" NAME="hasil" VALUE="=" OnClick="Hasil()"> <INPUT TYPE="button" NAME="div" VALUE="/" OnClick="bagi()"> <br> </FORM> <div id="right"> <p> <img src="images/author.png"> Saya Muhammad Idrus dan ini adalah tugas kelima praktikum web I </p> <div id="footer"> &COPY; Muh. Idrus Sukardi </body> </html>

- Penggunaan javascript pada halaman html : Source code : <!DOCTYPE html> <html> <head> <title> MIS`` </title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/jscript.js"></script> </head> <body> <div id="header"> <a href="index.html"> <div id="logo"> <label>m<br>i<br>s</label> <h2> Pertemuan ke 5 Praktikum Pemrograman <span>web I</span> </h2> </a> <div id="menu"> <a href="index.html">home</a>. <a href="about.html">about</a>. <a href="project.html">project</a>

<div id="content"> <div id="left"> <h1>javascript Penggunaan Variabel</h1> Operasi penjumlahan <br> Dua + Empat = <code> <script type="text/javascript"> variabel()</script> </code> <h1>javascript Operator Aritmatika</h1> <code> <script type="text/javascript"> oaritmatika() </script> </code> <h1>javascript Operator Assignment</h1> <code> <script type="text/javascript">oassignment()</script> </code> <h1>javascript Operator Logika IF</h1> <code> <script type="text/javascript">ologika()</script> </code> <h1>javascript Pengkondisian Switch</h1> <code> <script type="text/javascript">k_switch()</script> </code> <div id="right"> <p> <img src="images/author.png"> Saya Muhammad Idrus dan ini adalah tugas kelima praktikum web I </p>

<div id="footer"> &COPY; Muh. Idrus Sukardi </body> </html> - JavaScript Pengulangan : Source code : <!DOCTYPE html> <html> <head> <title> MIS`` </title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/jscript.js"></script> </head> <body> <div id="header"> <a href="index.html"> <div id="logo"> <label>m<br>i<br>s</label> <h2> Pertemuan ke 5 Praktikum Pemrograman <span>web

I</span> </h2> </a> <div id="menu"> <a href="index.html">home</a>. <a href="about.html">about</a>. <a href="project.html">project</a> <div id="content"> <div id="left"> <h1>javascript Pengulangan FOR </h1> <code> <script type="text/javascript">p_for()</script> </code> <h1>javascript Pengulangan While </h1> <code> <script type="text/javascript">p_while()</script> </code> <h1>javascript Pengulangan FOR...IN </h1> <code> <script type="text/javascript">p_for_in()</script> </code> <div id="right"> <p> <img src="images/author.png"> Saya Muhammad Idrus dan ini adalah tugas kelima praktikum web I </p> <div id="footer"> &COPY; Muh. Idrus Sukardi </body> </html>

- JavaScript break & continue statement : Source code : <!DOCTYPE html> <html> <head> <title> MIS`` </title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/jscript.js"></script> </head> <body> <div id="header"> <a href="index.html"> <div id="logo"> <label>m<br>i<br>s</label> <h2> Pertemuan ke 5 Praktikum Pemrograman <span>web I</span> </h2> </a> <div id="menu"> <a href="index.html">home</a>. <a href="about.html">about</a>. <a href="project.html">project</a> <div id="content"> <div id="left"> <h1>javascript Break Statement </h1> <code>

function kurang(){ var txtinput=document.calc.input.value; if (txtinput==''){ alert("masukkan angka lebih dulu!") else{ document.calc.input.value += ' - ' function kali(){ var txtinput=document.calc.input.value; if (txtinput==''){ alert("masukkan angka lebih dulu!") else{ document.calc.input.value += ' * ' function bagi(){ var txtinput=document.calc.input.value; if (txtinput==''){ alert("masukkan angka lebih dulu!") else{ document.calc.input.value += ' / ' // js tampil pesan ketika membuka halaman function welcom(){ alert("selamat datang di halaman webku...") // contoh penggunaan variabel function variabel(){ var jumlah; jumlah = "Enam"; document.write(jumlah); // contoh penggunaan operator aritmatika function oaritmatika(){ var x = "Belajar"; var y = "JavaScript"; z = x + y; document.write(z);

// contoh penggunaan operator assignment function oassignment(){ var x = 9; var y = 5; x += 20; x++; x -= y; document.write("nilai x = " + x); // contoh penggunaan operator logika function ologika(){ var jam = 17; if (jam <= 10) { document.write("selamat Pagi."); else if (jam > 10 && jam <= 15) { document.write("selamat Siang."); else { document.write("selamat Sore."); // contoh pengkondisian switch function k_switch(){ var hari = 1; var pesan = ""; switch (hari){ case 0 : { pesan = "Hari Minggu"; break; case 1 : { pesan = "Hari Senin"; break; case 2 : { pesan = "Hari Selasa"; break; case 3 : { pesan = "Hari Rabu"; break; case 4 : { pesan = "Hari Kamis"; break; case 5 : { pesan = "Hari Jumat"; break; case 6 : { pesan = "Hari Sabtu"; break; default : pesan = "Hari Apa?"; document.write(pesan); // contoh pengulangan for function p_for(){ var i = 0; for (i = 0; i <= 5; i++){ document.write("nomor : "+ i + "<br/>");

// contoh pengulangan while function p_while(){ var i = 5; while (i >= 0){ document.write("nomor : "+ i + "<br/>"); i--; // contoh pengulangan for...in function p_for_in(){ var x; var mycars = new Array(); mycars[0] = "Avansa"; mycars[1] = "BMW"; mycars[2] = "Volvo"; for (x in mycars){ document.write(mycars[x] + "<br/>"); // contoh break statement function b_statement(){ var i = 0; for (i=0; i<=10;i++){ if (i==3){ break; document.write("nomor : " + i + "<br/>"); document.write("akhir dari pengulangan."); // contoh continue statement function c_statement(){ for (i = 0; i <= 5; i++) { if (i==3){ continue; document.write("nomor : " + i + "<br/>");

- Soyrce code style.css : /* CSS Document */ body{ background: #EBEBE3 url(../images/art.png) no-repeat top fixed; margin: 0px; font-family: Georgia, Times, 'Times New Roman', serif; #header{ width: 820px; margin: auto; height: 100px; #logo{ background-image: url(../images/bg_logo.png); width: 20px; height: 100px; #logo label{ text-align: center; float: left; color: #FFFFFF; margin-top: 20px; font-weight: bold; font-size: 20px; #header h2{ width: 300px; float: left; font-size: 15px; font-weight: normal; padding: 0px; margin-left: 25px; margin-top: -40px; color: #000000; #logo h2:hover{ color: green; h1{ margin: 0px; font-size: 18px; font-family: 'GothicCustom', Impact, 'Arial Narrow', sans-serif; font-weight: normal; #header span{

font-weight: bold; font-size: 20PX; #menu{ margin-left: 620px; margin-top: -20px; position: fixed; a{ text-decoration: none; color: #000000; #menu a:hover,.div a:hover{ font-weight: bold; color: green; #content{ width: 820px; margin: auto; clear: both; #left{ width: 520px; float: left; min-height: 300px; padding-top: 20px;.div{ width: 500px; border-radius: 5px; margin-bottom: 20px; padding: 10px; background: #FFFFFF url(../images/star.png) no-repeat left top; opacity: 0.6;.div h1{ margin-left: 20px; border-bottom: 1px solid lightgreen; border-bottom-right-radius: 15px; margin-bottom: 10px;.div:hover{ opacity: 1; #calculator{ margin: auto;

width: 216px; height: 280px; border: 15px ridge lightgreen; #calculator form { margin: auto; #calculator input{ float: left; width: 50px; height: 50px; margin: 2px; border-radius: 5px; font-size: 20px; font-weight: bold; box-shadow: 0px 0px 1px 1px black; input#txtinput{ width: 202px; padding: 3px; text-align: right; border-radius: 0px; #calculator br{ clear: both; #right{ width: 200px; margin-left: 620px; min-height: 300px; position: fixed; opacity: 0.9; #right p img{ width: 200px; height: 200px; #footer{ clear: both; height: 20px; color: #000000; text-align: center; margin-bottom: 20px; p{ font-size: 12px;