Web Development
Alvian Bastian, [Link]., [Link].
Javascript
• JavaScript (/ˈdʒɑːvəˌskrɪpt/) adalah bahasa pemrograman tingkat tinggi dan
dinamis. JavaScript populer di internet dan dapat bekerja di sebagian besar
penjelajah web populer seperti Google Chrome, Internet Explorer (IE), Mozilla
Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web
menggunakan tag SCRIPT. JavaScript merupakan salah satu teknologi inti World
Wide Web selain HTML dan CSS. JavaScript membantu membuat halaman web
interaktif dan merupakan bagian aplikasi web yang esensial.
• Awalnya hanya diimplementasi sebagai client-side dalam penjelajah web, kini
engine JavaScript disisipkan ke dalam perangkat lunak lain seperti dalam server-
side dalam server web dan basis data, dalam program non web seperti perangkat
lunak pengolah kata dan pembaca PDF, dan sebagai runtime environment yang
memungkinkan penggunaan JavaScript untuk membuat aplikasi desktop maupun
mobile.
([Link]
Javascript
Buat folder Javascript di htdocs
Javascript
Buat file [Link] pada Brackets dan tambahkan kode berikut:
Javascript
Jalankan di browser
Javascript
Buat folder js pada Brackets (dalam folder Javascript), kemudian buat file [Link] di dalamnya, dan
tambahkan kode berikut:
Javascript
Kembali ke file [Link] dan ubah code-nya seperti berikut:
Javascript
Kembali ke file [Link] dan ubah code-nya seperti berikut:
[Link]("Welcome to Javascript!");
Buttons
Buat file [Link] dan masukkan kode berikut:
Buttons
Jalankan di browser
Change HTML content
Buat file [Link] dan copy file dari div&span (pembahasan CSS):
Change HTML content
Rubah file [Link]:
…
<body>
<div class="bluebox" id="facebook">
<p>Facebook is <span class="great">great</span>.</p>
</div>
<div class="yellowbox" id="apple">
<p>Apple.</p>
</div>
<div class="greenbox">
<p>Microsoft.</p>
</div>
<button id="button1">Change Facebook content.</button>
<button id="button2">Change Apple content.</button>
<script>[Link]("button1").onclick=function(){
[Link]("facebook").innerHTML= "<p>Facebook.</p>";
}
[Link]("button2").ondblclick=function(){
[Link]("apple").innerHTML= "<ul><li>Audi</li><li>BMW</li><li>Mercedez</li></ul>";
}
</script>
</body>
…
Change HTML content
Jalankan di browser
Change HTML Style
Buat file [Link] dan copy file dari [Link]:
Change HTML Style
Rubah file [Link] dengan code di bawah ini:
…
</div>
<button id="button1">Change Facebook style.</button>
<button id="button2">Change Apple style.</button>
<script>[Link]("button1").onclick=function(){
[Link]("facebook").[Link] = '200px';
[Link]("facebook").[Link] = 'rgba( 26, 203, 135, 0.922 )';
}
[Link]("button2").onclick=function(){
[Link]("apple").[Link] = 'monospace';
[Link]("apple").[Link] = '3em';
}
</script>
…
Variables and Data Types
Buat file [Link] dan copy file dari [Link]:
Change HTML Using Variables
Buat file [Link] dan copy code dari [Link].
Change HTML Using Variables
Rubah code pada file [Link] sesuai dengan code berikut.
…
<button id="button1">Change Facebook style.</button>
<button id="button2">Change Apple style.</button>
<script>
var color = 'rgb(18, 149, 68)';
[Link]("button1").onclick = function(){
[Link]("facebook").[Link] = color;
}
var x, y, z;
[Link]("button2").onclick = function(){
x = [Link]([Link]()*256);
y = [Link]([Link]()*256);
z = [Link]([Link]()*256);
appleColor = 'rgb(' + x + ', ' + y + ', ' + z + ')';
[Link]("apple").[Link] = appleColor;
[Link]("apple").innerHTML = appleColor;
}
</script>
</body>
…
Change HTML Using Variables
Jalankan di browser
Functions Activity Swap the content of two divs
Buat file dengan nama [Link] dan copy code dari [Link].
Functions Activity Swap the content of two divs
Rubah code dari [Link].
…
<body>
<div class="bluebox" id="facebook">
<p>Facebook is <span class="great">great</span>.</p>
</div>
<div class="yellowbox" id="apple">
<p>Apple.</p>
</div>
<div class="greenbox" id="microsoft">
<p>Microsoft.</p>
</div>
<button id="button1" onclick="swap('facebook','apple')">Swap content of facebook and apple.</button>
<button id="button2" onclick="swap('apple','microsoft')">Swap content of apple and microsoft.</button>
<script>
function greeting1(){
[Link]('Hello!');
}
…
Functions Activity Swap the content of two divs
Lanjutan…
….
//greeting1
function greeting2(firstname){
[Link]('Hello ' + firstname + '!');
}
//greeting2('Mike');
function sum(a,b){
return a+b;
}
var x = sum(3,7);
//[Link](x);
function swap(id1,id2){
var y =[Link](id1).innerHTML;
var z =[Link](id2).innerHTML;
[Link](id2).innerHTML = y;
[Link](id1).innerHTML = z;
}
</script>
</body>
…
Functions Activity Swap the content of two divs
Jalankan di browser
Objects
Buat file dengan nama [Link] dan copy code dari [Link]. Kemudian rubah isi code
pada [Link] seperti code di bawah:
<!DOCTYPE html> …
<html> [Link](myPhone);
<head> delete [Link];
<meta charset="utf-8"> [Link](myPhone);
<title>objects</title> [Link]([Link]);
</head> var myOtherPhone = myPhone;
<body> [Link](myOtherPhone);
<p>Javascript</p> [Link] = "Iphone 5";
<script> [Link](myOtherPhone);
var myPhone = { [Link](myPhone);
make : "Apple", </script>
model : "Iphone 4", </body>
warranty : 12,
color : "white" </html>
};
….
Objects
Jalankan di console browser:
Create Objects using the new keyword
Buat file dengan nama [Link] dan copy code dari [Link]. Kemudian rubah isi code
pada [Link] seperti code di bawah:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>objects using new</title>
</head>
<body>
<p>Javascript</p>
<script>
var myPhone = new Object();
[Link] = "Samsung";
[Link] = "Galaxy S4";
[Link] = 12;
[Link] = "black";
[Link](myPhone);
[Link] = 0;
[Link](myPhone);
</script>
</body>
</html>
Create Objects using the new keyword
Jalankan di console browser:
Object Constructors
Buat file dengan nama [Link] dan copy code dari [Link]. Kemudian
rubah isi code pada [Link] seperti code di bawah:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>object constructors</title>
</head>
<body>
<p>Javascript</p>
<script>
function phone(make, model, warranty, color){
[Link] = make;
[Link] = model;
[Link] = warranty;
[Link] = color;
[Link] = function (x) {
[Link] += x;
}
}
Lanjutan code di sebelah…
….
Object Constructors
Lanjutan…
…
var myPhone = new phone("Apple", "Iphone 5", 12, "white");
[Link](myPhone);
[Link](12);
[Link]([Link]);
[Link] = "like new";
[Link](myPhone);
[Link]([Link]);
var myBrothersPhone = new phone("Apple", "Iphone 4", 6, "black");
[Link](myBrothersPhone);
[Link]([Link]);
[Link] = "new";
[Link]([Link]);
[Link]([Link]);
</script>
</body>
</html>
Object Constructors
Jalankan di console browser:
Arrays
Buat file dengan nama [Link] dan ketikkan code berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>arrays</title>
</head>
<body>
<p id="myParagraph">Javascript.</p>
<script>
</script>
</body>
</html>
Arrays
Edit code pada file [Link] dengan code berikut:
…
<script>
var shoppingList = ["bread", "eggs", "milk"];
showResult(shoppingList);
showResult(shoppingList[0]);
showResult(shoppingList[2]);
function showResult(x){
[Link]("myParagraph").innerHTML += "<br />" + x;
}
shoppingList[1] = "yogurt";
showResult(shoppingList);
shoppingList[2] = "orange";
showResult(shoppingList);
delete shoppingList[1];
….
Arrays
Lanjutan…
…
showResult(shoppingList);
shoppingList[1] = "yogurt";
showResult(shoppingList);
[Link](1,1);
showResult(shoppingList);
[Link](1,0,"banana", "apple");
showResult(shoppingList);
[Link]();
showResult(shoppingList);
[Link]();
showResult(shoppingList);
var myString = 'what is weather like?';
var mayArray = [Link](' ',2);
showResult(mayArray);
</script>
…
Arrays
Tampilkan di browser:
If and Switch Statements
Buat file [Link] dan masukkan code berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>if and switch</title>
</head>
<body>
<script>
</script>
</body>
</html>
If and Switch Statements
Update file [Link] dengan code berikut:
…
<body>
<p>Speed on the motorway:<input id="speed" type="number"/><button
onclick="checkSpeed()">Check</button></p>
<p>Yor season now:<input id="myInput"/><button onclick="checkSeason()">Submit</button></p>
<script>
function checkSpeed(){
var speed = [Link]("speed").value;
if (speed>70){
[Link]("You are going to fast!");
}else if(speed<40){
[Link]("You are going too slow!");
}else{
[Link]("Your speed is fine");
}
}
… Lanjutan code di sebelah
If and Switch Statements
Lanjutan…
…
function checkSeason(){
var x = [Link]("myInput").[Link]();
switch(x){
case "summer":
[Link]("It is summer time!");
break;
case "winter":
[Link]("It is winter time!");
break;
case "spring":
[Link]("It is spring time!");
break;
case "autumn":
[Link]("It is autumn time!");
break;
}
}
</script>
</body>
…
If and Switch Statements
While Loops
Buat file dengan nama [Link] dan masukkan code berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>while loop</title>
</head>
<body>
<p id="myParagraph">Javascript.</p>
<script>
</script>
</body>
</html>
While Loops
Update code
…
<body>
<p id="myParagraph">Javascript.</p>
<button onclick="initiateGame()">Start</button>
<div id="balance">Current Balance: $1000</div>
<script>
var i = 0;
while(i<5){
[Link]("myParagraph").innerHTML += "<br />" + i;
i++;
}
….
Lanjutan code di sebelah
While Loops
Lanjutan code
…
function initiateGame(){
var balance = 1000;
var itemsBought = 0;
while(balance>0){
var itemPrice = [Link]([Link]()*100);
if(itemPrice <= balance){
itemsBought += 1;
balance -= itemPrice;
[Link]("balance").innerHTML += "<p> Purchase amount: $" + itemPrice +".New Balance: $" + balance + ". </p>";}
}
[Link]("balance").innerHTML += "<p> You bought: " + itemsBought + "items.</p>";
}
</script>
</body>
…
While Loops
Jalankan di browser:
Regular Expressions
Buat file dengan nama [Link] dan masukkan code berikut:
<!DOCTYPE html> …
<html> var str = "Atlanta";
<head> var pattern = /[a-z]/g;
[Link]("string").innerHTML = str;
<meta charset="utf-8"> [Link]("pattern").innerHTML = pattern;
<title>Regular Expression</title> [Link]("search").innerHTML = [Link](pattern);
</head> [Link]("match").innerHTML = [Link](pattern);
<body> [Link]("test").innerHTML = [Link](str);
<p>String: <span id="string"></span></p> </script>
<p>Pattern: <span id="pattern"></span></p> </body>
<p>Result(search): <span </html>
id="search"></span></p>
<p>Result(match): <span id="match"></span></p>
<p>Result(test): <span id="test"></span></p>
<script>
…
Regular Expressions
Jalankan di browser:
Errors
Membuat file [Link] dan masukkan kode berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>errors</title>
</head>
<body>
<script>
sum(3,4);
</script>
</body>
</html>
Errors
Jalankan di browser dan lihat hasilnya di Inpect Element - Console
Errors
Rubah code di [Link] dengan code berikut:
..
<head>
<meta charset="utf-8">
<title>errors</title>
<style>
#error{
color: #d36363;
}
</style>
</head>
<body>
<p id="error"></p>
<script>
try{
sum(3,4);
}
catch(err){
[Link]("error").innerHTML = [Link];
}
</script>
</body>
…
Errors
Jalankan di browser (error message tampil di browser):
Errors – Activation Password Validation
Rubah code di [Link] dengan code berikut:
…
<body>
<p>You password should contain at least 6 characters, 1 number and 1 capital letter:</p>
<p>Enter password:<br /><input id="password" type="password"></p>
<p>Re-Enter password:<br /><input id="password2" type="password"></p>
<button onclick="check()">Submit</button>
<p id="error"></p>
<script>
function check(){
var password =
[Link]("password").value;
var password2 =
[Link]("password2").value;
var errorMessage =
[Link]("error");
var errorTOThrow = ""; Lanjutan code di sebelah…
…
Errors – Activation Password Validation
Lanjutan…
…
try{
if([Link]<6){
errorTOThrow += "<br /> Password too short.";
}
if(/[A-Z]/[Link](password) == false){
errorTOThrow += "<br /> Password should include at least one capital letter.";
}
if(/\d/[Link](password) == false){
errorTOThrow += "<br /> Password should include at least one digit.";
}
if(password != password2){
errorTOThrow += "<br /> Password should match.";
}
throw errorTOThrow;
}
catch(err){
[Link] = err;
}
}
</script>
…
Errors – Activation Password Validation
Jalankan di browser:
Set Interval dan Set Timeout
Membuat file setInterval&[Link] dan masukkan kode berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>setInterval dan setTimeout</title>
</head>
<body>
<p>Javascript</p>
<script>
</script>
</body>
</html>
Set Interval dan Set Timeout
Rubah code setInterval&[Link] dengan code berikut:
…
<body>
<p id="counter">0</p>
<button onclick="clearInterval(myCounter)">Stop counting.</button><br />
<button onclick="clearTimeout(delayedWelcomeMessage)">Avoid Welcome Message</button>
<script>
var counter = [Link]("counter");
var x = 0;
var myCounter = setInterval(function(){x++; [Link] = x},1000);
var delayedWelcomeMessage = setTimeout(function(){[Link]("Welcome to our page")},3000);
</script>
</body>
…
Set Interval dan Set Timeout
Jalankan di browser:
Window and Screen
Buat file [Link] dan masukkan kode berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window and screen</title>
</head>
<body>
<script>
</script>
</body>
</html>
Window and Screen
Rubah code pada file [Link] sebagai berikut:
…
<head>
<meta charset="utf-8">
<title>window and screen</title>
<style>
#div1{
background-color: #dbee5c;
}
#div2{
background-color: #6dbf8c;
}
#div3{
background-color: #4a80ed;
}
#div4{
background-color: #d9a962;
}
.equalBox{
float: left;
margin-left: 1px;
}
</style>
</head> Lanjutan di sebelah…
…
Window and Screen
Lanjutan…
…
<body>
<div id="div1" class="equalBox">Div1</div>
<div id="div2" class="equalBox">Div2</div>
<div id="div3" class="equalBox">Div3</div>
<div id="div4" class="equalBox">Div4</div>
<script>
var windowHeight = [Link] || [Link] || [Link];
var screenWidth = [Link];
var availableScreenHeight = [Link];
// [Link](availableScreenHeight);
for(i=1; i<5; i++){
[Link]("div" + i).[Link] = [Link]/4-10 + 'px';
[Link]("div" + i).[Link] = [Link]-10 + 'px';
}
</script>
</body>
…
Window and Screen
Jalankan di browser:
Alert Box
Buat file [Link] dan masukkan kode berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Alert boxes</title>
</head>
<body>
<p>Javascript</p>
<script>
</script>
</body>
</html>
Alert Box
Rubah file [Link] dengan code sebagai berikut:
…
<script>
var acceptCookies = [Link]("Please confirm you accept cookies");
if(acceptCookies == true){
[Link]("You confirmed you accept cookies.");
}else{
[Link]("You do not accept cookies");
}
var visitor = prompt("Please enter your name.");
[Link]("Hi " + [Link]() + ", we wish you a nice experience on our page! Don't forget to like
us on Facebook!");
</script>
…
Alert Box
Jalankan di browser: