lapres pemweb mod 2 2014

LAPORAN RESMI

PRAKTIKUM PEMROGRAMAN WEB

MODUL II

“JAVA SCRIPT”

Disusun Oleh :

LABORATORIUM COMMON COMPUTING

JURUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS TRUNOJOYO MADURA

2014

TGL. PRAKTIKUM : 14 Oktober 2014

NAMA : NABILA SANI FADDIA

NRP : 11.04.111.00045

KELAS : A

DOSEN : Jauhari S.T., M.Kom.,

ASISTEN : Aris Prama Aulia Disetujui :......./........../............../Bangkalan

ASISTEN DOSEN

IWAN PURWANTO

NRP. 11.04.111.00013

BAB I

PENDAHULUAN

1.1 LATAR BELAKANG

Kurangnya pemahaman materi saat kuliah membuat mahasiswa terkadang

membutuhkan praktek langsung dari pemberi materi. Hal-hal lain yang

mendukung hal itu adalah bahwa mahasiswa cenderung mudah dalam

memahami suatu materi dari dosen ketika mempraktekkannya secara

langsung pada suatu waktu. Oleh karena hal tersebut sangat penting, maka

diperlukan praktikum Pemrograman Web ini.

1.2 TUJUAN PRAKTIKUM

1. Mahasiswa dapat mengetahui dan memahami apa itu Java script, CSS,

HTML.

2. Mahasiswa dapat mengaplikasikan Java Script, CSS, HTML.

3. Mahasiswa dapat mengimplementsikan ke dalam bahasa pemrograman

web Java Script, CSS, HTML

BAB II

DASAR TEORI

2.1 Pengertian Javascript

Javascript adalah bahasa yang berbentuk kumpulan skrip berjalan pada suatu

dokumen HTML. Bahasa ini adalah bahasa pemrograman untuk

memberikan kemampuan tambahan terhadap bahasa HTML dengan

mengijinkan pengeksekusian perintah-perintah di sisi user artinya di sisi

browser bukan di sisi server web. JavaScript adalah bahasa yang “case

sensitive” artinya membedakan penamaan variabel dan fungsi yang

menggunakan huruf besar dan huruf kecil, contoh variabel atau fungsi

dengan nama T EST berbeda dengan variabel dengan nama test dan setiap

instruksi diakhiri dengan karakter titik koma (; ).

2.2 Java Script

Adalah bahasa pemrograman sederhana yang dispesifikasikan untuk

memberikan aksi secara dinamis pada halaman web. Kode javascript

memiliki lojik sebagaimana bahasa pemrograman lainnya seperti C atau

Java bahkan dapat mengadopsi konsep pemrograman berorientasi obyek.

Seperti halnya pada CSS, kode java script dapat dituliskan langsung pada

halaman web ataupun direferensikan dari file link diluar file halaman web.

Untuk penulisan langsung

<script type="text/javascript">

// Java script code here.....

function add(){

var a = 1

var b = 2

document.write (a+b)

return (a+b)

}

<script>

Untuk penulisan link

<script src="http://googlecode.com/svn/jquery_1.5.js"></script>

Standar penulisan javascript mengikuti standar ANSI seperti halnya

bahasa C. berikut adalah beberapa pola aturan penulisan kode bahasa

pemrograman javascript:

a. Tipe Data

Primitif, tipe data dasar seperti boolean, string dan number.


var myNumber = 10;

var myText = ‘hello java scripter’;

var test = true;

</script>

Abstrak, tipe data abstrak seperti array, map.


<!—

// array

var myStudent = new Array(10);

myStudent[1] = 'adi';

myStudent[2] = 'tina';

for(i=1;i<myStudent.length;i++){

if(myStudent[i]!=null)

document.writeln(myStudent[i]);

}

// -->

b. Seleksi, penyeleksian kondisi seperti if dan case.


function test(number){

if (number==0)

alert(number+" is zero");

else

alert(number+" is not zero");

}

</script>

<input name="testNumber"

c. Perulangan, kondisi perulangan seperti while, for.


var n = 1;

while( n <= 5 ){

document.write(n);

n++;

}

for (i=1; i<=n; i++){

document.write(i);

}

</script>

d. Function dan objek


var now = new Date();

document.write(now);

document.write("<br>");

var date = now.getDate();

document.write("tanggal: "+date);

document.write("<br>");

var month = now.getMonth();

document.write("bulan: "+month);

</script>

2.3 Document Objek Model (DOM)

Penanganan properties, event dan method menggunakan Javascript. DOM

merupakan property, event dan methode yang terdapat pada elemen

dokumen HTML.

<html>

<head>

<title>Using JavaScript DOM</title>

<script language="javascript">

function display(teks){

document.getElementById('targetDiv').innerHTML =

"<h1>"+teks+"</h1>";

}

</script>

</head>

<body>

<h1>Menggunakan Javascript DOM</h1>

<form>

<input onkeyup="display(this.value)"/>

</form>

<div id="targetDiv">

2.4 AJAX, Ashycronous Javascript, HTML

AJAX digunakan untuk mengoptimalkan perubahan data dan tampilan pada

HTML secara MOCKUP dimana tidak diperlukan perubahan refresh pada

halaman utama sehingga perubahan dapat dilakukan secara lebih fleksibel

dan efisien. Teknologi Ajax menggunakan DOM Javascript dan transfer

XMLHttpRequest. Contoh penggunaan ajax seperti ditunjukkan pada

Gambar 3.1.

Gambar 3.1.

Source Code

<script type = "text/javascript">

var XMLHttpRequestObject = false;

if (window.XMLHttpRequest) {

XMLHttpRequestObject = new XMLHttpRequest();

}

else if (window.ActiveXObject) {

XMLHttpRequestObject = new

ActiveXObject("Microsoft.XMLHTTP");

}

function getData(dataSource, divID){

if(XMLHttpRequestObject) {

var obj = document.getElementById(divID);

XMLHttpRequestObject.open("GET", dataSource);

XMLHttpRequestObject.onreadystatechange =

function(){

if (XMLHttpRequestObject.readyState == 4 &&

XMLHttpRequestObject.status == 200) {

obj.innerHTML = XMLHttpRequestObject.responseText;

}

}

XMLHttpRequestObject.send(null);

Contoh lengkap menggunakan AJAX sebagai berikut :

<html>

<head>

<title>Using Ajax with XML</title>

<script language = "javascript">

var colors;

var XHR = false;

if (window.XMLHttpRequest) {

XHR = new XMLHttpRequest();

XHR.overrideMimeType("text/xml");

} else if (window.ActiveXObject) {

XHR = new ActiveXObject("Microsoft.XMLHTTP");

}

function getData(dataSource, divID)

{

if(XHR) {

XHR.open("GET", dataSource);

var obj = document.getElementById(divID);

XHR.onreadystatechange = function()

{

if (XHR.readyState == 4 && XHR.status == 200) {

var xmlDocument = XHR.responseXML;

colors = xmlDocument.getElementsByTagName("color");

obj.innerHTML = "Here are the fetched colors:<ul>";

for (loopIndex =0; loopIndex < colors.length; loopIndex++)

{

obj.innerHTML += "<li>" +

colors[loopIndex].firstChild.data + "</li>";

}

obj.innerHTML += "</ul>";

}

}

XHR.send(null);

}

}

</script>

</head>

<body>

<h1>Using Ajax with XML</h1>

<form>

<input type = "button" value = "Fetch the Colors"

onclick = "getData('colors.xml', 'targetDiv')">

2.5 Freamwork Javascript

Dikarenakan pengaksesan DOM memerlukan pengkodean yang besar dengan

tingkat kesulitan yang tinggi, maka untuk mempermudah Javascript dalam

pengaksesan DOM, desain UI serta Ajax maka dikembangkan berbagai

framework Javascript sebagai library pembantu. Diantara framework JS yang

terkenal adalah:

JQuery

Prototype

Yahoo

Ext JS

Dojo

MooTools

Contoh penggunaan JS framework yang mudah dan singkat dengan penggunaan

JQuery dengan sintaks $(selector).load(url,data,function(response,status,xhr))

adalah sebagai berikut :

<!DOCTYPE html>

<html>

<head>

<script src="../js/jquery.min.js"></script>

<script>

function load(){

var link = $("#find").val();

$("#targetDiv").load(link+".html", function(response, status, xhr) {

if (status == "error") {

var msg = "Sorry but your link there was an error: ";

$("#targetDiv").html(msg + xhr.status + " " + xhr.statusText);

}

});

};

</script>

</head>

<body>

<input type="text" id="find"/>

<input type="button" id="clickMy" onclick="load()" value="load"/>

<div id="targetDiv"></div>

BAB III

TUGAS PENDAHULUAN

3.1 Pertanyaan

1. Sebutkan perbedaan utama antara Javascript dengan HTML dan CSS?

2. Jelaskan apa yang dimaksud dengan property, event dan methode pada

javascipt dan berikan contohnya

3. Apa yang dimaksud Ashyncronous pada teknologi Ajax ?

3.2 Jawab

1. Javascript adalah bahasa scripting yang paling populer di internet dan

bekerja pada banyak browser seperti Internet Explorer, Mozilla, Firefox,

Netscape, Opera. JavaScript digunakan pada Web pages untuk

meningkatkan design, validate forms, detect browsers, create cookies,

GUI dsb.

HTML yaitu bahasa pemrograman standar yang digunakan untuk

membuat sebuah halaman web, yang kemudian dapat diakses untuk

menampilkan berbagai informasi di dalam sebuah Browser .

CSS adalah suatu bahasa stylesheet yang digunakan untuk mengatur

tampilan suatu dokumen yang ditulis dalam bahasa markup (HTML).

CSS bukan Bahasa Pemrograman.

2. Property : atribut/variable dari sebuah objek.

Contoh :

var siswa = new Object;

//Pendeklarasian Properti

siswa.namaDepan = "Tata";

siswa.namaBelakang = "Rizky";

Event : sebuah kejadian saat webpage menerima sebuak aksi yang akan

mengaktifkan suatu fungsi.

Contoh : onClick=”Document.Write(‘Selamat Datang’)”

Methode : suatu kumpulan script kode (fungsi) yang digunakan untuk

melakukan sesuatu tindakan terhadap objek.

Contoh :

// Pendeklarasi Metode

siswa.tampilkanNamaLengkap = function () {

return siswa.namaDepan + " " + siswa.namaBelakang;

};

3. Ashyncronous : permintaan data tambahan dari server dan loadingnya

dilakukan di background tanpa mempengaruhi tampilan dan sifat

halaman web sekarang, jadi tanpa me-refresh halaman web.

BAB IV

IMPLEMENTASI

4.1 Pertanyaan

1. Dari form yang anda buat pada modul 2, buatlah perubahan link

menggunakan Ajax sebagaimana ditunjukkan pada Gambar 3.2

4.2 Jawab

1. Source code :

<html>

<head>

<style>

#menuku li{

float: left;

}

#menuku ul ul {

float: left;

}

#menuku ul ul {

visiblility:hidden;

width:149px;

}

#menuku ul li:hover ul, #menuku ul a:hover ul{

visibility:visible;

}

#menuku li a {

background-clor:#000000;

height: 2em;

width: 149px;

display: block;

border: 0.lem solid #dcdce9;

color: #fffffff;

text-decoration:none;

text-align: center;

}

</style>

</head>

<body>

<div id="menuku">

<ul>

<li><a href="URL 1">My Campus</a>

<ul>

<li><a href="URL sub 1">Rektorat</a></li>

<li><a href="URL sub 2">Cakra</a></li>

<li><a href="URL sub 3">Laboratorium</a></li>

</ul>

</li>

</ul>

</div>

</body>

</html>

BAB V

PENUTUP

5.1 Kesimpulan

Dengan adanya praktikum Pemrograman Web ini bisa membantu

mahasiswa dalam memahami materi perkuliahan yang diberikan dosen di

kelas. Selain itu juga, praktikum memberikan nilai tambahan bagi

mahasiswa yang kurang dapat memahami bagian teori. Karena

Pemrograman Web merupakan perkuliahan yang lebih mudah dipahami jika

langsung praktek daripada hanya penjelasan secara teori.

5.2 Saran

Pada praktikum kali ini saya rasa sudah cukup baik.Namun,ada beberapa hal

yang perlu diperhatikan,diantaranya yaitu cara menjelaskan atau

penyampaian materinya masih terlalu cepat.Dan penjelasan dari pemateri

(asdos) kurang terperinci.

lapres pemweb mod 2 2014

Documents