Cara menggunakan program javascript sederhana

Question

Contoh Javascript - Banyak sekali contoh javascript yang bisa kita lihat di berbagai website, peran javascript pada halaman website adalah sebagai perilaku yang menyempurnakan tampilan dan sistem halaman web

Table of Contents Show

Contoh javascript sederhana di html
Contoh game javascript
Contoh kalkulator Javascript
Contoh form Javascript Data sign up/login
Bagaimana cara menjalankan JavaScript?
Apakah JavaScript cocok untuk pemula?
Aplikasi apa yang menggunakan JavaScript?
Di mana JavaScript biasanya digunakan?

Sebelum ke contoh, kalian harus tahu apa itu Javascript??? . HTML, CSS, dan JavaScript. Bahasa ini telah digunakan selama dua puluh tahun terakhir

Sumber. Pexels

Seperti yang sudah dijelaskan pada artikel sebelumnya dimana Javascrip merupakan salah satu dari tiga pemrograman dalam web. Javascript diibaratkan sebagai perilaku atau gerakan dari html (yang diibaratkan sebagai body)

Dan javascript digunakan dalam banyak hal, berikut adalah beberapa contoh program javascript di halaman utama web

Isi

Contoh javascript sederhana di html

Pertama, kami membuat file javascript (. js) dengan memasukkan kode di bawah ini menggunakan editor teks dan menyimpannya dengan nama program. js

var n = prompt("Masukan nama anda:");
var c = confirm("Hai "+n+"! Apakah hari ini kamu baca Quran?");
if (c == true) {
alert('Semoga tetap Istiqomah!!');
}else{
alert('Kenapa?!!');
}

Kedua, membuta file html dengan memasukan kode di bawah dan menyimpaknya dengan nama index.html. Kita memasukan script file program.js diantara tag

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="program.js"></script>
</head>
</html>

_

Contoh game javascript

dalam pembuatan kode javascript ini menggunakan library (library) javascript yang populer dikalangan pemrograman web yaitu JQuery. Dimana contoh ini menggabungkan HTML dan JQuery menjadi satu file yaitu. html, misalnya Anda dapat membuat file indeks. html di editor teks dengan memasukkan kode di bawah ini dan menyimpannya

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>----menghubungkan html dengan jquery (framework javascript)----</p>
<title>Membuat Game Snake Dengan HTML5 dan JQuery</title>

</head>

<body>

<canvas id="ruang" width="500" height="500"></canvas>

<script type="text/javascript">
$(document).ready(function() {

// deklarasi
var ruang = $("#ruang")[0];
var ctx = ruang.getContext("2d");
var lebar = $("#ruang").width();
var tinggi = $("#ruang").height();

var cw = 10;
var tekan ;
var makanan;
var nilai;

//membuat cell aray untuk membuat ular
var array_ular;

function init() {
tekan = "right"; //default direction
create_snake();
create_makanan(); //membuat makanan untuk ular
//nilai game
nilai = 0;

if (typeof game_loop != "undefined") clearInterval(game_loop);
game_loop = setInterval(paint, 60);
}

init();

// membuat ular
function create_snake() {
// menetapkan jumlah panjang awal ular
var length = 5; //panjang ular default
array_ular = [];
for (var i = length - 1; i >= 0; i--) {
//membuat ular horizontal mulai dari arah kiri
array_ular.push({ x: i, y: 0 });
}
}

//membuat makanan untuk ular
function create_makanan() {
makanan = {
x: Math.round(Math.random() * (lebar - cw) / cw),
y: Math.round(Math.random() * (tinggi - cw) / cw)
};
}

//pengaturan
function paint() {
// warna background
ctx.fillStyle = "#ecf0f1";
ctx.fillRect(0, 0, lebar, tinggi);
ctx.strokeStyle = "#2c3e50";
ctx.strokeRect(0, 0, lebar, tinggi);

//membuat pergerakan untuk ular
var nx = array_ular[0].x;
var ny = array_ular[0].y;
if (tekan == "right") nx++;
else if (tekan == "left") nx--;
else if (tekan == "up") ny--;
else if (tekan == "down") ny++;

//memeriksa tabrakan
if (
nx == -1 ||
nx == lebar / cw ||
ny == -1 ||
ny == tinggi / cw ||
cek_tabrakan(nx, ny, array_ular)
){

//restart game
init();
return;
}

//cek jika ular kena makanan/memakan makanan
if(nx == makanan.x && ny == makanan.y){

var ekor = { x: nx, y: ny };
nilai++;

//membuat makanan yang baru
create_makanan();

} else {
var ekor = array_ular.pop();
ekor.x = nx;
ekor.y = ny;
}

array_ular.unshift(ekor);

for (var i = 0; i < array_ular.length; i++) {
var c = array_ular[i];
paint_cell(c.x, c.y);
}

paint_cell(makanan.x, makanan.y);

//membuat penilaian skor
var nilai_text = "nilai: " + nilai;
ctx.fillText(nilai_text, 5, tinggi - 5);
}

function paint_cell(x, y) {
ctx.fillStyle = "#1abc9c";
ctx.fillRect(x * cw, y * cw, cw, cw);
ctx.strokeStyle = "#ecf0f1";
ctx.strokeRect(x * cw, y * cw, cw, cw);
}

function cek_tabrakan(x, y, array) {
for (var i = 0; i < array.length; i++) {
if (array[i].x == x && array[i].y == y) return true;
}
return false;
}

//kontrol ular dengan keyboard
$(document).keydown(function(e) {
var key = e.which;
if (key == "37" && tekan != "right") tekan = "left";
else if (key == "38" && tekan != "down") tekan = "up";
else if (key == "39" && tekan != "left") tekan = "right";
else if (key == "40" && tekan != "up") tekan = "down";
});
});

</script>

</body>
</html>

Contoh kalkulator Javascript

disini kita akan membuat contoh javascript untuk ditampilkan di halaman web, yang pertama kita buat folder di komputer kita tergantung lokasi dengan nama misalnya "Contoh Kalkulator"

Kita akan membuat tiga file utama dalam website yaitu html, css dan javascript, untuk membuat file tersebut anda bisa menggunakan text editor atau notepad yang ada, dan lain-lain.

Pertama, buat file CSS (. css) dengan memasukan kode dibawah ini dan simpan dengan nama style. css

table {
	border : none;
	border-collapse: collapse;
}
td{
	padding: 5px;
	border: none;
}
input[type=text]{
	padding: 10px;
	width: 410px;
	border-style: solid;
	text-align: right;
	font-size: 16px;
}
input[type=text]:disabled{
	background-color: white;
}
.btn {
	width: 100px;
	height: 40px;
	background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
}
.opr{
		background-color: #555555;
}
.clr{
	background-color: #f44336;;
}
.hsl{
	background-color: #008CBA;
}

Kedua, buat file javascript (. js) dengan memasukan kode dibawah ini dan disimpan dengan nama kalkulator. js

var bil1;
var bil2;
var hasil;
var opr;
var opr_seleksi = false;
function btn(angka) {
	var display = document.getElementById("output").value;
	if (display == "0") {
		display = angka;
	} else {
		display += angka;
	}
	document.getElementById("output").value = display;
}

function clr() {
	document.getElementById("output").value = "0";
	bil1 = 0;
	bil2 = 0;
	opr_seleksi = false;
}

function koma() {
	var display = document.getElementById("output").value;
	if (display.includes(".") == false) {
		display += ".";
	}
	document.getElementById("output").value = display;
}

function btn_opr(o) {
	opr_seleksi = true;
	bil1 = parseFloat(document.getElementById("output").value);
	opr = o;
	document.getElementById("output").value = "0";
}

function hitung() {
	if (opr_seleksi == true) {
		bil2 = parseFloat(document.getElementById("output").value);
		switch(opr){
			case 1 :
				hasil = bil1 * bil2;
				document.getElementById("output").value = hasil;
				break;
			case 2 :
				hasil = bil1 / bil2;
				document.getElementById("output").value = hasil;
				break;
			case 3 :
				hasil = bil1 - bil2;
				document.getElementById("output").value = hasil;
				break;
			case 4 :
				hasil = bil1 + bil2;
				document.getElementById("output").value = hasil;
				break;
		}
		opr_seleksi = false
		hasil = 0;
		bil1 = 0;
		bil2 = 0;
	}
}

_

Ketiga, buat file html (. html) dengan memasukan kode dibawah ini dan disimpan dengan nama index. html

<!DOCTYPE html>
<html>
<head>
	<title>Contoh Kalkulator</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<table>
		<tr>
			<td colspan="5">
				<input type="text" disabled id="output" value="0">
			</td>
		</tr>
		<tr>
			<td><button class="btn" onclick="btn('1')">1</button></td>
			<td><button class="btn" onclick="btn('2')">2</button></td>
			<td><button class="btn" onclick="btn('3')">3</button></td>
			<td><button class="btn opr" onclick="btn_opr(1)">*</button></td>
		</tr>
		<tr>
			<td><button class="btn" onclick="btn('4')">4</button></td>
			<td><button class="btn" onclick="btn('5')">5</button></td>
			<td><button class="btn" onclick="btn('6')">6</button></td>
			<td><button class="btn opr" onclick="btn_opr(2)">/</button></td>
		</tr>
		<tr>
			<td><button class="btn" onclick="btn('7')">7</button></td>
			<td><button class="btn" onclick="btn('8')">8</button></td>
			<td><button class="btn" onclick="btn('9')">9</button></td>
			<td><button class="btn opr" onclick="btn_opr(3)">-</button></td>
		</tr>
		<tr>
			<td><button class="btn" onclick="btn('0')">0</button></td>
			<td><button class="btn" onclick="koma()">.</button></td>
			<td><button class="btn clr" onclick="clr()">C</button></td>
			<td><button class="btn opr" onclick="btn_opr(4)">+</button></td>
		</tr>
		<tr>
			<td colspan="5"><button class="btn hsl" style="width: 100%" onclick="hitung()">=</button></td>
		</tr>
	</table>
	<script type="text/javascript" src="kalkulator.js"></script>
</body>
</html>

untuk melihat tampilannya anda bisa membuka file index. html di browser web yang Anda gunakan

Sama seperti diatas kita akan membuat folder yang berisi dua file utama yaitu file. html dan file. css, untuk javascript kita masukan di file. html

Pertama, kita membuat file html (. htm) dimana kode javascript ada di file ini dengan editor teks dan masukkan kode di bawah ini dan simpan dengan nama index. html

<html>
<head>
	<title>Membuat Form Validasi dengan Javascript - Belajar Web Programing</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<center><h2>Form Data Kamu!! Mohon Diisi Dengan Benar</h2></center>
	<div class="login">
		<form action="#" method="POST" onSubmit="validasi()">
			<div>
				<label>Nama Lengkap:</label>
				<input type="text" name="nama" id="nama" />
			</div>
			<div>
				<label>Email:</label>
				<input type="email" name="email" id="email" />
			</div>
			<div>
				<label>Alamat:</label>
				<textarea cols="40" rows="5" name="alamat" id="alamat"></textarea>
			</div>
			<div>
				<input type="submit" value="Daftar" class="tombol">
			</div>
		</form>
	</div>
</body>
<script type="text/javascript">
	function validasi() {
		var nama = document.getElementById("nama").value;
		var email = document.getElementById("email").value;
		var alamat = document.getElementById("alamat").value;
		if (nama != "" && email!="" && alamat !="") {
			return true;
		}else{
			alert('Anda harus mengisi data dengan lengkap !');
		}
	}
</script>
</html>/code>

_

untuk kode javascript dalam file. html kita warnai dengan merah .

Kedua, Buat file CSS (. css) dengan memasukkan kode di bawah ini dan menyimpannya dengan nama style. css

body {
  background: #3498db;
  font-family: sans-serif;
}

h2 {
  color: #fff;
}

.login {
  padding: 1em;
  margin: 2em auto;
  width: 17em;
  background: #fff;
  border-radius: 3px;
}

label {
  font-size: 10pt;
  color: #555;
}

input[type="text"],
input[type="email"],
textarea {
  padding: 8px;
  width: 95%;
  background: #efefef;
  border: 0;
  font-size: 10pt;
  margin: 6px 0px;
}

.tombol {
  background: #3498db;
  color: #fff;
  border: 0;
  padding: 5px 8px;
}

Anda juga dapat mempelajari video tutorial web pemrograman termasuk belajar pemrograman javascript, membahas framework javascript yang digunakan, dan lain-lain. Disampaikan oleh Sandikha Galih pada kanal Web Pemrograman UNPAS

Mohon maaf jika ada kesalahan dan kekeliruan, dan semoga artikel ini bisa menjadi informasi yang anda cari, dan semoga anda bisa lebih semangat dalam belajar Pemrograman Web. 😄😄😄

Bagaimana cara menjalankan JavaScript?

Aktifkan JavaScript di browser Anda .

Buka Chrome di komputer Anda

Klik. Pengaturan

Klik Keamanan dan Privasi

Klik Setelan situs

Klik JavaScript

Pilih Situs dapat menggunakan JavaScript

Apakah JavaScript cocok untuk pemula?

JavaScript adalah salah satu bahasa pemrograman terpopuler saat ini. Javascript ini memiliki banyak keunggulan yang membuatnya cocok untuk pemula . Untuk itu, mempelajari JavaScript sangat disarankan jika ingin membuat website.

Aplikasi apa yang menggunakan JavaScript?

Namun, sebelumnya Anda membutuhkan beberapa aplikasi berikut untuk mendukung Anda mempelajari Javascript. Browser web (Google Chrome, Firefox, atau lainnya). Editor teks (Atom, Notepad, atau lainnya). Web server, untuk menjalankan kode pemrograman .

Di mana JavaScript biasanya digunakan?

Saat ini JavaScript tidak hanya digunakan pada sisi client (browser). Sejak keberadaan Node. js JavaScript dapat digunakan di luar browser. Dengan begitu Anda dapat mengembangkan back-end (server), konsol, program desktop, seluler, IoT, game, dan lainnya menggunakan JavaScript .

kode javascript