Nested Loop Pada Flowchart dan

COLORING THE GLOBAL FUTURE

Dasar-dasar Pemrograman
javascript

COLORING THE GLOBAL FUTURE | [Link]

COLORING THE GLOBAL FUTURE | [Link]
 Review Pertemuan sebelumnya
• Menentukan apakah suatu bilangan adalah
bilangan positif atau negatif
• Kondisi ?
• IF bilangan > 0 ?
• Jika Ya : Positif
• Jika Tidak : Negatif
• Bagaimana jika bilangan tersebut NOL?

COLORING THE GLOBAL FUTURE | [Link]

 Gambarkan alur untuk mendiagnosa dugaan gejala awal Flu

Analisis terhadap gejala awal flu ,apa sajakah ?

• Gejala flu yaitu (dari sumber [Link]
parenting/pengetahuan-dasar-mengenai-flu-pada-anak-anak/)

Contoh : Jika pasien dengan gejala sebagai berikut maka dugaannya adalah
gejala awal flu :
• Demam di atas 38,3 derajat Celsius
• Sakit tenggorokan.
• Batuk
• Badan Menggigil
• Kelelahan
• Sakit Kepala
• Berapa Perulangan yang ada pada flowchart?
COLORING THE GLOBAL FUTURE | [Link]
 Dasar Pemrograman
• PROGRAM : Merupakan himpunan atau kumpulan instruksi
tertulis yang dibuat oleh programer atau suatu bagian executable dari
suatu software.

• PEMROGRAMAN : Suatu kumpulan urutan perintah ke komputer

untuk mengerjakan sesuatu, dimana instruksi tersebut menggunakan
bahasa yang dimengerti oleh komputer atau dikenal dengan bahasa
pemrograman.

COLORING THE GLOBAL FUTURE | [Link]

 Dasar Pemrograman
Sebelum kita membuat suatu bahasa pemrograman, maka kita perlu mengetahui:
[Link] masalah
[Link] masalah Algoritma dan Flowchart
[Link] tata bahasa (sintaks) bahasa pemrograman

Baru setelah itu dapat kita buat pemrograman, memakai bahasa pemrograman yang
menurut kita paling sesuai menurut kebutuhan.
Contoh : Pascal, Cobol, untuk bisnis, Delphi, dan lain-lain
Fungsi Bahasa Pemrograman adalah sebagai media untuk menyusun dan memahami
serta sebagai alat komunikasi antara pemrogram dengan komputer
Secara umum terdapat 4 kelompok Bahasa Pemrograman, yaitu :
• Object Oriented Language (Visual dBase, Visual FoxPro, Delphi, Visual C)
• High Level Language (seperti Pascal dan Basic)
• Middle Level Language (seperti bahasa C), dan
• Low Level Language (seperti bahasa Assembly)
COLORING THE GLOBAL FUTURE | [Link]
 Dasar Pemrograman
Aplikasi adalah sebuah tools perangkat lunak yang memanfaatkan
kemampuan komputer untuk melakukan suatu tugas yang diinginkan oleh
penggunannya.

Jenis aplikasi komputer :

• Aplikasi Command Line Interface (CLI) : bentuk text, seperti COMMAND di
DOS, SHELL/Terminal
• Aplikasi Desktop Interface, menggunakan Bahasa pemrograman contoh :
pascal, basic, Visual Basic, java
• Aplikasi Web Interface, menggunakan Bahasa pemrograman contoh:
:HTML, CSS, PHP, Java, javascript
• Aplikasi Mobile Interface , menggunakan Bahasa pemrograman contoh:
Framework JavaScript yaitu :Ionic 2 dan React Native
COLORING THE GLOBAL FUTURE | [Link]
 Pendahuluan Javascript
• Javascript adalah bahasa pemrograman yang awalnya
dirancang untuk berjalan di atas browser .
• Namun, seiring perkembangan zaman, javascript tidak
hanya berjalan di atas browser saja. Javascript juga
dapat digunakan pada sisi Server, Game, IoT, Desktop,
dsb.
untuk belajar Javascript diperlukan :
• Web Browser (Google Chrome, Firefox, Opera, dll)
• Teks Editor (rekomendasi: Visual Studio Code, sublime
atau notepad)
COLORING THE GLOBAL FUTURE | [Link]
Javascript pada Chrome

Tampil halaman ini di browser klik console

Klik Inspect

COLORING THE GLOBAL FUTURE | [Link]

 Contoh : alert("Saya sedang belajar javascript");

COLORING THE GLOBAL FUTURE | [Link]

1. Pastikan Javascript pada browser “allowed”

COLORING THE GLOBAL FUTURE | [Link]

2. Install Editor
• Beberapa Editor bisa digunakan untuk mengetikkan pemrograman, antara
lain :
• Sublime text : [Link]
• Visual Studio : [Link]
• Notepad : [Link]

COLORING THE GLOBAL FUTURE | [Link]

 3. Dasar-dasar HTML
• HTML is the standard markup language for creating Web pages.
• HTML stands for Hyper Text Markup Language
• HTML describes the structure of Web pages using markup
• HTML elements are the building blocks of HTML pages
• HTML elements are represented by tags
• HTML tags label pieces of content such as "heading", "paragraph", "table",
and so on
• Browsers do not display the HTML tags, but use them to render the content
of the page

COLORING THE GLOBAL FUTURE | [Link]

 [Link]
• <!DOCTYPE html> The <!DOCTYPE html> declaration defines this
• <html> document to be HTML5
The <html> element is the root element of an
• <head> HTML page
• <title>Judul Halaman</title> The <head> element contains meta information
about the document
• </head> The <title> element specifies a title for the
• <body> document
The <body> element contains the visible page
content
• <h1>Latihan Judul Pertama</h1> The <h1> element defines a large heading
The <p> element defines a paragraph
• <p>Latihan Paragraf pertama</p>

• </body>
• </html>
COLORING THE GLOBAL FUTURE | [Link]
Output [Link]
<title>Judul Halaman</title>

<h1>Latihan Judul Pertama</h1>

<p>Latihan Paragraf pertama</p>

COLORING THE GLOBAL FUTURE | [Link]

 Di dalam console, kita bisa
menulis fungsi atau kode-kode
javascript dan hasilnya akan
langsung ditampilkan.

perintah atau
fungsi [Link]() akan
menampilkan pesan ke
dalam console javascript.

perintah [Link]() berfu

ngsi untuk menulis ke dokumen
HTML, maka dia akan
ditampilkan kesana.

COLORING THE GLOBAL FUTURE | [Link]

Output [Link]

[Link]()

[Link]()

COLORING THE GLOBAL FUTURE | [Link]

 Menampilkan output pada JS
Ada 4 cara menampilkan output pada Javascript:
1. Menggunakan Fungsi [Link]();✔️
2. Menggunakan Fungsi alert(); ✔️
3. Menggunakan Fungsi [Link](); ✔️
4. Menggunakan innerHTML.

COLORING THE GLOBAL FUTURE | [Link]

Contoh alert
<!DOCTYPE html>
<html>
<head>
<title>Haloo Javascript</title>
</head>
<body>
<script>
alert("Saya belajar Javascript");
</script>
</body>
</html>

COLORING THE GLOBAL FUTURE | [Link]

 Variabel dan Tipe Data dalam Javascript
• Variabel adalah sebuah nama yang mewakili sebuah nilai. Variabel bisa
diisi dengan berbagai macam nilai seperti string (teks), number (angka),
objek, array, dan sebagainya.

• Contoh :
Bilangan = 1
Hasil = ‘LULUS’
Nama = ‘Anindita’

COLORING THE GLOBAL FUTURE | [Link]

[Link]

COLORING THE GLOBAL FUTURE | [Link]

 Klik,
maka
akan
tampil

COLORING THE GLOBAL FUTURE | [Link]

 Referensi :
• [Link]

• [Link]

• [Link]

COLORING THE GLOBAL FUTURE | [Link]