Minggu 3 - Client-Side Scripting Dengan Javascript

Diploma 3 Teknik Geomatika Sekolah Vokasi
Universitas Gadjah Mada Yogyakarta
Annisa Farida
• Client-Side Scripting
• Intro to Javascript
• Programming with javascript
Gadjah Mada University 2

Why JS?
Gadjah Mada University 4 4

Why JS?
1. Javascript Is In The Browser
2. Most Popular Programming Language In The World
3. It’s Everywhere
4. It’s Easy To Learn
5. An abundance of Javascript Jobs
6. You can Design Visual Effects
7. User Interactions
8. Game Development
9. Make Your Own Blog

https://fossbytes.com/why-learn-javascript-
10. Find Bugs, Make Money reasons/

Javascript
KONSEP CLIENT DAN SERVER SIDE SCRIPTING
7
Object, Properties and Methods in JS
Properties are values associated with objects
Methods are actions that objects can perform
Object Properties Methods
car.name = Fiat car.start()

GEODETIC ENGINEERING | Gadjah Mada University
car.model = 500 car.drive()
car.weight = 850kg car.brake()
car.color = white
Event is something happens to the object or the environment

Department of
around it
Event: It’s Raining!
JS Framework and Library
A framework encapsulates common application

functionality, allowing the developer to focus on the
parts that are unique to their application. Usually
that means the developer writes pieces of code that
get called by the framework when various things
happen; AngularJS, for example.
Libraries are packages of code that typically get

called by your application to perform a task, like
DOM manipulation or HTTP requests; ThreeJS, for
example.

Gadjah Mada University
Client-Side Scripting
KONSEP CLIENT DAN SERVER SIDE SCRIPTING
13
JS Scripting
KONSEP DAN LATIHAN JS CODING
17
How do we call JS?
Ingat CSS?
How? Examples
1 External Link <link rel="stylesheet" href=“style.css" />

<style>
2 Embed in HTML #kucing {color:purple}
</style>
3 Inline Style <p style=“color:red”> paragraf merah </p>
4 Import in CSS @import "styles.css";

Department of
How do we call JS?
In Javascript
How? Examples
1 External Link <script src=“peringatan.js” />

<script>
2 Embed in HTML window.alert(‘peringatan!’);
</script>
<button type="button"
onclick="document.getElementById('demo').inne
3 Inline html tag
rHTML = Date()">
Click me to display Date and Time.</button>
$.getScript("myscript.js", function(){
Import from other
Department of
4 JS
alert("Script loaded and executed.");
});
Explain these terms below:
• Variables • Conditional Statement

• values • Comments
• Errors: Runtime • Operators
error, Logic Error, • Case
Syntax Error sensitive/insensitive
• Functions • Keyword
• Iterations

<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button"
onclick="document.getElementById('demo').innerHTML =
'Hello JavaScript!'">
Click Me!
</button>
</body>
</html>

Document Object Model (DOM)
The DOM defines a standard for accessing

documents:
"The W3C Document Object Model (DOM) is a

platform and language-neutral interface that allows
programs and scripts to dynamically access and
update the content, structure, and style of a
document."

HTML Document Object Model (DOM)
The HTML DOM is a standard for how to get, change, add, or

delete HTML elements.
With the power of Javascript, we can have:
HTML elements as objects

The properties of HTML elements
The methods to access all HTML elements
The events for all HTML elements

HTML Document Object Model (DOM)
HTML dan CSS:

<html>
<body>
<h1 id=“teks” style=“color:blue”> Text ini aslinya warna biru </h1>
…
</body>
</html>
Javascript (isikan pada titik-titik di atas):

<script>
document.getElementById("teks").style.color="red";
</script>

The HTML DOM Tree of Objects

Using DOM: Writing to HTML tag
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
• JavaScript is the programming language of the Web
• Javascript is an Object-Oriented Programming (OOP)
Language
• Javascript is Case-Sensitive
• Commonly used for Client-side scripting. Can be used for
Server-side scripting
• Derived from C language
• Highly dynamic in nature
• Javascript statement is ended with ;

Numbers and Strings Expressions Operators
10.50 "John Doe" 5 + 6 var x = 5;

var y = 6;
1001 'John Doe' 5 * 10
(5 + 6) * 10
Defining variables Comments

var x; var x = 5; // I will be executed
x = 6; // var x = 6; I will NOT be
executed
Case Sensitive
/*
lastName = "Doe"; This is
lastname = "Peterson"; Multiline comment
*/

Datatype
var length = 16; // Number

var lastName = "Johnson"; // String
var cars = ["Saab", "Volvo", "BMW"]; // Array
var x = {firstName:"John", lastName:"Doe"}; // Object
Function
var x = myFunction(4, 3);
function myFunction(a, b) {
return a * b;
}

Conditional ‘if’
‘For’ loop
if (hour < 18) {
for (i = 0; i < cars.length; i++)
greeting = "Good day";
{
} else {
text += cars[i] + "<br>";
greeting = "Good evening";
}
}
‘while’ loop ‘do while’ loop

while (i < 10) {
do {
text += "The number is " + i;
text += "The number is " + i;
i++;
i++;
}
}
while (i < 10);

Javascript Keyword
Keyword Description
break Terminates a switch or a loop
continue Jumps out of a loop and starts at the top
debugger Stops the execution of JavaScript, and calls (if available) the debugging
function
do ... while Executes a block of statements, and repeats the block, while a condition is
true
for Marks a block of statements to be executed, as long as a condition is true
function Declares a function

if ... else Marks a block of statements to be executed, depending on a condition
return Exits a function

switch Marks a block of statements to be executed, depending on different cases
try ... catch Implements error handling to a block of statements

var Declares a variable
Arithmetic Operators
Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
-- Decrement
Assigment Operators
Operator Example Same As
= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
Javascript Demo
EXAMPLES ON JAVASCRIPT-POWERED WEBPAGE
34
What you can do with JS?
http://www.queness.com/post/12139/8-visually-
impressive-javascript-powered-websites
http://tutorialzine.com/2013/09/20-impressive-
examples-for-learning-webgl-with-three-js/

https://www.chromeexperiments.com/

http://mrdoob.github.io/three.js/examples/css3d_periodictable.html

http://wagerfield.github.io/parallax/

http://ogreen.special-t.com/en/

http://wellcaffeinated.net/PhysicsJS/examples/spaceship

http://globe.chromeexperiments.com/
Gadjah Mada University 41 41

http://threejs.org/

Department of
Menggunakan fungsi
Department of
Handling Event
Department of
Baca dari input

Department of
Baca dari input form

Department of
Fungsi faktorial
Department of
Fungsi iterasi (loop)

Department of
Fungsi balik teks

Department of
Fungsi cek palindrom

1. Buatlah hitungan Fungsi Factorial berdasarkan
angka masukan seperti contoh di bawah ini:
Department of
Petunjuk: gabungkan fungsi masukan dari input dan

fungsi faktorial
2. Buatlah halaman web dengan validasi password.
Apabila password bukan ‘sss’ maka muncul pesan
error
Department of
3. Buatlah sebuah halaman web yang memvalidasi masukan dari
pengguna dengan kondisi:
Pengguna memasukkan nama dan umur, kemudian mengklik
sebuah tombol
Jika input nama tidak diisi (kosong), muncul peringatan
“isikan nama!!”
Buat paragraph baru di bagian bawah yang bertuliskan:

• ‘Anda masih bayi’ apabila umurnya kurang dari 5 tahun
• ‘Anda masih anak-anak’ apabila umurnya antara 6 – 15 tahun
• ‘Anda masih remaja’ apabila umurnya antara 16 - 30 tahun
• ‘Anda sudah dewasa’ apabila umurnya antara 31 – 60 tahun
• ‘Anda sudah dewasa’ apabila umurnya lebih dari 61 tahun
• Jika pengguna memasukkan nilai yang lain selain nilai di atas
(misalnya 0 atau negative), muncul tulisan ‘Anda Game Over’
Department of
4. Buatlah sebuah halaman web dengan kondisi:
• Pengguna memasukkan sebuah angka,
kemudian mengklik sebuah tombol untuk
memulai hitungan
• Setelah tombol di klik, halaman web

tersebut menampilkan bilangan semua
bilangan prima dari satu sampai angka
tersebut.
5. Sama seperti no (4), tapi yang ditampilkan
Department of
adalah bilangan fibonacci

Next Week
• Bagi yang belum punya akun Github, silahkan buat akun

Github. Buat repository sehingga anda memiliki domain
<http://namaanda.github.io>
• Buat akun pada layanan hosting (misalnya IDHostinger).
• Pelajari HTML+CSS+JS. Mungkin ada kuis

Untuk Dipelajari
• http://jsbooks.revolunet.com/
• w3schools
• http://eloquentjavascript.net/
• http://en.wikibooks.org/wiki/JavaScript
• http://www.utexas.edu/learn/javascript
• http://readwrite.com/2010/12/04/6-free-javascript-e-books
• http://www.webstepbook.com/supplements-
2ed/slides/chapter08-javascript.shtml
• http://xahlee.info/js/js_get_elements.html
• http://www.queness.com/post/12139/8-visually-impressive-
javascript-powered-websites

Terima Kasih

Minggu 3 - Client-Side Scripting Dengan Javascript

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Minggu 3 - Client-Side Scripting Dengan Javascript

Uploaded by

Copyright:

Available Formats

Diploma 3 Teknik Geomatika Sekolah Vokasi

Universitas Gadjah Mada Yogyakarta

Gadjah Mada University 2

Gadjah Mada University 4 4

2. Most Popular Programming Language In The World

4. It’s Easy To Learn

5. An abundance of Javascript Jobs

6. You can Design Visual Effects

9. Make Your Own Blog

Gadjah Mada University 5

car.name = Fiat car.start()

car.model = 500 car.drive()

car.weight = 850kg car.brake()

Event is something happens to the object or the environment

A framework encapsulates common application

Libraries are packages of code that typically get

Gadjah Mada University 10

1 External Link <link rel="stylesheet" href=“style.css" />

3 Inline Style <p style=“color:red”> paragraf merah </p>

4 Import in CSS @import "styles.css";

1 External Link <script src=“peringatan.js” />

• Variables • Conditional Statement

Gadjah Mada University 20

Gadjah Mada University 21

The DOM defines a standard for accessing

"The W3C Document Object Model (DOM) is a

Gadjah Mada University 22

The HTML DOM is a standard for how to get, change, add, or

With the power of Javascript, we can have:

HTML elements as objects

Gadjah Mada University 23

HTML dan CSS:

Javascript (isikan pada titik-titik di atas):

Gadjah Mada University 24

Gadjah Mada University 25

Gadjah Mada University 27

10.50 "John Doe" 5 + 6 var x = 5;

Defining variables Comments

Gadjah Mada University 28

var length = 16; // Number

Gadjah Mada University 29

‘while’ loop ‘do while’ loop

Gadjah Mada University 30

function Declares a function

return Exits a function

try ... catch Implements error handling to a block of statements

Gadjah Mada University 35

Gadjah Mada University 36

Gadjah Mada University 37

Gadjah Mada University 38

Gadjah Mada University 39

Gadjah Mada University 40

Gadjah Mada University 41 41

Gadjah Mada University 42

Baca dari input

Baca dari input form

Fungsi iterasi (loop)

Fungsi balik teks

Fungsi cek palindrom

Petunjuk: gabungkan fungsi masukan dari input dan

Buat paragraph baru di bagian bawah yang bertuliskan:

• Setelah tombol di klik, halaman web

adalah bilangan fibonacci