 |
| Ngopo ndelok-ndelok? Ngiri po? |
Sorry yah kalau baca judulnya aja kamu dah kesinggung. Aku nggak bermaksud mau jelek-jelekin HTMl ma javaScript sih. Beneran le, nggak ada maksud buat jelek-jelekin. Aku di sini cuma mau nerangin aja nih kekurangan-kekurangan HTML ma javaScript supaya kita mau mencoba alternatifnya yang lebih unggul pastinya.
Langsung aja nih ya, kalau misalnya kita mau buat halaman HTML, apa yang akan kita ketikkan?
Tentu saja:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
Ribet ya? Nggak juga ah. Aku kan ngetiknya pake Zen Coding jadinya cepet, cuma ngetikin
html:5 aja :v
Terus masalahnya di mana? Ya belum kelihatan sih. Tapi coba deh kalau misalnya kita dah ngetik kode yang panjang kayak gini:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<link rel="stylesheet" href="materialize/css/materialize.css">
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<hr>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input type="text" id="namaDepan" class="validate">
<label for="namaDepan">nama depan</label>
</div>
<div class="input-field col s6">
<input type="text" id="namaBelakang" class="validate">
<label for="namaBelakang">nama belakang</label>
</div>
</div>
</form>
</div>
<h2 class="pesan">Hello World!</h2>
</div>
<script src="js/jquery.js"></script>
<script src="materialize/js/materialize.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Apa kesan kalian?
- Ribet
- Buset, panjang banget vroh
- Itu kalau error, baikinnya gimana tuh?
Yah, begitulah. Kelemahannya HTML yang paling utama tu karena harus ada tag pembuka dan tag penutup, maka kita harus kerja 2 kali. Fyuh, ribet bro.
Apalagi kalau misalnya dah ngetik panjang-panjang, eh ternyata banyak bagian yang harus dihapus dan diganti secara total.
Terus, gimana coba kalau misalnya sejak awal nggak ada indentasi (alias rata kiri semua)? Jadi pusing dah ni mata mau baikin yang mana :v
Ini Solusinya
Nah, buat ngatasin kelemahan-kelemahan dalam HTML ini, aku saranin kamu nyobain Jade. Nah, kalau kita pake Jade ni, kelemahan-kelemahan HTML di atas bisa dengan mudah diatasi. Misalnya aja, buat ngetikin kode di atas, berikut ini adalah source code-nya dalam bahasa Jade:
doctype html
html
head
meta(charset="utf-8")
title Hello World
include _style.jade
body
.container
h1 Hello World
hr
.row
form.col.s12
.row
.input-field.col.s6
input(type="text").validate#namaDepan
label(for="namaDepan") nama depan
.input-field.col.s6
input(type="text").validate#namaBelakang
label(for="namaBelakang") nama belakang
h2.pesan Hello World!
include _script.jade
_style.jade:
link(rel="stylesheet", href="materialize/css/materialize.css")
_script.jade:
script(src="js/jquery.js")
script(src="materialize/js/materialize.js")
script(src="js/script.js")
Gimana? Dah kelihatan banget kan bedanya? Udah gitu, kalau pake Jade ni, kalau ada yang salah-salah, bisa dengan sangat cepat diperbaiki. Wow banget nggak tuh?
Beberapa Masalah Pada JavaScript
 |
| Apaan tuh? |
Nah, kalau masalah pada javaScript ini, sebenarnya kurang begitu bermasalah sih. Soalnya:
- JavaScript itu bahasa pemrograman yang sangat gampang dan fleksibel. Jadi, jaraaaaang byanget ada orang yang ngetik javaScript terus nemuin error
- Karena bahasa javaScript ini sudah begitu familiar, perubahan sedikit pada syntax javaScript tentu saja sangat mempengaruhi pada efektifitas pemrograman front-end
Tapi, ketika aku nyobain coffeeScript, rasanya tu beda banget. Jadinya tu kita bisa compile javaScript dengan cepat dan tentu saja valid. Contohnya aja nih ya, aku pengen membuat syntax javaScript seperti di bawah ini:
// Generated by CoffeeScript 1.9.3
(function() {
$(function() {
return $("[type=text]").on("keyup", function() {
var dua, hasil, satu;
satu = $("#namaDepan").val();
dua = $("#namaBelakang").val();
hasil = "Hai " + satu + " " + dua + "!";
return $("h2.pesan").html(hasil);
});
});
}).call(this);
Aku bisa mengetik dengan cepat pake coffeeScript:
$ ->
$("[type=text]").on "keyup", ->
satu = $("#namaDepan").val()
dua = $("#namaBelakang").val()
hasil = "Hai #{satu} #{dua}!"
$("h2.pesan").html hasil
Beda banget kan jadinya? Kalau ngetik pake coffeeScript tu bisa lebih cepat dan lebih “bersih”.
Oh ya, termasuk kehebatan coffeeScript itu, kita bisa pake class. Pasti programmer OOP nggak asing nih :v . Misalnya aja dengan kode coffeeScript seperti ini:
class Animal
constructor: (@name) ->
move: (meters) ->
alert @name + " moved #{meters}m."
class Snake extends Animal
move: ->
alert "Slithering..."
super 5
class Horse extends Animal
move: ->
alert "Galloping..."
super 45
sam = new Snake "Sammy the Python"
tom = new Horse "Tommy the Palomino"
sam.move()
tom.move()
Bisa menghasilkan script yang luar biasa panjangnya:
var Animal, Horse, Snake, sam, tom,
extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
hasProp = {}.hasOwnProperty;
Animal = (function() {
function Animal(name) {
this.name = name;
}
Animal.prototype.move = function(meters) {
return alert(this.name + (" moved " + meters + "m."));
};
return Animal;
})();
Snake = (function(superClass) {
extend(Snake, superClass);
function Snake() {
return Snake.__super__.constructor.apply(this, arguments);
}
Snake.prototype.move = function() {
alert("Slithering...");
return Snake.__super__.move.call(this, 5);
};
return Snake;
})(Animal);
Horse = (function(superClass) {
extend(Horse, superClass);
function Horse() {
return Horse.__super__.constructor.apply(this, arguments);
}
Horse.prototype.move = function() {
alert("Galloping...");
return Horse.__super__.move.call(this, 45);
};
return Horse;
})(Animal);
sam = new Snake("Sammy the Python");
tom = new Horse("Tommy the Palomino");
sam.move();
tom.move();
Pusing ya? Udah deh yang penting udah pernah ngelihat :v
Download aplikasi android Muhammad Zaini DI SINI
Tidak ada komentar:
Posting Komentar