Kamis, 26 Februari 2015

JS (Javascript)

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>

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>
</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..




0 komentar:

Posting Komentar