lapres pemweb mod 2 2014
Post on 26-Feb-2023
1 Views
Preview:
TRANSCRIPT
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.
<script type="text/javascript">
var myNumber = 10;
var myText = ‘hello java scripter’;
var test = true;
</script>
Abstrak, tipe data abstrak seperti array, map.
<script type="text/javascript">
<!—
// 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.
<script type="text/javascript">
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.
<script type="text/javascript">
var n = 1;
while( n <= 5 ){
document.write(n);
n++;
}
for (i=1; i<=n; i++){
document.write(i);
}
</script>
d. Function dan objek
<script type="text/javascript">
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.
top related