Rangkuman Informatika Kelas X Semester 1

[X-3.1.a.] Memahami Interaksi antar perangkat keras, perangkat lunak dan pengguna

A. Perangkat keras

Hardware komputer: Bagian dari sistem komputer sebagai perangkat yang dapat diraba, dilihat secara fisik, dan bertindak untuk menjalan instruksi dari perangkat lunak (software). Contoh hardware:

Perangkat Input: Perangkat keras yang digunaka untuk memasukkan (input) dari pengguna yang akan diproses oleh computer. Contoh: Mouse, Keyboard, Microphone, Scanner

Pengolah data: Perangkat keras yang berguna memproses masukan yang telah diberikan oleh pengguna. Contoh: Processor

Perangkat Output: Perangkat keras yang digunakan untuk menampilkan hasil yang diolah computer dan selanjutnya diberikan kepada pengguna. Contoh: Speaker, Monitor, Printer, ProyektorB. Perangkat lunak

Software: Suatu bagian dari sistem komputer yang tidak memiliki wujud fisik dan tidak terlihat karena merupakan sekumpulan data elektronik yang disimpan dan diatur oleh computer berupa program yang dapat menjalankan suatu perintah. Berdasarkan jenisnya, software dibagi menjadi 4:

Bahasa Pemrograman: Digunakan untuk menerjemahkan intruksi yang ditulis dalam bahasa pemrograman ke bahasa mesin dengan aturan atau prosedur tertentu. Contoh: C++, Java

Sistem Operasi: Berfungsi untuk mengorganisir semua perangkat yang terhubung dalam sistem computer. Contoh: Windows, Linux, Mac OS

Program Aplikasi: Dibuat untuk menyelesaikan pekerjaan tertentu. Hanya dapat berjalan di atas sistem operasi. Contoh: Ms. Word, Ms. Exel, Adobe Photoshop, GOM Player

Program Bantu: Berfungsi sebagai pembantu sistem operasi dalam mengkoordinir sebuah sistem computer. Contoh: AntiVirus, Driver

C. Pengguna

Brainware: Seseorang yang menggunakan atau mengoperasikan perangkat computer, dalam hal ini, brainware adalah manusia.

Jenis brainware berdasarkan tugasnya:

Operator Administrator Teknisi

Programmer Sistem Analyst

[X-3.1.b.] Memahami Model OSI layer

OSI Layer: (Open System Interconnection) Susunan atau kerangka jaringan yang di implementasikan melalui protokol jaringan dalam 7 lapisan berbeda. 7 lapisan tersebut adalah:

1. Physcal : Merupakan laipsan yang berhubungan dengan fisik2. Data Link : Merupakan salah satu layer yang penting karena memiliki banyak

fungsi3. Network : Untuk membantu mendefinisikan alamat IP sehingga tiap komputer

dapat terhubung4. Transport : Merupakan lapisan OSI yang memiliki tugas sebagai pengantar5. Session : Untuk mendefinisikan bagaimana sebuah koneksi dapat di bangun6. Presentation : Mentranslate data yang akan ditransmisikan dari dan menuju

sebuah App7. Application : Merupakan lapisan yang pertama pada saat sebuah data mulai di

transfer, dan merupakan lapisan terakhir yang dilewati begitu komputer client menerima data tersebut

OSI ditetapkan oleh badan International Standart Organization (ISO)

[X-4.1.] Menggambar Model OSI layer dalam 7 lapisan

OSI Model

Data Application

Data Presentation

Data Session

Segments Transport

Packets Network

Frames Data link

Bits Physical

[X-3.2.] Mengenal jaringan komputer lebih teknis.

Pengertian jaringan komputer secara teknis

Jaringan komputer (jaringan) adalah jaringan telekomunikasi yang memungkinkan antar komputer untuk saling berkomunikasi dengan bertukar data. Tujuan dari jaringan komputer adalah agar dapat mencapai tujuannya, setiap bagian dari jaringan komputer dapat meminta dan memberikan layanan (service). Pihak yang meminta/menerima layanan disebut klien (client) dan yang memberikan/mengirim layanan disebut peladen (server). Desain ini disebut dengan sistem client-server, dan digunakan pada hampir seluruh aplikasi jaringan komputer.

Dua buah komputer yang masing-masing memiliki sebuah kartu jaringan, kemudian dihubungkan melalui kabel maupun nirkabel sebagai medium transmisi data, dan terdapat perangkat lunak sistem operasi jaringan akan membentuk sebuah jaringan komputer yang sederhana. Apabila ingin membuat jaringan komputer yang lebih luas lagi jangkauannya, maka diperlukan peralatan tambahan seperti Hub, Bridge, Switch, Router, Gateway sebagai peralatan interkoneksinya.

[X-4.2.a.] Menjelaskan komponen jaringan dan mekanisme yang terjadi dalam sebuah jaringan.

Jaringan Komputer1. Berdasarkan geografisnya, jaringan komputer terbagi menjadi Jaringan area

lokal atau Local Area Network (LAN), Jaringan area metropolitan atau Metropolitan Area Network (MAN), dan Jaringan area luas atau Wide Area Network (WAN).

Jaringan area lokal merupakan jaringan milik pribadi di dalam sebuah gedung atau tempat yang berukuran sampai beberapa 1 - 10 kilometer. LAN sering kali digunakan untuk menghubungkan komputer-komputer pribadi dan stasiun kerja (workstation) dalam kantor suatu perusahaan atau pabrik-pabrik untuk memakai bersama sumberdaya (misalnya pencetak (printer) dan saling bertukar informasi.

Sedangkan Jaringan area metropolitan merupakan perluasan jaringan LAN sehingga mencakup satu kota yang cukup luas, terdiri atas puluhan gedung yang berjarak 10 - 50 kilometer. Kabel transmisi yang digunakan adalah kabel serat optik (Fiber Optic).

Jaringan area luas Merupakan jaringan antarkota, antar propinsi, antar negara, bahkan antar benua. Jaraknya bisa mencakup seluruh dunia, misalnya jaringan yang menghubungkan semua bank di Indonesia, atau jaringan yang menghubungkan semua kantor Perwakilan Indonesia di seluruh dunia. Media transmisi utama adalah komunikasi lewat satelit, tetapi banyak yang mengandalkan koneksi serat optik antar negara.2. Berdasarkan fungsi, terbagi menjadi Jaringan Klien-server (Client-server)

dan Jaringan Ujung ke ujung (Peer-to-peer). Jaringan klien-server pada dasarnya ada satu komputer yang disiapkan

menjadi peladen (server) dari komputer lainnya yang sebagai klien (client). Semua permintaan layanan sumberdaya dari komputer klien harus dilewatkan ke komputer peladen, komputer peladen ini yang akan mengatur pelayanannya. Apabila komunikasi permintaan layanan sangat sibuk bahkan bisa disiapkan lebih dari satu komputer menjadi peladen, sehingga ada pembagian tugas, misalnya file-server, print-server, database server dan sebagainya. Tentu saja konfigurasi komputer peladen biasanya lebih dari konfigurasi komputer klien baik dari segi kapasitas memori, kapasitas cakram keras {harddisk), maupun kecepatan prosessornya.

Sedangkan jaringan ujung ke ujung itu ditunjukkan dengan komputer-komputer saling mendukung, sehingga setiap komputer dapat meminta pemakaian bersama sumberdaya dari komputer lainnya, demikian pula harus siap melayani permintaan dari komputer lainnya. Model jaringan ini biasanya hanya bisa diterapkan pada jumlah komputer yang tidak terlalu banyak, maksimum 25, karena komunikasi akan menjadi rumit dan macet bilamana komputer terlalu banyak.

3. Berdasarkan topologi jaringan, jaringan komputer dapat dibedakan atas:1. Topologi bus2. Topologi bintang3. Topologi cincin4. Topologi mesh5. Topologi pohon6. Topologi linier

4. Berdasarkan distribusi sumber informasi/data1. Jaringan terpusat

Jaringan ini terdiri dari komputer klien dan peladen yang mana komputer klien yang berfungsi sebagai perantara untuk mengakses sumber informasi/data yang berasal dari satu komputer peladen.

2. Jaringan terdistribusi

Merupakan perpaduan beberapa jaringan terpusat sehingga terdapat beberapa komputer peladen yang saling berhubungan dengan klien membentuk sistem jaringan tertentu.

5. Berdasarkan media transmisi data1. Jaringan berkabel (Wired Network)

Pada jaringan ini, untuk menghubungkan satu komputer dengan komputer lain diperlukan penghubung berupa kabel jaringan. Kabel jaringan berfungsi untuk mengirim informasi dalam bentuk sinyal listrik antar komputer jaringan.

2. Jaringan nirkabel(Wi-Fi)

Merupakan jaringan dengan medium berupa gelombang elektromagnetik. Pada jaringan ini tidak diperlukan kabel untuk menghubungkan antar komputer karena menggunakan gelombang elektromagnetik yang akan mengirimkan sinyal informasi antar komputer jaringan.

X-4.2.B. MENJELASKAN JENIS-JENIS JARINGAN KOMPUTER

JENIS- JENIS JARINGAN KOMPUTER BERDASARKAN

A. Jangkauan LAN (Local Area Network)

Sebuah Jaringan area lokal adalah jaringan komputer yang menyambungkan komputer dalam area terbatas (satu tempat) seperti tempat tinggal, sekolah, laboratorium, kampus universitas, atau gedung kantor.

MAN (Metropolitan Area Network)Jaringan area metropolitan adalah suatu jaringan dalam suatu kota dengan transfer data berkecepatan tinggi, yang menghubungkan berbagai lokasi seperti kampus, perkantoran, pemerintahan, dan sebagainya.

WAN (Wide Area Network)

Jaringan area luas merupakan jaringan komputer yang mencakup area yang besar sebagai contoh yaitu jaringan komputer antar wilayah, kota atau bahkan negara, atau dapat didefinisikan juga sebagai jaringan komputer yang membutuhkan router dan saluran komunikasi publik.

Rincian

B. Peranan/Hubungan

Client – ServerTerdiri dari komputer server dan komputer client yang saling terhubung. Komputer server berperan untuk menyediakan sumber daya, sedangkan komputer client hanya dapat menggunakan sumber daya data tersebut.

Peer to PeerPada jaringan ini baik komputer server maupun client memiliki kedudukan yang sama, artinya client dapat menjadi server dan sebaliknya.

C. Media Transmisi

Wired (Dengan kabel) : Kabel tembaga, koaksial, Fiber Optik, dsb.

Wireless (Tanpa Kabel) : WiFi, bluetoorh, satelite, komunikasi radio, dsb.

D. Topologi Jaringan Topologi Bus Topologi Star Topologi Ring Topologi Mesh Topologi Tree

X-3.3.A. MENGENAL PEMROGRAMAN WEB DASAR

Konsep web

World Wide Web ("WWW", atau singkatnya"Web") adalah suatu ruang informasi dimana sumber-sumber daya yang berguna diidentifikasi oleh pengenal global yang disebut Uniform Resource Identifier (URI) atau lebih spesifik lagi URL. WWW sering dianggap sama dengan Internet secara keseluruhan, walaupun sebenarnya ia hanyalah bagian dari padanya.

Hiperteks dapat dilihat dengan sebuah program bernama web browser yang mengambil informasi (disebut "dokumen" atau “halamanweb") dari server web dan menampilkannya, disebuah monitor. kemudian kita dapat mengikuti navigasi disetiap halaman untuk pindah ke dokumen lain atau bahkan mengirim informasi kembali kepada server untuk berinteraksi dengannya.

URIPengidentifikasi Sumber Seragam adalah sebuah untaian karakter yang digunakan untuk mengidentifikasi nama, sumber, atau layanan di Internet

URLLokator Sumber Seragam, yang juga dikenal dengan Uniform Resource Locator, adalah rangkaian karakter menurut suatu format standar tertentu, yang digunakan untuk menunjukkan alamat suatu sumber seperti dokumen dan gambar di Internet. URL merupakan suatu inovasi dasar bagi perkembangan sejarah Internet

Konsep pemrograman web

Pemrograman web: membuat aplikasi berbasis web

Aplikasi berbasis web: Aplikasi yang dibuat dengan memanfaatkan mekanisme dan aplikasi yang sudah ada pada sistem web (WWW)

Sistem web sebenarnya merupakan aplikasi yang :

Berarsitektur client-server

software web browser, disisi client

software web server, disisi server

Menggunakan protokol HTTP / HTTPS dalam komunikasi antara client dan server

Mempunyai fungsi untuk mengambil/menjalankan isi file dokumen web di server dan menampilkannya di sisi client

Membuat aplikasi pemrograman web berarti :

Memperkaya fungsi web server dengan menambahkan program pada dokumen web yang akan diakses oleh server

Memperkaya interaktif dokumen dengan cara menambahkan program pada dokumen web yang akan dieksekusi oleh client

Kelebihan dan Kekurangan aplikasi berbasis web

Kelebihan:

Dapat diakses kapanpun dan dari manapun selama ada internet

Dapat diakses hanya dengan menggunakan web browser (umumnya sudah tersedia di PC, Tablet dan smartphone), tidak perlu menginstall aplikasi client khusus

Kekurangan:

Antar muka yang dapat dibuat harus disesuaikan spesifikasi standar untuk membuat dokumen web dan keterbatasan kemampuan web browser untuk menampilkannya

Terbatasnya kecepatan internet mungkin membuat respon aplikasi menjadi lambat

Arsitektur Web

Bagaimana sebuah web bekerja ?

1. pengguna mengetik URL di browser

2. browser menghubungi server yang tersebut pada URL

3. Setelah terhubung, browser mengirimkan HTTP / HTTPS request

4. server menjawab dengan mengirim HTTP / HTTPS response (berisi header dan isi dokumen)

5. Untuk dokumen yang terdiri atas beberapa file (misalnya dokumen bergambar), browser harus mengirimkan HTTP request lagi untuk setiap file

6. browser menampilkan semua isi dokumen kepada user

Yang perlu dipelajari

Disisi client:

Sintaks pembuatan dokumen web (HTML & CSS)

Client side scripting (JavaScript)

Disisi server

Mekanisme pemanggilan program dan pengambilan output program oleh web server (CGI)

Server side scripting (PHP, JSP, ASP, dll. Untuk contoh: PHP)

Penghubung

Sintaks pengalamatan dokumen web (URL)

Protokol komunikasi (HTTP)

Media penyimpanan data (Program Basis data)

Databases (MYSQL, POSTGRESQL, dll. Untuk contoh: MYSQL )

Client side programming

Jenis bahasa pemrograman yang script/program tersebut akan diproses di dalam sisi client sendiri.

Bahasa client side programming

1. HTML

2. CSS

3. JavaScript

4. XML

Kelebihan : Mudah untuk dipelajari dan digunakan, artinya untuk memepelajari Client Side Scripting

cuku mudah. Tidak membutuhkan pengetahuan pemrograman yang tinggi atau pengelaman

pemrograman yang cukup ahli.

Perubahan dan pemrosesan kode programnya lebih cepat karena dilakukan langsung di sisi client/komputer host tanpa perlu melakukan proses di sisi server melalui jaringan internet.

Mampu menampikan layout dan design halaman web yang lebih interaktif dan user friendly. User dapat berinteraksi dengan halaman web melalui form isian yang dis sediakan.

Kekurangan : Kode programnya dapat di lihat melalui browser, sehingga dapat di katakan tidak aman

jika konteksnya adalah ingin melindungi kode sumbernya dari pihak lain. Melalui menu view page source yang ada di browser, maka user dapat malihat kode sumber dari dokumen web tersebut di internet.

Karena pemrosesannya dilakukan si sisi client host maka semua sumber daya yang ada di komputer host tersebut (memory,CPU Usage) akan di gunakan secara maksimal. Hal ini mengakibatkan client side scripting sangat tergantung pada spesifikasi komputer host (machine dependent). Maksudnya, jika spesifikasi komputer host rendah (memory, CPU, Storage media) Maka dokumen web yang menggunakan client side scripting akan lambat di proses. Sebaliknya jika spesifikasi komputer hos tinggi maka pemrosesannya dokumen web akan cepat.

Masalah kompatibilitas web browser menjadi isu yang perlu di perhatikan. Kerena beberapa web browser menggunakan web engine yang berbeda maka ada kemungkinan client side scripting akan di terjemahkan berbeda oleh masing-masing web browser tersebut. Jadi, sangat disarankan agar dokumen web yang di bat menggunakan client side scripting di uji coba lebih dulu di web browser yang populer.

Server side programming

Jenis bahasa pemrograman yang nantinya script/program tersebut akan dijalankan oleh server. Selanjutnya hasil pengolahan script/program tersebut akan dikirim ke client sebagai output.

Bahasa Server Side Programming

1. PHP ( yang akan kita pelajari)

2. ASP

3. JSP

4. JAVASCRIPT (NODE.JS)

5. DLL

Kelebihan :

Aman, Hal ini karena kode sumber server side scripting di simpan di web server yang ada di sisi server, sehingga user/pengunjung tidak dapat meluhat kode sumber server

side scripting dari sisi client/web browser. Hal ini berbeda dengan client side scripting yang dapat di lihat kode sumbernya dari sisi web bwoser.

Menimimalkan trafic di jaringan. Pada saat user melakukan request ke server maka yang di kirimkan ke user adalah hasil pemrosesannya saja. Karena pemrosesan dokumennya sudah di lakukan di sisi server, maka data yang mengalir dari client ke server atau sebaliknya adalah relatif kecil dan tidak membebani bandwith di jaringan.

Pemrosesannya lebih cepat karena spesifikasi hardware untuk mesin server biasanya lebih tinggi (bisa menjadi kelemahan juga)

Mampu mendukung banyak program basis data/database management system (DBMS)

Mampu mengelola sumber daya yang ada di komputer baik perangkat keras maupun perangkat lunak lainnya.

Mampu di jalankan di semua sistem operasi ( cross platform).

Tidak bergantung pada jenis web browser yang akan di gunakan, karena semua script di kelola di sisi server/web server.

Kekurangan :

Karena semua pemrosesan dilakukan di sisi server maka dibutuhkan spesifikasi komputer server yang cukup tinggi agar dapat memproses server side scripting secara tepat. Karena itu di butuhkan investasi yang tidak sedikit untuk pengadaannya.

Dibutuhkan kemampuan pemrograman yang baik untuk mempelajari server side scripting

Tidak memiliki kemampuan untuk membuat layout/desain halaman web yang menarik

WEB SERVER

WEB SERVER adalah sebuah perangkat lunak server yang berfungsi menerima permintaan HTTP atau HTTPS dari klien yang dikenal dengan web b rowser dan mengirimkan kembali hasilnya dalam bentuk halaman-halaman web yang umumnya berbentuk dokumen HTML.

Web Server yang terkenal diantaranya adalah Apache dan Microsoft Internet Information Service (IIS).

Apache merupakan web server antar -platform , sedangkan IIS hanya dapat beroperasi di sistem operasi Windows.

Web Server juga dapat berarti komputer yang berfungsi seperti definisi di atas.

X-3.3.B. MENGENAL STRUKTUR DAN TAG HTML DASAR

Struktur Dasar HTML

Setiap halaman HTML setidaknya memiliki struktur dasar yang terdiri dari :

Tag DTD atau DOCTYPE, tag html, tag head, dan tag body. Inilah yang merupakan

struktur paling dasar dari HTML, walaupun HTML tidak hanya berisi struktur tersebut.

Agar lebih mudah memahaminya, silahkan buka text editor (Notepad++), lalu ketikkan

kode berikut ini:

Contoh struktur dasar HTML:

1

2

3

4

5

6

7

8

9

<!DOCTYPE html>

  <html>

  <head>

    <title>Title dari Websiteku</title>

  </head>

<body>

   <p>Selamat Pagi Dunia, Hello World!</p>

</body>

</html>

Save sebagai halaman.html dan jalankan file dengan cara double klik file tersebut,

atau klik kanan –> Open With –> Firefox. Kita akan membahas tag-tag yang ditulis

tersebut pada tutorial kali ini.

Pengertian DTD atau DOCTYPE

Tag paling awal dari contoh HTML diatas adalah DTD atau DOCTYPE. DTD adalah

singkatan dari Document Type Declaration. Yang berfungsi untuk memberi tahu kepada

web browser bahwa dokumen yang akan diproses adalah HTML.

DTD memiliki banyak versi tergantung kepada versi HTML yang digunakan. Pada

contoh diatas, saya menggunakan DTD versi HTML 5. Sebelum HTML 5, DTD terdiri

dari text panjang yang hampir mustahil dihafal. Contohnya, DTD untuk xHTML

1.0 adalah:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Jika kita tidak menuliskan DTD, browser akan tetap menampilkan dan memproses

halaman web kita seperti tidak terjadi apa-apa. Namun browser sebenarnya

menjalankan halaman HTML tersebut pada mode khusus yang disebut quirk mode.

Pada quirk mode, web browser menerjemahkan halaman web (terutama kode CSS)

sedikit berbeda dari seharusnya. Ini karena web browser menganggap bahwa ketika

DTD tidak ditemuka, halaman tersebut kemungkinan besar merupakan halaman web

usang. Agar halaman ‘usang’ ini tetap tampil baik, web browser perlu menggunakan

aturan-aturan yang berbeda, yakni: quirk mode.

Cara untuk mengetahui apakah web browser berjalan pada quirk mode atau standard

mode lebih mudah jika menggunakan web browser Mozilla Firefox. Pada Firefox, klik

kanan pada halaman web, lalu pilih Page Info. Pada bagian Render Mode akan terlihat

apakah quirk mode, atau standard mode.

Tag <html>

Setelah DTD, tag berikutnya adalah tag <html>.

Ini adalah tag pembuka dari keseluruhan halaman web. Semua kode HTML harus

berada di dalam tag ini. Tag html dimulai dengan <html> dan diakhiri dengan </html>

Tag <head>

Elemen pada tag <head> umumnya akan berisi berbagai definisi halaman, seperti

kode CSS, JavaScript, dan kode-kode lainnya yang tidak tampil di browser.

Tag <title> dalam contoh kita sebelumnya digunakan untuk menampilkan title dari

sebuah halaman web. Title ini biasanya ditampilkan pada bagian paling atas web

browser. Contohnya pada tampilan halaman.html, ‘Title dari Websiteku’ akan

ditampilkan pada tab browser.

Tag <body>

Tag <body> akan berisi semua elemen yang akan tampil dalam halaman web, seperti

paragraf, tabel, link, gambar, dll. Tag body ini ditutup dengan </body>. Sebagian besar

waktu kita dalam merancang web akan dihabiskan di dalam tag <body> ini.

Perhatikan bahwa setiap tag akan diakhiri dengan penutup tag. Termasuk <html> yang

merupakan tag paling awal dari sebuah halaman web.

X-3.3.c. Mengenal struktur dan script dasar CSS

Definsi CSS Cascading Style Sheets (CSS) adalah suatu teknologi yang digunakan untuk

memperindah halaman website (situs), dengan CSS kita dapat dengan mudah mengubah keseluruhan warna dan tampilan yg ada di situs kita sekaligus memformat ulang situs kita.

CSS ini telah distandarkan oleh World Wide Web Consortium (W3C) untuk digunakan di web browser.

Keuntungan CSS Dapat di-update dengan cepat dan mudah, karena kita cukup mendefinisikan

sebuah style-sheet global yang berisi aturan- aturan CSS tersebut untuk diterapakan pada seluruh dokumen- dokumen HTML pada halaman situs kita.

User yang berbeda dapat mempunyai style-sheet yg berbeda pula. Ukuran dan kompleksitas document code dapat diperkecil.

Cascading Style Sheets (CSS)Sebuah style sheet terdiri dari beberapa aturan (rules). Masing- masing aturan terdiri dari satu atau lebih selektor (selector) dan sebuah blok deklarasi (declaration block). Sebuah blok deklarasi terdiri dari beberapa deklarasi yang dipisahkan oleh titik koma (;). Masing-masing deklarasi terdiri dari property, titik dua (:) dan nilai (value).

Contoh:<STYLE TYPPE=”text/css”> I, U { color:red } B { color:green; text-decoration:underline; font-family:Arial }</STYLE>

Keterangan:Merah: rulesCoklat: selectorBiru: declaration blok

CSS: Font Property

FontSyntax:

font: <value>Possible Values: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-

height> ]? <font-family>Contoh:

P { font: italic bold 12pt/14pt Times, serif }

Font Size

Syntax:font-size: <value>

Possible Values: <absolute-size>|<relative-size> |<length>| <percentage>• <absolute-size>:xx-small | x-small |small|medium| large|x-large | xx-

large• <relative-size> : larger | smaller• <percentage> (in relation to parent element)

Font Style

Syntax: font-style: <value>Possible Values: normal | italic | oblique

Font VariantSyntax: font-variant: <value>Possible Values: normal | small-caps

Font WeightSyntax: font-weight: <value>Possible Values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Contoh(i)Before:

After:

(ii)

Before:

After:

CSS: Color & Background Property Color

Syntax: color: <color>Nilai (value) dari color adalah sebuah keyword atau sebuah kode RGB.

16 keyword diambil dari palette Windows VGA: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.Ada 4 cara dalam menuliskan warna menggunakan kode RGB:

#rrggbb (e.g., #00cc00) #rgb (e.g., #0c0)rgb(x,x,x) dimana x adalah integer antara 0 dan 255 (e.g., rgb(0,204,0)) rgb(y%,y%,y%) dimana y adalah nomor antara 0.0 dan 100.0 (e.g., rgb(0%,80%,0%))

Background Color

Syntax: background-color: <value>Possible Values: <color> | transparent

Background

Syntax: background: <value>Possible Values: <background-color> || <background-image> || <backgroundrepeat>|| <background-attachment> || <background-position>

ContohBefore:

After:

CSS: Text Alignment & Box Property Text Alignment

Syntax: text-align: <value>Possible Values: left | right | center | justify

Box Properties Bottom Border Width

Syntax: border-bottom-width: <value>

BG color Hijau

BG color Sesuai BG color body

BG color ungu

Possible Values: thin | medium | thick | <length>

Width

Syntax: width: <value>Possible Values: <length> | <percentage> | auto

HeightSyntax: height: <value>Possible Values: <length> | auto

Border StyleSyntax: border-style: <value>Possible Values: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}

Contoh(i)Before:

After:

(ii)Before :

After:

CSS: Style Sheet Eksternal Pendefinisian style dapat dilakukan pada berkas tersendiri. Cara seperti ini

memungkinkan definisi style dapat digunakan di beberapa berkas HTML. Untuk menggunakan style eksternal , bisa digunakan tag<LINK>. Contoh:

Before:

After:

X-3.3.D. MENGENAL PEMROGRAMAN JAVASCRIPT

A. Pengertian JavaScript JavaScript adalah bahasa pemrograman yang digunakan untuk membuat sebuah

halaman web yang dinamis dan interaktif. javaScript adalah bahasa pemrograman web di sisi klien, yang berarti kode tersebut

dijalankan di browser web pengguna. JavaScript merupakan pemrograman web paling populer yang digubakan pada

browser (client-side) yang dapat memanipulasi HTML dan data Sekarang ini JavaScript berkembang sampai server-side seperti Node.Js Sebelum belajar tentang JavaScript harus mengetahui dasar-dasar HTML dan CSS

B. Kegunaan JavaScript Untuk mengubah konten HTML dan atribut Untuk mengubah CSS Dapat memvalidasi data Dapat mengambil data eksternal seperti API Dapat membuat aplikasi sampai game di browser Dapat membuat website interaktif Library JavaScript sangat banyak dikembangkan seperti jQuery Dan lain sebagainya

C. Contoh Javascript Slider galeri website Pencarian google Kolom cari Facebook Update tweet Twitter Game web HTML Dan lainnya

D. JavaScript pada HTML1. JavaScript dapat ditempatkan di <body> dan <head>2. Code JavaScript ditempatkan pada tag <script>

E. Penempatan JavaScript1. JacvaScript bisa ditempatkan di file eksternal .js dipanggil dengan <script src=””>

</script>2. javaScript bisa dipanggil fungsinya dengan atribut event HTML

F. Membuat variabel-deklarasi-string JavaScript Variabel adalah suatu yang bersikap berubah-ubah dann tidak tetap Dalam pemrograman, bisa dikatakan bahwa pengenal yang mempunyai nilai tetap

atau berubah-uabh selama pemrograman Variabel adalh container yang menyimpan data Syntax

Var namavariable = nilai; var a = 8; var b = 10; var c = a + b;

Variabel a menyimpan nilai 8, b menyimpan nilai 10, c menyimpan nilai 18

Identifier Semua nama variabel JavaScript harus mempunyai nama yang unik Nama unik itu disebut dengan pengenal Pengenal dapat menggunakan nama pendek (mis: x) atau lebih deskriptif (mis:

totalHarga) Pengenal dapat berisi angka, huruf, garis bawah, dann dollar Pengenal harus dimulai dengan huruf Pengenal bisa juga dimulai dengan $ dan _ Pengenal bersifat case-sensitive (x dan X -> variabel beda) Kata kunci (reserved) tidak bisa digunakan (mis: javascript)

Assignment operator Dalam JavaScript, tanda (=) adalah operator penugasan, bukan sama dengan

(tidak seperti dalam aljabar matematika) a = a + 10; menghitung nilai a ditambah 10 lalu menempatkan hasil perhitungan dalam a

Nomor dan teks JavaScript dapat menangani variabel untuk menyimpan nomor (number) seperti

2000 atau nilai teks (string) seperti “Surabaya” string ditulis dalam tanda kutip ganda atau tunggal. Nomor ditulis tanpa tanda

kutip. Jika menempatkan nomor dalam tanda kutip, akan diperlakukan sebagai string

Deklarasi var namaDepan; (tidak terdefinisi) var umur = 24; (terdefinisi) (re-deklarasi) namaDepan = “Sofyan” (terdefinisi) Output

Document.getElementByld(“contoh”).innerHTML = carName Satu statement banyak variabel

var nama = “Sofyan”, alamat = “Malang”, umur = 24; var nama = “Sofyan” alamat = “Malang” umur = 24;

Aritmatika sederhana Dengan operator ( = ) dan ( + ) var a = 10 + 8 + 2; var nama = “Sofyan” + “ “ + “Setiawan”; var b = “10” + 8 + 2; (String bersambung) var c = 8 + 2 + “10”; (penjumlahan lalu tambah string)

X-3.3.e. Mengenal Domain, Sub Domain, Hosting dan VPS

A. Domain Domain adalah alamat yang akan mengantarkan Anda ke website yang akan dituju.

Atau nama unik yang diberikan untuk mengidentifikasi server komputer agar lebih mudah diingat daripada menggunakan IP (Internet Protokol) address.

Pada dasarnya, domain merupakan bentuk sederhana dari alamat IP yang berupa kombinasi angka rumit. Dengan banyaknya website yang tersebar di internet, menghafalkan kombinasi angka tersebut tentu sangat sulit.

Fungsi domain merupakan alat untuk mengidentifikasi sebuah web hosting. Contoh domain, misalnya adalah niagahoster.co.id.

Niagahoster merupakan website yang ingin dituju, sementara .co.id merupakan ekstensi domain yang dipilih. Dengan nama domain, maka tidak perlu repot-repot mengecek alamat IP dari website yang ingin dituju.

Untuk memiliki nama domain sendiri, maka perlu mendaftarkan nama domain yang diinginkan tersebut. Domain akan terdaftar di organisasi bernama ICANN (Internet Corporation for Assigned Names and Numbers) yang menentukan ekstensi domain apa saja yang bisa digunakan.

Saat mendaftar domain, kita tidak bisa mendaftarkan nama domain yang sudah terdaftar. Setiap nama domain adalah nama unik, yang artinya tidak akan ada dua nama domain aktif yang sama persis.

Ekstensi Domain General – Top Level DomainEkstensi Domain G – TLD adalah ekstensi pada akhir nama domain universal yang digunakan di seluruh dunia, seperti .com, .net, .co, .biz, .org, .info

Ekstensi Domain Country Specific – Top Level DomainEkstensi domain TLD satu ini merupakan ekstensi domain yang dibuat khusus untuk masing – masing negara di seluruh dunia. Misal, ekstensi domain .uk untuk negara kawasan Britania Raya (United Kingdom), .sg untuk negara Singapura, .my untuk negara Malaysia dan .id untuk negara Republik Indonesia.Untuk ekstensi domain .id sendiri ada banyak macam sesuai kegunaannya, antara lain.

.id, .my.id, .web.id untuk website personal .co.id untuk website perusahaan .sch.id untuk website sekolah .ac.id untuk website universitas .or.id untuk website organisasi .go.id untuk website pemerintahan

B. Sub Domain Subdomain adalah bagian dari sebuah nama domain induk. Pada umumnya subdomain mengacu pada alamat fisik suatu situs misalmya domain-

anda.com adalah domain induk maka admin.domain-anda.com atau blog.domain-anda.com adalah subdomain.

Subdomain biasanya diletakan di depan domain induk yang dipisah dengan titik (dot). Subdomain merupakan Third Level Domain (domain tingkat ketiga) yang digunakan untuk mengatur isi situs suatu website. Subdomain berbeda dengan park domain.

Fungsi Sub Domain

Secara garis besar, fungsi subdomain adalah untuk membagi satu situs website menjadi beberapa bagian. Dengan adanya subdomain, maka Anda dapat membuat halaman baru namun tetap masih menggunakan nama domain yang sama.

C. Hosting Pengertian hosting atau web hosting adalah sebuah tempat di mana file dan data

yang diperlukan website disimpan serta dapat diakses dan dikelola melalui internet.  File website yang disimpan pada hosting berupa video, gambar, email, script,

aplikasi dan database. Jika ingin membuat website, maka langkah paling pertama yang harus dilakukan

adalah mencari perusahaan hosting yang menyediakan space server. Web host menyimpan semua file, aset, dan database pada server. Ketika seseorang mengetikkan nama domain ke kolom address browser, host akan mentransfer semua file yang dibutuhkan untuk menyelesaikan request.

Selain menyediakan server space untuk website, penyedia web hosting juga menawarkan layanan lain terkait manajemen website, seperti:

Sertifikat SSL (untuk mengamankan situs dengan menggunakan protokol https://)

Hosting email Page builder Tool developer Layanan bantuan pelanggan (bisa melalui live chat) Backup website yang otomatis One-click software install (misalnya, untuk WordPress atau Drupal)

Berikut contoh hosting yang sering digunakan: Shared Hosting VPS (Virtual Private Server) Hosting Cloud Hosting WordPress Hosting Dedicated Server Hosting

Perbedaan web hosting dengan nama domainWebsite hosting adalah space server untuk situs Anda, sedangkan domain merupakan alamat situs Anda – misalnya, nama domain kami adalah hostinger.co.id. Jika user ingin mengakses situs Anda, maka mereka akan mengetikkan nama domain ke kolom address browser. Server, kemudian, akan memindahkan konten yang diminta. Di sebagian besar web host, Anda harus membeli nama domain secara terpisah. Di sisi lain, jika sebelumnya Anda sudah memiliki nama domain, Anda dapat mentransfernya ke penyedia hosting saat ini. 

D. VPS VPS merupakan singkatan dari Virtual Private Server. VPS hosting adalah salah satu layanan hosting yang paling banyak digunakan untuk

mengonlinekan website.  Tipe hosting ini menggunakan teknologi virtualisasi yang menyediakan resourse

dedicated (pribadi) di server meskipun digunakan oleh lebih dari satu user. Fungsi VPS

Berikut fungsi VPS yang paling sering digunakan: Sebagai Server Website (Web Hosting)

Sebagai File Hosting Server Remote Desktop Layanan VPN Hosting Aplikasi Mesin Percobaan Backup Server Utama

Kelebihan VPS Lebih cepat dan andal daripada server shared hosting. Jaminan resource server, seperti memori atau processing power, sehingga

fluktuasi pada resource yang tersedia berkurang bahkan tidak ada. Masalah terkait website dan traffic yang terjadi di user lain tidak

memengaruhi situs Anda. Memperoleh akses superuser (root) ke server. Privasi lebih terjamin sebagaimana file dan database tersimpan serta

tersembunyi dari user server lain. Layanan yang mudah di-scale. Seiring dengan bertumbuh dan

berkembangnya website, bisa dengan mudah mengupgrade resource server (RAM, CPU, disk space, bandwidth, dan lain-lain).

Kekurangan VPS Lebih mahal daripada shared hosting. Mengharuskan untuk memiliki pemahaman teknis yang lebih agar dapat

mengelola server. Pengaturan server yang salah akan berisiko tinggi terhadap keamanan.

[X-4.3.a] Menulis script HTML

Elemen dasar HTMl

Elemen Bersarang Kamu bisa menempatkan satu elemen ke dalam elemen lain — istilah ini disebut nesting (persarangan). Kalau kita ingin buat penekanan bahwa kucing kita "very grumpy", kita bisa membungkus kata "very" ke dalam elemen <strong> untuk penekanan.

<p>My cat is <strong>very</strong> grumpy.</p>

Tapi kamu harus yakin bahwa elemen kamu benar-benar bersarang: contoh di atas kita buka elemen <p> dulu, lalu elemen <strong>, lalu kita tutup elemen <strong>, lalu elemen <p>. Contoh berikut ini tidak benar:

<p>My cat is <strong>very grumpy.</p></strong>

Elemen harus terbuka dan tertutup dengan benar sehingga mereka jelas berada di mana dari elemen lain. Kalau mereka tumpang-tindih seperti di atas, maka web browser kamu akan membuat tebakan terbaiknya pada apa yang ingin kamu utarakan, yang menyebabkan hasil ngawur. 

Elemen Kosong

Beberapa elemen tidak punya konten, dan disebut elemen kosong. Ambil elemen <img> yang sudah kita punya di HTML kita:

<img src="images/firefox-icon.png" alt="My test image">

Elemen ini mengandung 2 attribut, tapi tidak punya tag </img>, dan tidak punya konten. Ini karena elemen image tidak membungkus konten apapun. Tujuannya adalah mengembed image ke dalam halaman HTML di tempat di berada.

Anatomi Dokumen HTML

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body> <img src="images/firefox-icon.png" alt="My test image"> </body></html>

Di sini kita punya:

<!DOCTYPE html> — doctype. Zaman dulu, ketika HTML masih muda (sekitar 1991/2), doctypes berfungsi sebagai penghubung ke satu set aturan yang wajib diikuti halaman HTML supaya disebut halaman HTML yang baik, yang berarti error checking otomatis dan hal berfaedah lainnya. Tapi sekarang ini mereka sudah tidak terlau berguna dan hanya berfungsi sebagai penanda bahwa dokumen kamu bekerja dengan baik.

<html></html> — elemen <html>. Membungkus semua konten pada satu halaman utuh dan kadang disebut sebagai elemen root.

<head></head> — elemen <head>. Berguna sebagai wadah bagi semua hal yang kamu inginkan ke dalam halaman HTML yang bukan konten yang ditampilkan ke pengguna. Ini termasuk hal-hal semacam keywords dan deskripsi halaman yang akan kamu tampilkan dalam hasil pencarian, CSS untuk menggayakan konten kamu, deklarasi karakter set, dan lain sebagainya.

<meta charset="utf-8"> — elemen ini mengeset karakter set. Dokumen kamu sebaiknya mengguakan UTF-8 karena berisi karakter paling banyak dari seluruh bahasa di dunia. Prinsipnya dia bisa mengatasi konten tekstual apa saja di dalamnya. Tidak ada alasan untuk tidak menggunakan ini, dan dia bisa mencegah masalah lain yang timbul kemudian.

<title></title> — elemen <title>. Mengeset judul halaman kamu, yang tampil di browser tab di mana halaman ini diload. Juga digunakan untuk mendeskripsikan halaman ketika kamu membookmark/memfavoritkan halaman.

<body></body> — elemen <body>. Mengandung semua konten yang ingin kamu tunjukkan ke user, berupa teks, image, video, games, audio track, atau apapunlah.

Image

<img src="images/firefox-icon.png" alt="My test image">

Kode di atas mengembed image ke dalam halaman sesuai posisinya via artibut src, yang berisi path ke file image kita.

Kita juga telah memasukkan artibut alt (alternative). Dalam atribut ini, kamu menentukan teks deskriptif bagi user yang tidak bisa melihat image, yang mungkin karena:

1. User tunanetra. Mereka sering menggunakan tools pembaca screen untuk membaca semua semua alt text.

2. Sesuatu terjadi yang mengakibatkan image tidak tampil. Contohnya, coba sengaja ganti path di dalam atribut src menjadi salah. Kalau kamu simpan dan reload halaman, kamu akan melihat sesuatu seperti ini

Kata kunci ini mengandung semua "teks deskriptif". Teks alternatif yang kamu tulis sebaiknya menyediakan cukup informasi kepada pembaca tentang image tersebut. Di contoh ini, teks kita "My test image" tidak bagus. Alternatif lain yang jauh lebih baik untuk logo Firefox kita adalah "The Firefox logo: a flaming fox surrounding the Earth."

Menandai Teks

Headings

Elemen heading berfungsi menentukan bahwa bagian tertentu konten kamu berupa heading — atau subheading — dari konten kamu. Sama seperti buku yang punya judul utama, judul bab, dan subjudul, dokumen HTML juga begitu. HTML berisi 6 heading level, <h1>–<h6> meskipun kamu hanya menggunakan paling banyak 3–4:

<h1>My main title</h1><h2>My top level heading</h2><h3>My subheading</h3><h4>My sub-subheading</h4>

Paragraf

Seperti dijelaskan sebelumnya, elemen <p> berguna untuk wadah paragraf teks; kamu akan sering menggunakan ini ketika menandai konten teks reguler:

<p>This is a single paragraph</p>

Tambahkan sampel teks kamu (kamu pasti sudah punya dari What should your website look like?) ke dalam satu atau lebih paragraf, taruh langsung di bawah elemen <img> kamu.

List

Kebanyakan konten web adalah lists, dan HTML punya special elemen untuk ini. Penandaan list selalu mengandung paling sedikit 2 elemen. Tipe list paling umum adalah terurut and tak-terurut:

1. List tak-terurut ialah list yang urutan itemnya tidak penting, seperti daftar belanja. Ini dibungkus dalam elemen <ul>.

2. List terurut ialah list yang urutan itemnya penting, seperti resep. Ini dibungkus dalam elemen <ol>.

Tiap item dalam list ditaruh di dalam elemen <li> (item list). Contohnya, kalau kita ingin mengubah bagian dari fragmen paragraf berikut menjadi list:

<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>

Kita bisa memodifikasi markup ini menjadi:

<p>At Mozilla, we’re a global community of</p> <ul> <li>technologists</li> <li>thinkers</li> <li>builders</li>

</ul>

<p>working together ... </p>

Coba tambahkan suatu list terurut atau tak-terurut ke halaman contoh kamu.

Link

1. Pilih teks berikut. Kita pilih teks "Mozilla Manifesto".

2. Bungkus teks ke dalam elemen <a>, seperti ini:

<a>Mozilla Manifesto</a>

3. Berikan elemen <a> atribut href, seperti ini:

<a href="">Mozilla Manifesto</a>

4. Isi nilai atribut ini dengan alamat web yang ingin kamu link:

<a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

Kamu mungkin memperoleh hasil tak terduga jika kamu buang bagian https:// atau http://, disebut protocol, di awal alamat web. Setelah membuat link, klik untuk meyakinkan itu bekerja sebagaimana mestinya.

[X-4.3.b] Menulis script CSS menggunakan code editor

Font Property Font

Syntax : font : <value>Possible values : [<font-style> || <font-variant> || <font-weight> ] ? <font-size> [ / <line-height> ] ? <font-family> Contoh: P { font: italic bold 12pt/14pt Times, serif }

Font Property a. Font style

Syntax : font-style: <value>Possible values : normal | italic | oblique

b. Font Variant Syntax : font-variant: <value>Possible values : normal | small-caps

c. Font Weight Syntax : font-weight : <value>Possible Values : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600

Font Size Syntax : font-size: <value>Possible values : <absolute-size>|<relative-size>|<length>|<percentage>a. <absolute-size> : xx-small | x-small | small | medium | large | x-large | xx-large b. <relative-size> : larger | smaller c. <percentage> (di gubungkan dengan elemen induk)

Color & Background Property

Color Syntax : <color> Value : Nilai (value) dari color adalah sebuah keyword atau sebuah kode RGB.16 keyword diambil dari palette Windows VGA: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.Ada 4 cara dalam menuliskan warna menggunakan kode RGB:#rrggbb (e.g., #00cc00) #rgb (e.g., #0c0)rgb(x,x,x) dimana x adalah integer antara 0 dan 255 (e.g., rgb(0,204,0)) rgb(y%,y%,y%) dimana y adalah nomor antara 0.0 dan 100.0 (e.g., rgb(0%,80%,0%))

Background Color Syntax : background-color : <value>Possible values : <color> | <transparent>

Background Syntax : background : <value>Possible Values : <background-color> || <background-image> || <backgroundrepeat> || <background-attachment> || <background-position>

Text Alignment & Box Property

Text Alignment Syntax : text-align: <value>Possible Values : left | right | center | justify

Box Properties Bottom Border Width

BG color Hijau

BG color Sesuai BG color body

BG color ungu

Syntax : border-bottom-width: <value> Possible Values : thin | medium | thick | <length>

Width Syntax : width : <value>Possible values : <length> | <percentage> | auto

Height Syntax : heighth: <value>Possible values : <length> | auto

Border Style Syntax : border-style: <value>Possible values : [none | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4}

Style Sheet External

Pendefinisian style dapat dilakukan pada berkas tersendiri. Cara seperti ini memungkinkan definisi style dapat digunakan di beberapa berkas HTML

Untuk menggunakan style external, bisa digunakan tag <LINK>.

<title>css untuk tabel</title><style type = "text/css"><!--

th { font-weight : bold; background-color : blue; color : white;}

tr { background-color : silver; color : blue;}

--></style></head><body><table><tr><th>Kata</th><th>Arti</th></tr><tr><td>Blue</td><td>Biru</td></tr><tr><td>Green</td><td>Hijau</td></tr></table></body>

/* Berisi contoh definisi style

*/BODY { background-color: blue;

color: white; }.miring { font-style: italic; } #besar { font-size: 39pt; }

<HTML><HEAD><LINK REL = "STYLESHEET" TYPE ="text/css"

HREF = "styleku.css"></HEAD><TITLE>Contoh Style Eksternal</TITLE><BODY>Tes, tes, 123...

/* Berisi contoh definisi style

*/BODY { background-color: blue;

color: white; }.miring { font-style: italic; } #besar { font-size: 39pt; }

<HTML><HEAD><LINK REL = "STYLESHEET" TYPE ="text/css"

HREF = "styleku.css"></HEAD><TITLE>Contoh Style Eksternal</TITLE><BODY>Tes, tes, 123...

[X-4.3.c] Menulis Script Javascript

Variabel

merupakan wadah yang dapat anda beri nilai. Deklarasi variabel dimulai dengan dengan keyword var, diikuti nama yang diinginkan:

1| var myVariable;

Note : Semua baris di JS harus diakhiri dengan semi-colon (;), untuk menandakan akhir baris kode. Jika anda tidak menambahkanya, anda bisa mendapatkan hasil yang tidak diinginkan

Anda bisa memanggil variabel apa saja, tapi ada beberapa pembatasan

JavaScript sangat case sensitive — myVariable sangat berbeda dengan variabel myvariable. jika anda mendapatkan masalah pada kode anda, periksa huruf besar/kecil (casing)!

Setelah mendeklarasikan sebuah variabel, anda bisa menambahkan nilai:

1| myVariable = ‘Bob’ ;

Anda dapat mengambil nilai dengan memangil nama variabel:

1| myVariable ;

Anda bisa melakukan operasi ini dalam satu baris jika anda menginginkanya:

1| var myVariable = ‘Bob’ ;

Setelah memberikan nilai pada variabel, setelah itu anda bisa mengubah nilainya:

1| var myVariable = ‘Bob’ ;2| myVariable =’steve’ ;

Jadi kenapa kita memerlukan variabel? Baik, variable dibutuhkan dalam berbagai hal menarik di pemrograman. Jika nilainya tidak berubah, maka anda tidak dapat melakukan sesuatu hal yang bersifat dinamis, seperti menyesuaikan pesan salam ke pengunjung website anda, atau mengubah gambar yang tampil di galeri, dan masih banyak lagi.

Komentar

Anda dapat menambahkan komentar di kode Javascript, seperti halnya pada CSS. Di JavaScript, sebaris komentar ditulis seperti berikut:

Namun anda juga dapat menggunakan lebih dari satu baris komentar seperti yang  anda lakukan pada CSS:

Operator

operator pada dasarnya adalah simbol matematika yang bertindak atas dua nilai (atau variabel yang berisi nilai) dan menghasilkan nilai baru. Pada tabel dibawah anda bisa melihat beberapa operator yang sederhana, disertai contoh untuk anda coba di konsole browser.

Catatan: Mencampur tipe data akan memyebabkan hasil yang tidak kita duga ketika melakukan perhitungan, jadi hati - hati ketika memberikan nilai pada variabel pastikan memberikan nilai yang sesuai, dan mendapatkan hasil sesuai yang anda inginkan. Misalnya menuliskan "35" + "25" pada konsol. Kenapa anda tidak mendapatkan nilai yang anda inginkan? karena tanda kutip mengubah angka menjadi teks string — anda hanya mendapatkan nilai string yang digabungkan, dan bukan angka yang ditambahkan. Jika anda memasukkan 35 + 25, anda akan mendapatkan nilai yang sesuai.

Fungsi

Functions merupakan cara encapsulasi fungsi yang ingin anda gunakan kembali, jadi anda dapat memanggil dengan hanya sebuah nama fungsi, dan tidak harus menulis semua kodenya lagi setiap kali anda ingin menggunakannya kembali. Anda telah melihat beberapa fungsi diatas, seperti:

Fungsi ini merupakan built-in browser untuk anda gunakan kapanpun.

Jika anda melihat sesuatu yang mirip dengan nama variabel, tapi menggunakan tanda kurung — () — setelahnya, anda dapat memastikan bahwa itu adalah fungsi. Fungsi terkadang menggunakan arguments — bit data yang dibutuhkan untuk dapat menjalankan fungsinya. Argumen di tulis di dalam tanda kurung, dan dipisahkan dengan koma jika memiliki lebih dari satu argumen.

Misal, Fungsi alert() membuat kotak pop-up terlihat pada jendela browser, namun kita perlu membaerikan string sebagai sebuah argumen untuk mengatakan pada fungsi alert()pesan apa yang harus di tampilkan pada kotak po-pup.Berita bagusnya adalah kita dapat membuat fungsi anda sendiri — pada contoh berikut kita menulis sebuah fungsi sederhana dengan menggunakan dua argumen dan mengalikannya menjadi nilai baru:

Catatan: Statement return mengatakan pada browser untuk mengembalikan nilai variabel hasil keluar dari fungsi sehingga dapat digunakan. Hal ini diperlukan karena variabel yang didefinisikan di dalam blok kode atau cakupan fungsi hanya akan tersedia didalam fungsi itu sendiri. 

Events

Untuk membuat hal yang interaktif pada website, anda perlu menggunakan event — kode struktur ini mendengarkan setiap hal yang terjadi pada browser, dan kemudian memungkinkan anda menjalankan kode sebagai respon pada hal yang terjadi tersebut. Contoh yang paling terjadi adalah click event, dimana di suarakan oleh browser ketika mouse anda mengklik pada elemen seperti link, tombol atau yang lainnya. Untuk menunjukkannya, coba tambahkan kode berikut pada konsol anda, kemudian coba klik pada halaman web tersebut:

Banyak sekali cara untuk melampirkan event pada sebuah elemen; disini kita memilih elemen HTML dan membuat properti handler onclick yang sama dengan fungsi anonim (fungsi tanpa nama) yang berisi kode yang ingin kita jalankan ketika event terjadi.

Menambahkan Pengubah gambar

1. Pertama, cari gambar lain yang ingin anda gunakan di situs anda. Pastikan ukurannya sama dengan gambar pertama, atau kurang lebih sama.

2. Simpan gambar pada folder images anda.3. Pada file main.js , tuliskan kode JavaScript berikut (Jika kode Javascript hello

world masih disana, hapus saja):

4. Simpan semua file dan muat index.html di browser. Sekarang kita klik gambarnya, seharusnya berubah tampilannya menjadi gambar yang satunya

Menambahkan Pesan Selamat Datang Yang Dinamis

1. Pada index.html, Tambahkan baris berikut sebelum elemen <script>:

2. Pada main.js,  tambahkan kode berikut di bagian bawah file, persis seperti yang tertulis - ini mengacu pada tombol baru yang akan kita tambahkan, judulnya, dan simpan pada variabel:

3. Sekarang tambahkan fungsi berikut untuk mengatur ucapan yang dinamis - ini belum berinteraksi tapi nanti akan kita gunakan:

4. Selanjutnya, tambahkan blok if ... else — kita bisa memanggil kode inisialisasi, sebagai pengatur saat aplikasi pertama kali dimuat:

5. Terakhir, letakkan pengendali event di bawah onclick pada tombolnya, sehingga saat diklik fungsi setUserName() dijalankan. Hal ini memungkinkan pengguna untuk mengatur nama baru kapan pun mereka mau dengan menekan tombol: