Scribd
Unggah
6 tayangan

Java Script

Diunggah oleh

Erna Piantari
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
6 tayangan

Java Script

Diunggah oleh

Erna Piantari
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 37

Departemen Pendidikan Ilmu Komputer

Universitas Pendidikan Indonesia

Javascript

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Tujuan
• Mengerti mengenai bagaimana penggunaan javascript dalam Web
Programming
• Mampu mengimplementasikan javascript dalam dokumen HTML
• Mampu mengintergrasikan dokumen javaScript, CSS dan HTML

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Overview
• Tersedia di browser client
• Digunakan untuk membuat web interaktif
• Memasukan teks berbasis “dynamic programming” pada aplikasi web
• Merespon setiap events (contoh: load halaman ketika di klik)
• Dapat melakukan operasi perhitungan pada komputer user
• Javascript bukan Java
• Tidak ada hubungan dengan bahasa pemograman Java

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Javascript Embed inside HTML


1. Embedded javascript dalam HTML

<script type="text/javascript">
Javascript contents
</script>
HTML

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Silahkan coba
<!DOCTYPE html>
<html>
<head></head>
<body>

<h2>Apa yang JavaScript dapat lakukan?</h2>

<p>JavaScript dapat merubah nilai atribut pada HTML.</p>

<p> In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src=‘lampu_nyala.png'">Turn on the light</button>

<img id="myImage" src=”lampu_mati.png" style="width:100px">

<button onclick="document.getElementById('myImage').src= lampu_mati.png'">Turn off the light</button>

</body>
</html> Erna Piantari, M.T
Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Silahkan coba
<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript dapat mengubah style pada element HTML.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Ubah style</button>


<button type="button" onclick="document.getElementById('demo').style.display='none'">hapus!</button>
</body>
</html>

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Script disimpan di head


<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>

<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer

Menghubungkan File Javascript


Universitas Pendidikan Indonesia

ke Halaman HTML
• Tag script disimpan di bagian head halaman HTML
• script javascript disimpan di file terpisah dengan format .js file
• JS code dapat disimpan secara langsung di body HTML atau head
HTML (seperti CSS)
• Tapi tidak dianjurkan (harus dipisahkan konten, presentation, dan behavior)

<script src="filename" type="text/javascript"></script>

HTML

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Silahkan coba
File myHTML.html
<!DOCTYPE html>
<html>
<body>
File myScrip.js
function myFunction() { <h2>Demo External JavaScript</h2>

document.getElementById("demo").innerHTML = " <p id="demo">A Paragraph.</p>


Paragraph changed.";
} <button type="button" onclick="myFunction()">Try it</button>

<p>This example links to "myScript.js".</p>


<p>(myFunction is stored in "myScript.js")</p>

<script src="myScript.js"></script>

</body>
</html>
Erna Piantari, M.T
Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

JavaScript Output
• Menuliskan ke HTML element, menggunakan innerHTML.
• Menuliskan ke HTML element, menggunakan
document.write().
• Menuliskan ke HTML element, menggunakan window.alert().
• Menuliskan ke HTML element, menggunakan console.log().

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Silahkan coba
<!DOCTYPE html>
<html>
<body>
<h1>Halaman Web saya</h1>
<p>Paragraph saya</p>

<p id="demo"></p>
<script>document.getElementById("demo").innerHTML = 5 + 6;</script>

<button onclick="window.print()">Cetak</button>
</body>
</html> Sialahkan coba ganti scriptnya dengan JS output lain
<script>
<button type="button" onclick="document.write(5 + 6)">Tes</button>
document.write(5 + 6);
</script>
<script> <script>
window.alert(5 + 6); console.log(5 + 6);
</script> Erna Piantari, M.T
</script>
Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Variables dan Tipe Data


• Aturan memberi nama “methods”:
• Case sensitive
• Dimulai dengan huruf atau underscore
• _123 (boleh)
• @dsdjhd, &dbsvdsb, 1_hitung (tidak boleh)
• namaSaya, hitungHargaTotal (boleh)
• _hitung (boleh)
• Sebaiknya input method bukan kata
• Sebaiknya tidak mengandung operasi untuk karakter
• Mendeklarasikan variable :
• Bahasa C : int a = 8, float b ;
• var variableNama= value; let variableName = value;
var nama = ‘Wijoyo’; atau let nama =‘Wijoyo’;
var usia = 20; let usia = 20;
Erna Piantari, M.T
Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Variables 13

var name = expression;


let usia = 19; JS

var clientName = "Connie Client";


var age = 32;
var weight = 127.4;
let Nama = ”Robi” JS

• variables didefinisiakan dengan keyword var atau let (case sensitive)


• Tipe data tidak didefinisikan, tapi JS punya tipe ("loosely typed")
• Number, Boolean, String, Array, Object, Function, Null, Undefined
• Tidak bisa memanggil variable dengan typeof

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer

Silahkan coba,
Universitas Pendidikan Indonesia

Setelahnya buat tag untuk input text, x nya adalah nilai yang
diinputkan pada tag input tersebut
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Halaman Web saya</h1>
<p>Paragraph saya</p>

<p id="demo"></p>
// tag text input
<script>
let x =document.getElemetById(“myInput”).value;
if (x>10)
document.getElementById("demo").innerHTML = x;
else
document.getElementById("demo").innerHTML = ’Nilai x lebih kecil dari 10’;
</script>

</body>
Erna Piantari, M.T
</html>
Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Number type 15

var enrollment = “99”;


var medianGrade = 2.8;
var credits = 5 + 4 + (2 * 3);
JS

• Bilangan integers dan real adalah tipe bilangan yang


sama(no int vs. double)
• operators: +, -, *, /, %, ++, --, =, +=, -=, *=, /=, %=
• Banyak operator yang melakukan auto-convert :
"2" * 3 hasilnya adalah 6

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Comments 16

// single-line comment
/* multi-line comment */
JS

• identical to Java's comment syntax


• recall: comment syntaxes
• HTML: <!-- comment -->
• CSS/JS/PHP: /* comment */

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Math object
17

var rand1to10 = Math.floor(Math.random() * 10 + 1);


var three = Math.floor(Math.PI);
JS

 methods: abs, ceil, cos, floor, log,


max, min, pow, random, round, sin,
sqrt, tan
 properties: E, PI

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Logical operators
 >, <, >=, <=, && ,||, !==, !=, ===
 Kenyakan operator logika secara otomatis mengkonversi tipe
data:
 5 < "7" is true
 42 == 42.0 is true
 "5.0" == 5 is true
 === and !== digunakan untuk mengecek persamaan nilai;
yang dicek adalah tipe dan nilainya
 "5.0" === 5 is false

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

if/else statement (same as Java)


19

if (condition) {
statements;
} else if (condition) {
statements;
} else {
statements;
}
JS

 Mirip dengan struktur if/else pada bahasa


pemograman lain
 JavaScript mengijinkan penggunaan berbagai
kondisi
Erna Piantari, M.T
Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Boolean type 20

 Nilai apapun dapat digunakan sebagai sebuah Boolean


 "falsey" values: 0, 0.0, NaN, "", null, and undefined
 "truthy" values: anything else
 Mengkonversi sebuah nilai menjadi Boolean dengan cara:
 var boolValue = Boolean(otherValue);
 var boolValue = !!(otherValue);

var iLike190M = true;


var ieIsGood = "IE6" > 0; // false
if ("web development is great") { /* true */ }
if (0) { /* false */ }
JS

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

for loop 21

var sum = 0;
for (let i = 0; i < 100; i++) {
sum = sum + i;
}
JS
var s1 = "hello";
var s2 = "";
for (var i = 0; i < s.length; i++) {
s2 += s1.charAt(i) + s1.charAt(i);
}
// s2 stores "hheelllloo"
JS

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

while loops 22

while (condition) {
statements;
} JS

do {
statements;
} while (condition);
JS

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Popup boxes 23

alert("message"); // message
confirm("message"); // returns true or false
prompt("message"); // returns user input string
JS

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Arrays 24

var name = []; // empty array


var name = [value, value, ..., value]; // pre-filled
name[index] = value; // store element
JS

var ducks = ["Huey", "Dewey", "Louie"];


Ducks[4] = ”Bella”;
var stooges = []; // stooges.length is 0
stooges[0] = "Larry"; // stooges.length is 1
stooges[1] = "Moe"; // stooges.length is 2
stooges[4] = "Curly"; // stooges.length is 5
stooges[4] = "Shemp"; // stooges.length is 5
JS

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Array methods25
var a = ["Stef", "Jason"]; // Stef, Jason
a.push("Brian"); // Stef, Jason, Brian
a.unshift("Kelly"); // Kelly, Stef, Jason, Brian
a.pop(); // Kelly, Stef, Jason
a.shift(); // Stef, Jason
a.sort(); // Jason, Stef
JS
 array serves as many data structures: list, queue,
stack, ...
 methods: concat, join, pop, push, reverse, shift,
slice, sort, splice, toString, unshift
 push and pop add / remove from back
 unshift and shift add / remove from front
 shift and pop return the element that is removed
Erna Piantari, M.T
Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

String type 26

var s = "Connie Client";


var fName = s.substring(0, s.indexOf(" ")); // "Connie"
var len = s.length; // 13
var s2 = 'Melvin Merchant';
JS
• methods: charAt, charCodeAt, fromCharCode, indexOf,
lastIndexOf, replace, split, substring, toLowerCase,
toUpperCase
• charAt returns a one-letter String (there is no char type)
• length property (not a method as in Java)
• Strings can be specified with "" or ''
• concatenation with + :
• 1 + 1 is 2, but "1" + 1 is "11"

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

More about String


27

 escape sequences behave as in Java: \' \" \& \n \


t \\
 converting between numbers and Strings:
var count = 10;
var s1 = "" + count; // "10"
var s2 = count + " pisang, yes yes yes!"; // "10 pisang,
yes yes yes!
var n1 = parseInt("42 is the answer"); // 42
var n2 = parseFloat("booyah 0.967"); // NaN
JS
• accessing the letters of a String:
Var s = “Jumat”
var firstLetter = s[0]; // fails in IE
var firstLetter = s.charAt(0); // does work in IE
var lastLetter = s.charAt(s.length - 1);
JS Erna Piantari, M.T
Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Splitting strings: split and join


28

var s = "the quick brown fox";


var a = s.split(" "); // ["the", "quick", "brown", "fox"]
a.reverse(); // ["fox", "brown", "quick", "the"]
s = a.join("!"); // "fox!brown!quick!the"
JS

 split breaks apart a string into an array using a


delimiter
 can also be used with regular expressions (seen later)
 join merges an array into a single string, placing a
delimiter between them

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Event-driven programming
29

 split breaks apart a string into an array using a


delimiter
 can also be used with regular expressions (seen later)
 join merges an array into a single string, placing a
delimiter between them

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

JavaScript functions
30

function name() {
statement ;
statement ;
...
statement ;
} JS
function myFunction() {
alert("Hello!");
alert("How are you?");
} JS
 the above could be the contents of example.js
linked to our HTML page
 statements placed into functions can be evaluated
in response to user events
Erna Piantari, M.T
Departemen Pendidikan Ilmu Komputer

Silahkan coba, Js dalam HTML dan JS


Universitas Pendidikan Indonesia

dalam file sendiri <script>


<!DOCTYPE html> function myFunction() {
<html> // Mendapat nilai dari field id="numb"
<body> let x = document.getElementById("numb").value;
// jika x bukan angka antara 1-10
<h2>JavaScript Validation</h2> let text;
//isNaN(x) adalah kosong atau x<1 atau x>10
<p>Silahkan masukan angka dari 1 sampai 10:</p> if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
<input id="numb"> } else {
text = "Input OK";
<button type="button" onclick="myFunction()">Submit</button> }
document.getElementById("demo").innerHTML = text;
<p id="demo"></p> }

</script>

Erna Piantari, M.T</body>


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Event handlers
32

<element attributes onclick="function();">...

HTML
<button onclick="myFunction();">Click me!</button>

HTML
• JavaScript functions can be set as event handlers
• when you interact with the element, the function will execute
• onclick is just one of many event HTML attributes we'll use
• but popping up an alert window is disruptive and annoying
• A better user experience would be to have the message appear on the page...

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Document Object Model (DOM)


33

• most JS code manipulates


elements on an HTML page
• we can examine elements' state
• e.g. see whether a box is checked
• we can change state
• e.g. insert some new text into a div
• we can change styles
• e.g. make a paragraph red

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

DOM element objects


34

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Accessing elements:
document.getElementById
35

var name = document.getElementById("id");

JS
<button onclick="changeText();">Click me!</button>
<span id="output">replace me</span>
<input id="textbox" type="text" />
HTML
function changeText() {
var span = document.getElementById("output");
var textBox = document.getElementById("textbox");

textbox.style.color = "red";

}
JS

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Accessing elements:
document.getElementById
36

 document.getElementById returns the DOM object


for an element with a given id
 can change the text inside most elements by
setting the innerHTML property
 can change the text in form controls by setting the
value property

Erna Piantari, M.T


Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia

Latihan
• Buatlah sebuah aplikasi web untuk kalkulator sederhana
menggunakan HTML dan CSS yang dapat berjalan dengan baik.
• Contoh tampilan kalkulator yang harus dibuat.
• Perbaiki style pada halaman web yang dibuat.

Erna Piantari, M.T

Anda mungkin juga menyukai