Minggu 4 - Javascript

Sistem Informasi Geospasial
berbasis Internet
Javascript: Client-Side
Scripting
Dany Laksono
Week 4
Question:
What is the connection between HTML, CSS and
Javascript?
Department of
GEODETIC ENGINEERING | Gadjah Mada University
HTML, CSS and JS
<div id=“kucing>
HTML is the Object

HTML, CSS and JS
<style>
#kucing {
warnaBulu: hitam;
panjangEkor: 4cm}
</style>
Department of
CSS define its Properties

HTML, CSS and JS
Kucing.bobo(“no”);
(membangunkan kucing yg bobo)
Kucing.tambahEkor(“200cm”);
(panjang ekor kucing ditambah 2
meter)
Department of
JS define its Action or Method

HTML
<p class='biru'> Ini tulisan warna biru </p>
CSS
.biru {
color:blue
}
Ini tulisan warna biru
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
Element selector ID selector
#para1 {
p { text-align: center;
text-align: center; color: red;
color: red; }
}
Class selector
.center {
text-align: center;
color: red;
}
Selective selector
p .center {
text-align: center;
color: red;
}
Grouping selector
h1, h2, p {
text-align: center;
color: red;
}
Praktek 2:
Buat sebuah halaman web dengan HTML dan CSS sehingga menghasilkan
tampilan seperti berikut:
Konsep dan latihan js coding
JS BASICS
12
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.
Konsep dan latihan js coding
JS BASICS
19
Explain these terms below:
• Variables • Conditional Statement

• Values • Comments
• Errors: Runtime • Operators
error, Logic Error, • Case
Syntax Error sensitive/insensitive
• Functions • Keyword
• Iterations
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.");
});
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()

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!
<!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>
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>
• 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 (using NodeJS)
• 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
Examples on javascript-powered webpage
JAVASCRIPT DEMO
33
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://helloracer.com/racer-s/
http://middle-earth.thehobbit.com/
wellcaffeinated.net/PhysicsJS
http://threejs.org/
http://space.angrybirds.com/launch/
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

THANK YOU
58

Minggu 4 - Javascript

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Minggu 4 - Javascript

Загружено:

Авторское право:

Доступные форматы

Sistem Informasi Geospasial

HTML is the Object

CSS define its Properties

JS define its Action or Method

<p class='biru'> Ini tulisan warna biru </p>

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";

A framework encapsulates common application

Libraries are packages of code that typically get

• Variables • Conditional Statement

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

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

HTML dan CSS:

Javascript (isikan pada titik-titik di atas):

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

Defining variables Comments

var length = 16; // Number

‘while’ loop ‘do while’ loop

function Declares a function

return Exits a function

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

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

Вам также может понравиться