Java Script
Diunggah oleh
Erna PiantariJava Script
Diunggah oleh
Erna PiantariDepartemen 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="[Link]('myImage').src=‘lampu_nyala.png'">Turn on the light</button>
<img id="myImage" src=”lampu_mati.png" style="width:100px">
<button onclick="[Link]('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="[Link]('demo').[Link]='35px'">Ubah style</button>
<button type="button" onclick="[Link]('demo').[Link]='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() {
[Link]("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 [Link]
<!DOCTYPE html>
<html>
<body>
File [Link]
function myFunction() { <h2>Demo External JavaScript</h2>
[Link]("demo").innerHTML = " <p id="demo">A Paragraph.</p>
Paragraph changed.";
} <button type="button" onclick="myFunction()">Try it</button>
<p>This example links to "[Link]".</p>
<p>(myFunction is stored in "[Link]")</p>
<script src="[Link]"></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
[Link]().
• Menuliskan ke HTML element, menggunakan [Link]().
• Menuliskan ke HTML element, menggunakan [Link]().
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>[Link]("demo").innerHTML = 5 + 6;</script>
<button onclick="[Link]()">Cetak</button>
</body>
</html> Sialahkan coba ganti scriptnya dengan JS output lain
<script>
<button type="button" onclick="[Link](5 + 6)">Tes</button>
[Link](5 + 6);
</script>
<script> <script>
[Link](5 + 6); [Link](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 =[Link](“myInput”).value;
if (x>10)
[Link]("demo").innerHTML = x;
else
[Link]("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 = [Link]([Link]() * 10 + 1);
var three = [Link]([Link]);
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 < [Link]; i++) {
s2 += [Link](i) + [Link](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 = []; // [Link] is 0
stooges[0] = "Larry"; // [Link] is 1
stooges[1] = "Moe"; // [Link] is 2
stooges[4] = "Curly"; // [Link] is 5
stooges[4] = "Shemp"; // [Link] is 5
JS
Erna Piantari, M.T
Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia
Array methods25
var a = ["Stef", "Jason"]; // Stef, Jason
[Link]("Brian"); // Stef, Jason, Brian
[Link]("Kelly"); // Kelly, Stef, Jason, Brian
[Link](); // Kelly, Stef, Jason
[Link](); // Stef, Jason
[Link](); // 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 = [Link](0, [Link](" ")); // "Connie"
var len = [Link]; // 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 = [Link](0); // does work in IE
var lastLetter = [Link]([Link] - 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 = [Link](" "); // ["the", "quick", "brown", "fox"]
[Link](); // ["fox", "brown", "quick", "the"]
s = [Link]("!"); // "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 [Link]
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 = [Link]("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> }
[Link]("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:
[Link]
35
var name = [Link]("id");
JS
<button onclick="changeText();">Click me!</button>
<span id="output">replace me</span>
<input id="textbox" type="text" />
HTML
function changeText() {
var span = [Link]("output");
var textBox = [Link]("textbox");
[Link] = "red";
}
JS
Erna Piantari, M.T
Departemen Pendidikan Ilmu Komputer
Universitas Pendidikan Indonesia
Accessing elements:
[Link]
36
[Link] 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
- Dasar JavaScript: Variabel, Fungsi, dan PercabanganBelum ada peringkatDasar JavaScript: Variabel, Fungsi, dan Percabangan11 halaman
- Laporan Coding JSS - Raka Teo Endrawan - E1J021067Belum ada peringkatLaporan Coding JSS - Raka Teo Endrawan - E1J02106717 halaman
- Panduan Dasar Javascript dan Node.jsBelum ada peringkatPanduan Dasar Javascript dan Node.js11 halaman
- Panduan Dasar JavaScript untuk PemulaBelum ada peringkatPanduan Dasar JavaScript untuk Pemula45 halaman
- Dasar Pemrograman JavaScript untuk Pemula100% (1)Dasar Pemrograman JavaScript untuk Pemula77 halaman
- Panduan Dasar JavaScript untuk PemulaBelum ada peringkatPanduan Dasar JavaScript untuk Pemula23 halaman
- Belajar Dasar JavaScript untuk PemulaBelum ada peringkatBelajar Dasar JavaScript untuk Pemula23 halaman
- Panduan Lengkap Pemrograman JavaScriptBelum ada peringkatPanduan Lengkap Pemrograman JavaScript38 halaman
- Pengenalan JavaScript untuk MahasiswaBelum ada peringkatPengenalan JavaScript untuk Mahasiswa25 halaman
- JavaScript & DOM: Dasar dan ImplementasiBelum ada peringkatJavaScript & DOM: Dasar dan Implementasi33 halaman
