Assalamu'alaikum.. wr.. wb..
Pada kesempatan kali ini, saya akan
membahas mengenai materi perkuliahan pertemuan ketiga di tanggal 23 Februari
2015 Mata Kuliah Web 2.0 Technology. Pada pertemuan ini, kami membahas mengenai “Pengenalan Javascript” dan “Control
pada Javascript”..
Sebelum masuk ke topik pembahasan, saya
ingin memaparkan sedikit alasan saya kenapa saya membahas materi perkuliahan pertemuan
ketiga tanpa adanya pembahasan mengenai materi perkuliahan pertemuan kedua di pembahasan sebelumnya. Pada saat perkuliahan pertemuan kedua di tanggal 16
Februari 2015 saya tidak masuk dikarenakan saya izin menghadiri kakak saya yang
akan melaksanakan wisuda di Kediri. Maka dari itu, saya tidak membahas mengenai materi perkuliahan di pertemuan kedua tersebut. (abaikan jika tidak
masuk topik) :D
Nah, daripada banyak basa-basi.. yuk
langsung aja kita masuk ke topik pembahasan menganai apa sih Javascript itu ?
JavaScript adalah bahasa pemograman web yang
bersifat Client Side Programming
Language. Client Side Programming Language adalah tipe bahasa
pemograman yang pemrosesannya dilakukan oleh client. Aplikasi client yang
dimaksud merujuk kepada web browser seperti Google Chrome dan Mozilla Firefox.
Jenis bahasa pemograman Client Side berbeda dengan bahasa pemograman Server Side seperti
PHP, dimana untuk server side seluruh
kode program dijalankan di sisi server. Untuk
menjalankan JavaScript, kita hanya membutuhkan
aplikasi text editor, dan web browser. JavaScript memiliki fitur : high-level programming language, client-side, loosely tiped,
dan berorientasi objek.
Itulah ulasan singkat mengenai Javascript.. selanjutnya, yuk kita lihat beberapa syntax sederhana mengenai Javascript yang diberi oleh dosen saya :D
Menambahkan Kode
Javascript pada HTML
<html>
<head>
<meta charset =
"utf-8">
<title>A First
Program in JavaScript</title>
<script type =
"text/javascript">
document.writeln ("<h1>Welcome
to JavaScript Programming!");
</script>
</head>
<body>
</body>
</html><body>
</body>
Output :
Menambahkan Kode
Javascript pada HTML
<html>
<head>
<meta charset =
"utf-8">
<title>Printing a
Line with Multiple Statements </title>
<script type =
"text/javascript">
<!--
document.writeln("<h1
style = 'color: magenta'>");
document.writeln("Welcome
to JavaScript " + "Programming!</h1>");
//-->
</script>
</head>
<body>
</body>
<body>
</body>
</html>
Output :
Menampilkan Alert Dialog
<html>
<head>
<meta charset =
"utf-8">
<title>Printing
Multiple Lines in a Dialog Box </title>
<script type =
"text/javascript">
<!--
window.alert("Welcome
to\nJavaScript\nProgramming!");
//-->
</script>
</head>
<body><p>
Click Refresh (or Reload) to run this script again.</p>
</body>
</html>
Output :
Menampilkan Prompt Box
<html>
<head>
<meta charset =
"utf-8">
<title>Using
Prompt and Alert Boxes </title>
<script type =
"text/javascript">
<!--
var name;
name=
window.prompt("Please enter your name");
document.writeln("<h1>Hello
" +name+ ", welcome to JavaScript programming!</h1>");
//-->
</script>
</head>
<body></body>
</html>
Output :
Penambahan Sederhana
<html>
<head>
<meta charset =
"utf-8">
<title>An Additiom
program</title>
<script type =
"text/javascript">
<!--
var firstnumber;
var secondnumber;
var number1;
var number2;
var sum;
firstnumber =
window.prompt("Enter first integer");
secondnumber =
window.prompt("Enter second integer");
number1 = parseInt
(firstnumber);
number2 = parseInt
(secondnumber);
sum = number1 + number2
;
document.writeln("<h1>
The sum is " +sum+ "</h1>");
//-->
</script>
</head>
<body></body>
</html>
Output :
Pengunaan Operator
<html>
<head>
<meta charset =
"utf-8">
<title>Using
Relational Operators</title>
<script type =
"text/javascript">
<!--
var name;
var now = new Date();
var hour =
now.getHours();
name = window.prompt("Please
enter your name");
if (hour < 12)
document.write("<h1>Good
Morning, ");
if (hour >= 12)
{
hour = hour-12;
if(hour < 6)
document.write("<h1>Good
Afternoon, ");
if(hour >= 6)
document.write("<h1>Good
Evening, ");
} // end if
document.writeln(name +
", welcome to
JavaScript programming!</h1>");
//-->
</script>
</head>
<body></body>
</html>
Output :
Pengulangan Sederhana
<html>
<head>
<meta charset =
"utf-8">
<title>Class
Average Program</title>
<script type =
"text/javascript">
<!--
var total;
var gradecounter;
var grade;
var gradevalue;
var average;
total = 0;
gradecounter = 1;
while(gradecounter
<=10)
{
grade =
window.prompt("Enter integer grade:","0");
gradevalue =
parseInt(grade);
total = total +
gradevalue;
gradecounter =
gradecounter +1;
}
average = total/10;
document.writeln("<h1>Class
Average is " +average+ "</h1>");
//-->
</script>
</head>
<body></body>
</html>
Output :
inputan : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
Pengulangan Sederhana
Bagian 2
<html>
<head>
<meta charset =
"utf-8">
<title>Class
Average Program : Sentinel-controlled Repetition</title>
<script type =
"text/javascript">
<!--
var total;
var gradecounter;
var grade;
var gradevalue;
var average;
total = 0;
gradecounter = 0;
grade =
window.prompt("Enter integer grade, -1 to quit:","0");
gradevalue =
parseInt(grade);
while(gradevalue !=-1)
{
total = total +
gradevalue;
gradecounter =
gradecounter +1;
grade = window.prompt("Enter
integer grade, -1 to quit:","0");
gradevalue =
parseInt(grade);
}
if(gradecounter != 0)
{
average =
total/gradecounter;
document.writeln("<h1>Class
Average is " +average+ "</h1>");
} else
document.writeln("<p>No
grades were entered </p>");
//-->
</script>
</head>
<body></body>
</html>
Output :
inputan : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, -1
Pengulangan Bersarang
<html>
<head>
<meta charset =
"utf-8">
<title>Class
Average Program : Sentinel-controlled Repetition</title>
<script type =
"text/javascript">
<!--
var passes=0;
var failures=0;
var student=1;
var result;
while(student <=10)
{
result =
window.prompt("Enter result (1=pass, 2=fail)","0");
if(result=="1")
passes = passes +1;
else
failures = failures +1;
student = student +1;
}
document.writeln("<h1>Examination
Results </h1>");
document.writeln("<p>Passed
:" +passes+ "; Failed:" +failures+"</p>");
//-->
</script>
</head>
<body></body>
</html>
Output :
inputan : 1, 1, 1, 1, 1, 2, 2, 2, 2, 2
Increment dan Decrement
<html>
<head>
<meta charset =
"utf-8">
<title>Preincrementing
and Postincrementing </title>
<script type =
"text/javascript">
<!--
var c;
c = 5;
document.writeln("<h3>
Postincrementing</h3>");
document.writeln("<p>"
+ c);
document.writeln("
" + c++);
document.writeln("
" + c+ "</p>");
c = 5;
document.writeln("<h3>
Preincrementing</h3>");
document.writeln("<p>"
+c);
document.writeln("
" + ++c);
document.writeln("
" + c + "</p>");
//-->
</script>
</head>
<body></body>
</html>
Output :
Nah, setelah kami mengenal beberapa syntax sederhana tersebut.. kami diberi latihan oleh Dosen Pengampu
mata kuliah tersebut..
Berikut sedikit hasil latihan sederhana yang saya buat..
<html>
<head>
<meta charset =
"utf-8">
<title>Simple
Quis</title>
<script type =
"text/javascript">
<!--
var pertama;
var kedua ;
var ketiga ;
var ans = 0;
pertama =
window.prompt("Ada berapa lantai politeknik tedc bandung ?");
if(pertama ==
"4")
{
window.alert("Jawaban
Anda BENAR !");
ans = ans +1;
} else
window.alert("Jawaban
Anda SALAH !");
kedua =
window.prompt("Ada berapa lab untuk jurusan informatka di politeknik tedc
bandung ?");
if(kedua ==
"4")
{
window.alert("Jawaban
Anda BENAR !");
ans = ans + 1;
} else
window.alert("Jawaban
Anda SALAH !");
ketiga =
window.prompt("Ada berapa jurusan di politeknik tedc bandung ?");
if(ketiga ==
"10")
{
window.alert("Jawaban
Anda BENAR !");
ans = ans + 1;
} else
window.alert("Jawaban
Anda SALAH !");
document.writeln("<h1>
Anda menjawab " +ans+ " dari 3 pertanyaan</h1>");
//-->
</script>
</head>
<body></body>
</html>
Output :
Saya rasa cukup sekian pembahasan saya mengenai Javascript secara sederhana.. semoga bisa bermanfaat dan nantikan pembahasan saya di kesempatan lainnya..
Wassalamu'alaikum.. wr.. wb..
Referensi : http://www.duniailkom.com/tutorial-belajar-javascript-pengertian-dan-fungsi-javascript-dalam-pemograman-web/
[Kamis – 17.25]