Scribd
Upload
120 views

Praktikum Pemrograman Web Modul 4: Javascript

This document provides code for a JavaScript puzzle game and instructions on how to create and display it in a web browser. It includes the HTML, CSS, and JavaScript code to generate a 4x4 grid with numbered boxes that can be rearranged by arrow keys. It also includes JavaScript functions to check if the boxes are in the correct order and display an alert if the puzzle is solved. Additional code examples are provided to demonstrate creating HTML elements and attributes with JavaScript, and displaying browser information using the navigator object.

Uploaded by

Rozygynaga Xavierra Lummina
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
120 views

Praktikum Pemrograman Web Modul 4: Javascript

This document provides code for a JavaScript puzzle game and instructions on how to create and display it in a web browser. It includes the HTML, CSS, and JavaScript code to generate a 4x4 grid with numbered boxes that can be rearranged by arrow keys. It also includes JavaScript functions to check if the boxes are in the correct order and display an alert if the puzzle is solved. Additional code examples are provided to demonstrate creating HTML elements and attributes with JavaScript, and displaying browser information using the navigator object.

Uploaded by

Rozygynaga Xavierra Lummina
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

1

Praktikum Pemrograman Web


Modul 4

JavaScript


1. a. Buatlah sebagai berikut :
dokumen xHTML (prakt4sub1.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
xml:lang="en">
<head><title>Box Puzzle</title>
<head>
<script language = "javascript" type="text/javascript">
<!--
var blank_pos = 16, count = 0, pos = new Array(), nam =
new Array();
pos[1] = 7;
pos[2] = 10;
pos[3] = 14;
pos[4] = 9;
pos[5] = 12;
pos[6] = 2;
pos[7] = 13;
pos[8] = 1;
pos[9] = 8;
pos[10] = 5;
pos[11] = 4;
pos[12] = 6;
pos[13] = 3;
pos[14] = 11;
pos[15] = 15;
function start() {
nam[1] = L1.style;
nam[2] = L2.style;
nam[3] = L3.style;
nam[4] = L4.style;
nam[5] = L5.style;
nam[6] = L6.style;
nam[7] = L7.style;
nam[8] = L8.style;
nam[9] = L9.style;
nam[10] = L10.style;
nam[11] = L11.style;
nam[12] = L12.style;
nam[13] = L13.style;
nam[14] = L14.style;
nam[15] = L15.style;
document.onkeydown = keyDown;
}
function keyDown() {
var ieKey = event.keyCode;
if (ieKey == 38) {
if (blank_pos < 13) {
count=blank_pos + 4;
X = fun(count);
Z = (parseInt(nam[X].top));
nam[X].top = Z - 52;
Q = pos[X];
pos[X] = blank_pos;
blank_pos = Q;
}
}
else if (ieKey == 40) {
if (blank_pos > 4) {
count = blank_pos - 4;
X = fun(count);
Z = (parseInt(nam[X].top));
nam[X].top = Z + 52;
Q = pos[X];
pos[X] = blank_pos;
blank_pos = Q;
}
}
else if (ieKey == 37) {
r = blank_pos % 4
if (r == 0) {
}
else {
count = blank_pos + 1;
X = fun(count);
Z = (parseInt(nam[X].left));
nam[X].left = Z - 52;
Q = pos[X];
pos[X] = blank_pos;
blank_pos = Q;
}
}
else if (ieKey == 39) {
ch = blank_pos + 3;
r = ch % 4;
if (r == 0) {
}
else {
count = blank_pos - 1;
X = fun(count);
Z = (parseInt(nam[X].left));
nam[X].left = Z + 52;
Q = pos[X];
pos[X] = blank_pos;
blank_pos = Q;
}
}
else {
alert("Gunakan tombol yang tepat");
}
A = false;
b = 0;
for (i = 1; i < 16; i++) {
b++;
if (pos[i] == b) {
A = true;
}
else {
A = false;
break;
}
}
if (A)alert("Selamat Anda Telah Menyelesaikan
Puzzle ini!");
}
function fun(count) {
for (var i = 1; i < 16; i++) {
if (pos[i] == count) {
var X = i;
}
}
return X;
}
-->
</script>

</head>


2
<body onLoad="start()">
<div id="L8" style="position:absolute; left:202px; top:302px; width:50px; height:50px; background-
color:green;">
<br /><b><center>8</center>
</div>
<div id="L6" style="position:absolute; left:254px;top:302px; width:50px; height:50px; background-
color:green;">
<br><b><center>6</center>
</div>
<div id="L13" style="position:absolute; left:306px;top:302px; width:50px; height:50px; background-
color:green;">
<br><b><center>13</center>
</div>
<div id="L11" style="position:absolute; left:358px;top:302px; width:50px; height:50px; background-
color:green;">
<br><b><center>11</center>
</div>
<div id="L10" style="position:absolute; left:202px; top:354px; width:50px; height:50px; background-
color:green;">
<br><b><center>10</center>
</div>
<div id="L12" style="position:absolute; left:254px;top:354px; width:50px; height:50px; background-
color:green;">
<br><b><center>12</center>
</div>
<div id="L1" style="position:absolute; left:306px;top:354px; width:50px; height:50px; background-
color:green;">
<br><b><center>1</center>
</div>
<div id="L9" style="position:absolute; left:358px;top:354px; width:50px; height:50px; background-
color:green;">
<br><b><center>9</center>
</div>
<div id="L4" style="position:absolute; left:202px; top:406px; width:50px; height:50px; background-
color:green;">
<br><b><center>4</center>
</div>
<div id="L2" style="position:absolute; left:254px;top:406px; width:50px; height:50px; background-
color:green;">
<br><b><center>2</center>
</div>
<div id="L14" style="position:absolute; left:306px;top:406px; width:50px; height:50px; background-
color:green;">
<br><b><center>14</center>
</div>
<div id="L5" style="position:absolute; left:358px;top:406px; width:50px; height:50px; background-
color:green;">
<br><b><center>5</center>
</div>
<div id="L7" style="position:absolute; left:202px; top:458px; width:50px; height:50px; background-
color:green;">
<br><b><center>7</center>
</div>
<div id="L3" style="position:absolute; left:254px;top:458px; width:50px; height:50px; background-
color:green;">
<br><b><center>3</center>
</div>
<div id="L15" style="position:absolute; left:306px;top:458px; width:50px; height:50px; background-
color:green;">
<br><b><center>15</center>
</div>
</body>
</html>
b. Tampilkan dokumen xHTML tersebut mempergunakan web browser dan selesaikan puzzle tersebut .
c. Buatlah flowchart dari script javascript tersebut .


3



2. a. Buatlah :
dokumen xHTML (prakt4sub2.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en" xml:lang="en">
<head><title>Obyek</title>
<script language = "javascript"
type="text/javascript">
<!--
function obyekblok(nama,tipe,atributlain) {
this.nama = nama;
this.tipe = tipe;
this.atributlain=atributlain;
this.hasil=obyekblok_hasil;
this.tutup=obyekblok_tutup;
}

function obyekblok_hasil(){
var hasil = '<' + this.tipe + ' ' +
'name=' + '"' + this.nama + '"' +
this.atributlain;
return (hasil);
}

function obyekblok_tutup(){
var tagtutup = '</' + this.tipe + '>';
return (tagtutup);
}


function inputform(nama,tipe,nilai,atributlain){
this.nama=nama;
this.tipe=tipe;
this.nilai=nilai;
this.atributlain=atributlain;
this.hasil=button_hasil;
}
function button_hasil(){
var hasil='<input type="' + this.tipe +'" ' +
'name="' + this.nama +'" ' +
'value="' + this.nilai + '" ' +
this.atributlain;
return (hasil);
}


function printHasil()
{
var dataform = new obyekblok (
'frmkirim','form','action="http://www.eps1905.co.nr/pmrgweb/program/form.php"
method="post" />');
var databutton = new inputform('button1','submit','Kirim',' />');
var datatextarea = new obyekblok('txtarea_komentar','textarea','rows="20" cols="50" />');
document.write(dataform.hasil());
document.write(datatextarea.hasil());
document.write(datatextarea.tutup());
document.write("<br />");
document.write(databutton.hasil());
document.write(dataform.tutup());
}
-->
</script>
</head>
<body>
<input type="button" name="btn_proses" value="Membuat form,button dan text area"
onclick="printHasil()">
</body>
</html>
b. Tampilkan dokumen xHTML tersebut mempergunakan web browser.
c. Sebutkan obyek javascript yang terdapat pada dokumen tersebut dan jelaskan !

3. a. Buatlah dokumen xHTML sebagai berikut :

<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en" xml:lang="en">
<body>
<script language = "javascript"
type="text/javascript">
<!--
document.write("Browser CodeName: " +
navigator.appCodeName);
document.write("<br /><br />");
document.write("Browser Name: " +
navigator.appName);
document.write("<br /><br />");
document.write("Browser Version: " +
navigator.appVersion);
4
document.write("<br /><br />");
document.write("Cookies Enabled: " +
navigator.cookieEnabled);
document.write("<br /><br />");
document.write("Platform: " +
navigator.platform);
document.write("<br /><br />");
document.write("User-agent header: " +
navigator.userAgent);
-->
</script>
</body>
</html>
b. Tampilkan dokumen xHTML tersebut mempergunakan web browser.

4. a. Buatlah dokumen xHTML sebagai berikut :

<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en" xml:lang="en">
<head>
<title> Editor HTML untuk Internet
Explorer</title>
<script language="JavaScript">
var Modustampilan = 1; // WYSIWYG

function Init()
{
iframe1.document.designMode = 'On';
}

function selOn(ctrl)
{
ctrl.style.borderColor = '#000000';
ctrl.style.backgroundColor =
'#B5BED6';
ctrl.style.cursor = 'hand';
}

function selOff(ctrl)
{
ctrl.style.borderColor = '#D6D3CE';
ctrl.style.backgroundColor =
'#D6D3CE';
}

function selDown(ctrl)
{
ctrl.style.backgroundColor = '#8492B5';
}

function selUp(ctrl)
{
ctrl.style.backgroundColor = '#B5BED6';
}

function doBold()
{
iframe1.document.execCommand('bold'
, false, null);
}

function doItalic()
{
iframe1.document.execCommand('italic
', false, null);
}

function doUnderline()
{
iframe1.document.execCommand('unde
rline', false, null);
}

function doLeft()
{
iframe1.document.execCommand('justifyleft',
false, null);
}

function doCenter()
{

iframe1.document.execCommand('justifycenter',
false, null);
}

function doRight()
{

iframe1.document.execCommand('justifyright',
false, null);
}

function doOrdList()
{

iframe1.document.execCommand('insertorderedl
ist', false, null);
}

function doBulList()
{

iframe1.document.execCommand('insertunorder
edlist', false, null);
}

function doForeCol()
{
var fCol = prompt('Masukkan kode warna
text:', '');

if(fCol != null)
iframe1.document.execCommand('forecolor',
false, fCol);
}

function doBackCol()
{
var bCol = prompt('Masukkan kode warna
latarbelakang :', '');

if(bCol != null)
5

iframe1.document.execCommand('backcolor',
false, bCol);
}

function doLink()
{
iframe1.document.execCommand('createlink');
}

function doImage()
{
var imgSrc = prompt('Url gambar :', '');

if(imgSrc != null)

iframe1.document.execCommand('insertimage',
false, imgSrc);
}

function doRule()
{

iframe1.document.execCommand('inserthorizont
alrule', false, null);
}

function doFont(fName)
{
if(fName != '')
iframe1.document.execCommand('fontname',
false, fName);
}

function doSize(fSize)
{
if(fSize != '')
iframe1.document.execCommand('fontsize',
false, fSize);
}

function doHead(hType)
{
if(hType != '')
{

iframe1.document.execCommand('formatblock',
false, hType);

doFont(selFont.options[selFont.selectedIndex].v
alue);
}
}

function doToggleView()
{
if(Modustampilan == 1)
{
iHTML =
iframe1.document.body.innerHTML;
iframe1.document.body.innerText = iHTML;

// Sembunyikan seluruh kontrol
tblCtrls.style.display = 'none';
selFont.style.display = 'none';
selSize.style.display = 'none';
selHeading.style.display = 'none';
iframe1.focus();

Modustampilan = 2; // tampilan kode html
}
else
{
iText = iframe1.document.body.innerText;
iframe1.document.body.innerHTML = iText;

// Tampilkan seluruh kontrol
tblCtrls.style.display = 'inline';
selFont.style.display = 'inline';
selSize.style.display = 'inline';
selHeading.style.display = 'inline';
iframe1.focus();

Modustampilan = 1; // WYSIWYG
}
}

</script>
<style>

.tombol
{
border: 1px solid;
border-color: #D6D3CE;
}

.tdClass
{
padding-left: 3px;
padding-top:3px;
}

</style>

<body onLoad="Init()">
<table id="tblCtrls" width="415px" height="30px" border="0" cellspacing="0" cellpadding="0"
bgcolor="#D6D3CE">
<tr>
<td class="tdClass">
<img alt="Bold" class="tombol" src="bold.gif" onMouseOver="selOn(this)"
onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)"
onClick="doBold()">
<img alt="Italic" class="tombol" src="italic.gif" onMouseOver="selOn(this)"
onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)"
onClick="doItalic()">
<img alt="Underline" class="tombol" src="underline.gif"
onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)"
onMouseUp="selUp(this)" onClick="doUnderline()">
6

<img alt="Left" class="tombol" src="left.gif" onMouseOver="selOn(this)"
onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)"
onClick="doLeft()">
<img alt="Center" class="tombol" src="center.gif" onMouseOver="selOn(this)"
onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)"
onClick="doCenter()">
<img alt="Right" class="tombol" src="right.gif" onMouseOver="selOn(this)"
onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)"
onClick="doRight()">

<img alt="Ordered List" class="tombol" src="ordlist.gif"
onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)"
onMouseUp="selUp(this)" onClick="doOrdList()">
<img alt="Bulleted List" class="tombol" src="bullist.gif"
onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)"
onMouseUp="selUp(this)" onClick="doBulList()">

<img alt="Text Color" class="tombol" src="forecol.gif"
onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)"
onMouseUp="selUp(this)" onClick="doForeCol()">
<img alt="Background Color" class="tombol" src="bgcol.gif"
onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)"
onMouseUp="selUp(this)" onClick="doBackCol()">

<img alt="Hyperlink" class="tombol" src="link.gif"
onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)"
onMouseUp="selUp(this)" onClick="doLink()">
<img alt="Image" class="tombol" src="image.gif" onMouseOver="selOn(this)"
onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)"
onClick="doImage()">
<img alt="Horizontal Rule" class="tombol" src="rule.gif"
onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)"
onMouseUp="selUp(this)" onClick="doRule()">

</td>
</tr>
</table>
<table width="415px">
<tr>
<td><iframe id="iframe1" style="width: 415px; height:205px"></iframe>
</td>
</tr>
</table>
<table width="415px" height="30px" border="0" cellspacing="0" cellpadding="0"
bgcolor="#D6D3CE">
<tr>
<td class="tdClass" colspan="1" width="80%">
<select name="selFont" onChange="doFont(this.options[this.selectedIndex].value)">
<option value="">-- Font --</option>
<option value="Arial">Arial</option>
<option value="Courier">Courier</option>
<option value="Sans Serif">Sans Serif</option>
<option value="Tahoma">Tahoma</option>
<option value="Verdana">Verdana</option>
<option value="Wingdings">Wingdings</option>
</select>
<select name="selSize" onChange="doSize(this.options[this.selectedIndex].value)">
<option value="">-- Size --</option>
<option value="1">Very Small</option>
<option value="2">Small</option>
<option value="3">Medium</option>
<option value="4">Large</option>
<option value="5">Larger</option>
<option value="6">Very Large</option>
</select>
7
<select name="selHeading"
onChange="doHead(this.options[this.selectedIndex].value)">
<option value="">-- Heading --</option>
<option value="Heading 1">H1</option>
<option value="Heading 2">H2</option>
<option value="Heading 3">H3</option>
<option value="Heading 4">H4</option>
<option value="Heading 5">H5</option>
<option value="Heading 6">H6</option>
</select>
</td>
<td class="tdClass" colspan="1" width="20%" align="right">
<img alt="Jenis Tampilan" class="tombol" src="mode.gif" onMouseOver="selOn(this)"
onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)"
onClick="doToggleView()">
</td>
</tr>
</table>
</body>
</html>

b. Tampilkan hasil dengan Browser Internet Explorer
c. Jelaskan kegunaan masing-masing dari fungsi yang ada dalam javascript pada script diatas

5. Pergunakan javascript untuk menyederhanakan bagian body dari dokumen pada no 1 dengan perulangan.

You might also like