Salam sejahtera semua.

Pada kali ini saya akan menerangkan tentang penggunaan eq(), next(), prev(), nextAll() dan prevAll(). Kesemua kod tersebut tergolong dalam kategori traversing. Sebenarnya banyak kod yang perlu diketahui dalam kategori ini, buat masa ini saya akan terangkan sebahagian daripada kod tersebut. Takpe kita belajar slow2 yer

Eq()

Eq() adalah kod yang digunakan untuk memilih elemen berdasarkan kepada nilai index. Nilai asas bagi index ialah 0, bermakna ia merujuk kepada elemen yang pertama. Sintaks bagi kod ini ialah

Contoh

Berdasarkan kod berikut, saya ingin highlightkan warna teks ‘Link 2′ kepada warna Merah.

<ul id="menu">
	<li>Link 1</li>
	<li>Link 2</li>   <!-- warna teks Link 2 bertukar kepada warna merah -->
	<li>Link 3</li>
	<li>Link 4</li>
	<li>Link 5</li>
</ul>

Penyelesaian menggunakan Eq():

$('#menu li').eq(1).css('color','red');

Daripada kod diatas, ia merujuk terlebih dahulu kepada senarai elemen <li> yang terdapat pada <ul>
.Kemudian ia ditapis dengan mengistiharkan eq() dan meletakkan nilai index 1 untuk memilih elemen kedua daripada senarai <ul>.
Perlu diingat ialah indeks asas ialah 0. Tanpa meletakkan nilai indeks pada eq(), ia tidak akan memberi kesan kepada salah satu <li> dalam senarai <ul>.

Indeks juga boleh diletakkan dengan nombor negatif. Apabila meletakkan nilai negatif pada eq(), maka ia akan memilih elemen bermula dari elemen terakhir dalam senarai <ul>. Sebagai contoh:

$('#menu li').eq(-2).css('color','red');

<ul id="menu">
	<li>Link 1</li>   <!-- eq(-5) -->
	<li>Link 2</li>   <!-- eq(-4) -->
	<li>Link 3</li>   <!-- eq(-3) -->
	<li>Link 4</li> <!-- eq(-2)= warna teks Link 4 bertukar kepada warna merah -->
	<li>Link 5</li>   <!-- eq(-1) -->
</ul>

Penggunaan next()

next() digunakan untuk memilih hanya SATU elemen yang bersebelahan dengan elemen rujukan.Penggunaan sintax bagi next() ialah:

1. Element rujukan ialah elemen yang menjadi penghubung kepada elemen yang kita pilih
2. Selector adalah satu pilihan, ia boleh disetkan untuk tujuan menapis (filter) atau fokus kepada elemen dalam selector tertentu sahaja.

Saya ingin menukar warna teks “Link 2″ kepada merah dengan menjadikan elemen <li> yang pertama sebagai elemen rujukan.

<ul id="menu">
    <li>Link 1</li>
    <li>Link 2</li> <! warna teks Link 2 bertukar kepada warna merah -->
    <li>Link 3</li>
    <li>Link 4</li>
    <li>Link 5</li>
</ul>
<script>
$('#menu li').eq(0).next().css('color','red')
</script>

Jadi, dengan kod next(), hanya SATU element yang bersebelahan dengan elemen rujukan sahaja yang akan dipilih.Untuk menggunakan selector di dalam parameter Next(), ia kurang sesuai digunakan memandangkan ia hanya boleh memilih SATU sahaja elemen.

Sebagai contoh:

<ul id="menu">
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
    <li>Link 4</li>
    <li>Link 5</li>
    <p>Link 6</p> <!-- teks bertukar kepada warna merah -->
</ul>
<script>
$('#menu li').eq(4).next('p').css('color','red')
</script>

Penggunaan nextAll()

Cara penggunaan sama seperti next() tetapi nextAll() membolehkan anda memilih KESEMUA elemen selepas elemen rujukan. Sintaks adalah:

Sebagai contoh:
Dengan menjadikan elemen <li> yang pertama sebagai elemen rujukan, warna teks pada SEMUA elemen selepasnya akan bertukar menjadi warna merah.

<ul id="menu">
    <li>Link 1</li>
 <!-- SEMUA ELEMEN telah bertukar warna teks menjadi merah -->
    <li>Link 2</li>
    <li>Link 3</li>
    <li>Link 4</li>
    <li>Link 5</li>
</ul>
<script>
$('#menu li').eq(0).nextAll().css('color','red')
</script>

Pada bahagian parameter pula ia amat sesuai digunakan memandangkan ia digunakan untuk fokus pada elemen tertentu sahaja.Sebagai contoh:

<ul id="menu">
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>  

 <!-- HANYA ELEMEN yang KEEMPAT sahaja telah bertukar warna teks menjadi merah -->
    <li class="dipilih">Link 4</li> 

    <li>Link 5</li>
</ul>
<script>
$('#menu li').eq(0).nextAll('.dipilih').css('color','red')
</script>

Penggunaan prev()

Penggunaan prev() adalah untuk memilih elemen yang sebelum elemen rujukan. Ia hanya memilih SATU elemen sahaja dalam senarai.

Sintaks ialah

Sebagai contoh:

Warna teks berikut akan bertukar menjadi merah pada elemen <li> yang ketiga.

<ul id="menu">
    <li>Link 1</li>
    <li>Link 2</li>
<!-- Teks Link 3 bertukar warna -->
    <li>Link 3</li>  

    <li>Link 4</li>
    <li>Link 5</li>
    <li>Link 6</li>
</ul>
<script>
$('#menu li').eq(3).prev().css('color','red')
</script>

Nilai index 3 bermaksud elemen <li> yang keempat, kemudian guna kod prev() untuk memilih SATU elemen yang sebelumnya.

Penggunaan prevAll()

Penggunaan prevAll() adalah untuk memilih KESEMUA elemen yang sebelum elemen rujukan.

Sintaks ialah

Sebagai contoh:

Warna teks berikut akan bertukar menjadi merah pada elemen <li> yang pertama hingga elemen <li> yang keempat.

<ul id="menu">
<!-- Teks Link 1,Link 2, Link 3 dan Link 4 bertukar warna -->
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
    <li>Link 4</li> 

    <li>Link 5</li>
    <li>Link 6</li>
</ul>
<script>
$('#menu li').eq(4).prevAll().css('color','red')
</script>

Nilai index 4 bermaksud elemen <li> yang kelima, kemudian guna kod prevAll() untuk memilih KESEMUA elemen yang sebelumnya. Cuba perhatikan kod yang berikut, penggunaan paramater pada prevAll() digunakan.

<ul id="menu">
    <li>Link 1</li>
    <li>Link 2</li>  

<!-- Teks Link 3 sahaja bertukar warna -->
    <li class="dipilih">Link 3</li>  

    <li>Link 4</li>
    <li>Link 5</li>
    <li>Link 6</li>
</ul>
<script>
$('#menu li').eq(5).prevAll('.dipilih').css('color','red')
</script>

Berikut adalah output kod yang telah dihasilkan

Sekian sahaja post artikel. Selamat Membaca

ps: ada kesalahan ejaan beritahu yer

Salam sejahtera semua !!!!!!!!!!
Good morning !!!!! Jom kita semangatkan diri kita untuk belajar Programming di pagi hari.

Ok. Artikel kali saya akan menerangkan mengenai satu kod Javascript yang akan sering kita gunakan apabila menulis kod Javascript , dan juga saya akan ceritakan mengenai perisian debug HTML dan Javascript yang amat popular digunakan oleh web developer seluruh dunia iaitu Firebug (debug= istilah yang digunakan untuk mengesan kesalahan di dalam kod Javascript. Dengan adanya debug, maka mudahlah bagi kita untuk membaiki kesalahan tersebut).

Penggunaan Console.log

Console.log Ia digunakan untuk memaparkan output apabila menulis kod Javascript. Ia juga digunakan untuk memaparkan kesalahan ketika menulis kod Javascript.

Sebagai contoh:

//output : Hello. Good morning
console.log("Hello. Good morning");

Jadi dengan adanya Console.log mudahlah bagi kita untuk menguji keberkesanan kod programming yang kita buat.

Firebug

Firebugadalah perisian daripada Mozilla KHAS untuk browser Mozilla Firefox sahaja. Ia yang digunakan untuk memaparkan segala informasi mengenai website kita seperti layout,css,javascript,DOM dan sebagainya. Biasanya web developer menggunakannya bertujuan untuk melihat paparan antaramuka laman web. Dengan adanya Firebug maka web developer boleh mengetahui kekurangan pada lakaran website.Anda boleh download Firebug disini.

Download Firebug

Untuk melihat paparan output console.log, maka kita perlukan Firebug @ Developer Tools bagi pengguna Google Chrome. Tanpa perisian ini, kita tidak melihat output yang dihasilkan oleh console.log

Ok. Sekian sahaja artikel saya kali ini. Jumpa lagi
Ps: Penggunaan console.log banyak digunakan untuk artikel seterusnya. Jadi pastikan anda install perisian Firebug di pc anda ye.

/ah1

Salam sejahtera.

Dalam bab ini, saya akan menunjukkan bagaimana untuk memilih DOM element mengikut konteks yang ditetapkan. Sebagai contoh berapa text input atau button di dalam form element? Dengan mengetahui konteks DOM, maka mudah bagi kita untuk mencari elemet di dalam konteks tersebut

Mari lihat kod aturcara berikut.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
	</head>
	<body>
		<form>
			<input type="checkbox">
			<input type="radio">
			<input type="text">
			<input type="button">
		</form>

		<form>
			<input type="checkbox">
			<input type="radio">
			<input type="text">
			<input type="button">
		</form>

		<input type="checkbox">
		<input type="radio">
		<input type="text">
		<input type="button">

		<button id="button1">Element dalam Form</button>
		<button id="button2">Element dalam document.forms[0]</button>
		<button id="button3">Element dalam body</button>
	</body>
	<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

	<script>
	/* Terdapat 8 input dalam <form> */
		$('#button1').click(function(){
			alert('Terdapat ' + $('input',$('form')).length + ' input dalam <form>')
		})

	/* Terdapat 4 input dalam document.forms[0] */
		$('#button2').click(function(){
			alert('Terdapat '+ $('input',$(document.forms[0])).length + ' input dalam document.forms[0]')
		})

	/* Terdapat 12 8input dalam <body> */
		$('#button3').click(function(){
			alert('Terdapat ' + $('input',$('body')).length +' input dalam <body>' )
		})
	</script>
</html>

Mari kita lihat satu persatu kod aturcara berikut

Line 36 – 39

Ia akan mengira element yang terdapat dalam <form> sahaja. Cuba anda lihat ini dan kira.

         </form>
			<input type="checkbox">
			<input type="radio">
			<input type="text">
			<input type="button">
		</form>

		<form>
			<input type="checkbox">
			<input type="radio">
			<input type="text">
			<input type="button">
		</form>

Line 42-44

document.forms adalah merujuk kepada forms dalam HTML. Sebenarnya document.forms dan <form> membawa maksud yang sama. Yang bezanya ialah <form> adalah bahasa HTML manakala document.forms adalah bahasa Javascript.

Dalam Javascript, kedudukan document.forms dalam HTML boleh dirujuk melalui array. Anda tahu apa itu array? Array adalah kedudukan element yang telah disusun mengikut turutan. Nilai array bermula dari 0 , ia merujuk kepada kedudukan element yang pertama dalam satu senarai.Sebagai contoh

// kedudukan <form> yang pertama. Jadi nilai array adalah 0.
// Untuk mengakses <form> ini, ia hendalah ditulis sebagai document.forms[0]
         </form>
			<input type="checkbox">
			<input type="radio">
			<input type="text">
			<input type="button">
		</form>

// kedudukan <form> yang kedua. Jadi nilai array adalah 1.
// Untuk mengakses <form> ini, ia hendalah ditulis sebagai document.forms[1]
		<form>
			<input type="checkbox">
			<input type="radio">
			<input type="text">
			<input type="button">
		</form>

Line 46-50

Ia menerangkan mengenai berapa banyak element dalam <body>

Penggunaan .length() dalam Javascript

.length() digunakan untuk MENGIRA element dalam Javascript.

Sekian, sahaja untuk kali ini. Jumpa lagi

Salam sejahtera.

Pada artikel lepas, saya ada menyentuh mengenai cara menggunakan Jquery, bukan? Anda masih ingat lagi? Kalau ingat, baguslah…

Ok pada artikel kali ini saya akan menyentuh mengenai fungsi Hide() dan Show() dalam Jquery.
Fungsi Hide() adalah digunakan untuk menyembunyikan objek atau element HTML secara animasi.
manakala Show() digunakan untuk mengembalikan element HTML yang hilang (ia ada cume tidak muncul). Takpe, anda masih menggaru kepala, bukan? Saya akan tunjukkan secara teknikal.

Ok cube anda klik link ini. Kemudian tekan button hide , selepas itu tekan button show pula. Cuba lihat apa yang terjadi.

Amacam? Hehe… Anda nak buat? Ok jom kita buat sama-sama.

Copy kod ini dan paste ke HTML text-editor seperti Dreamweaver.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Hide And Show</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script>
			$(document).ready(function(){
				$('#hide').click(function(){

					$('#box').hide('slow');
				})

				$('#show').click(function(){

					$('#box').show('slow');
				})
			})
		</script>
		<style>

			#box{
				width:200px;
				height:200px;
				border:5px solid #000;
				background:#666666;
				margin-bottom:10px;
				color:#fff;
				font-size:30px;
				text-align:center;
			}
		</style>
	</head>
	<body>
		<h2>Tekan Butang Dibawah. Perhatikan apa yang berlaku</h2>
		<div id="box">Kotak!</div>

		<button id="hide">Hide</button>
		<button id="show">Show !!</button>
	</body>
</html>

Ok. saya akan terangkan satu persatu.

Kod HTML

Baris 37
– membina div untuk membina kotak

Baris 39-40
- membina dua butang interaktiviti supaya membolekan pengguna klik butang
Nama butang tersebut ialah ‘Hide’ dan Show

Kod CSS

Baris 25 – 34

kod untuk menghasilkan segiempat. width untuk set lebar segiempat tersebut, manakala height pula untuk set ketinggian segiempat. kedua-duanya mesti disetkan dalam unit pixel (px).

border digunakan untuk setkan border tersebut menerusi saiz border ( dalam unit pixel) , jenis border (solid) dan warna border (#000).

margin-bottom digunakan untuk menjarakkan segiempat dengan 2 butang di bawahnya. Color adalah untuk set warna segiempat font-size untuk setkan nilai teks yang hendak digunakan.text-align adalah untuk mengalihkan teks tersebut samada di sebelah kiri, tengah dan sebelah kanan. Di sini saya setkan teks tersebut di tengah.

Kod Jquery

$(document).ready() adalah kod Jquery yang akan dilarikan (load) terlebih dahulu sebelum kandungan HTML dipaparkan.tanpa kod ini , kod Jquery tidak dapat dibaca oleh browser.

Baris 10-13 dan Baris 15-18

Syntax untuk click() ialah

(Note: click() bukan hanya event untuk mouse, teks juga boleh disetkan menggunakan event ini)

Untuk membolehkan butang tersebut berfungsi, ada dua perkara yang perlu diambil tahu iaitu

1. Nama Element

nama element ini terdiri daripada :

- nama tag HTML seperti <p>, <h1> , <h3>

- nama id bagi tag HTML contoh:  <button id=”show”>Show</button>  jadi nama ID bagi button adalah show
- nama kelas (class) bagi tag HTML contoh :

2. Nama Event Yang Ingin Digunakan.

Event adalah seperti click(), hover(), focus(). Jadi pastikan kita tahu apa nama dan fungsi bagi setiap event yang ingin digunakan.

Jadi sebagai contoh :

<div id="box">Kotak!</div>

nama ID=Box
nama Event=Click()

Untuk menggunakannya, pastikan ANDA TIDAK BOLEH LUPA MENAIP “$” TERLEBIH DAHULU SEBELUM MENERUSKAN ATURCARA BERIKUTNYA.

Hide() dan Show()

Hide() dan Show() adalah terdiri daripada kategori Effects. Cara menggunakannya sama seperti menggunakan button , anda perlu kenalpasti
- nama objek yang ingin diletakkan efek (effect)
- nama efek yang ingin digunakan.

Jadi untuk menggunakannya button Hide adalah seperti berikut.

$('#box').hide();

Memanjangkan atau memendekkan tempoh masa effect

Untuk menghilangkan objek secara perlahan-lahan,anda boleh menggunakan samada :
- masa (dalam miliseconds,1000 miliseconds=1 saat)
- taip “fast” untuk laju, “slow” untuk perlahan-lahan

Contoh :

$('#box').hide('fast');
$('#box').hide(1500); // 1500 miliseconds = 1.5 saat

Jadi untuk kod aturcara penuh untuk kesan effect bagi segiempat ialah:

$(document).ready(function(){
    $('#hide').click(function(){
	$('#box').hide(1500);
    })

    $('#show').click(function(){
	$('#box').show('slow');
     })
})

Jadi selamat mencuba

Boleh Download sumber kod (source kod)

Salam sejahtera.

Artikel ini akan membincangkan mengenai bagaimana untuk menggunakan JQuery. Saya pasti ada diantara mereka nak belajar Jquery tetapi tidak tahu cara menggunakannya,bukan?

Jquery adalah pustaka (library) yang dicipta menggunakan bahasa Javascript bagi memudahkan pembangun web (web developer)mencipta interaktiviti , animasi dan kesan khas (effect) untuk laman web. Tujuan utama Jquery dibangunakan ialah mengubah cara penulisan kod Javascript supaya lebih rigkasn dan memberi impak khas yang menakjubkan. Itulah moto Jquery, write less do more

Bagi membolehkan Jquery digunakan, terdapat 2 cara iaitu dengan memuat – turun ( download) dan menulis kod aturcara ringkas yang membolehkan kod Jquery dapat dibaca secara online. Anda masih tak faham. Saya akan cuba terangkan seperti dibawah.

Kaedah pertama (Muat-turun)

1.  Anda perlu memuat turun kod Jquery daripada laman web rasmi Jquery iaitu http://jquery.com/

2. Di sebelah kanan terdapat ruangan download

3. Terdapat 2 pilihan iaitu production dan development. Kedua-dua kod ini boleh digunakan cuma terdapat perbezaan dari segi berikut.

Biasanya pembangun memilih fail production berbanding development sebab saiz fail yang kecil. Jadi mudah server nak load file tersebut.

4. Tekan butang download.

5. Save file tersebut melalui browser yang anda gunakan.

(Mozilla : –> File Save Page As –> Pilih lokasi fail untuk disimpan @ save -> save

6. Cara untuk menggunakan fail tersebut senang sahaja. Tulis satu kod yang ringkas yang membolehkan browser load file Jquery yang anda save tadi . Contoh

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		<script src="jquery-1.7.js"></script>
		<script>
			$(document).ready(function(){
				var welcome="Selamat Datang JQuery";
				$('.intro').text(welcome);
			})
		</script>
	</head>
	<body>
		<p class="intro"></p>
	</body>
</html>

Save sebagai loadJquery.html. ADA DUA PERKARA YANG PERLU DINYATAKAN.

1. Pastikan fail jquery yang anda save adalah sama dengan nama yang anda apply dalam kod HTML, DAN

2. pastikan lokasi fail Jquery dan HTML adalah dalam satu folder yang sama.

Kaedah Load Dari Server Google

Menerusi kaedah ini, pembangun web tidak perlu memasukkan fail Jquery bersama-sama dengan fail HTML. Ia akan memuat naik (upload) fail HTML sahaja ke dalam server. Pembangun akan mengambil fail Jquery melalui Google Libraries API.

Cuba klik link ini Google Libraries API

Dalam laman web tersebut, terdapat banyak fail diletakkan di dalam server Google termasuklah Jquery. Kalau kita tengok pada link Jquery ada path, kan? Ok path ini adalah laluan untuk kita load fail Jquery melalui server Google. So dengan path ini , kita copy link tersebut dan letakkan ke dalam fail HTML yang kita bangunkan.

(NOta: Jquery dan Jquery UI adalah fail yang berbeza. So kalau ada masa nanti kita sama-sama belajar yer . So JANGAN SILAP YER… )

1. Pergi ke laman web

2. Copy link dari path tersebut. https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

3. PASTE link tersebut ke dalam fail HTML. sila lihat line yang 7.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script>
			$(document).ready(function(){
				var welcome="Selamat Datang JQuery";
				$('.intro').text(welcome);
			})
		</script>
	</head>
	<body>
		<p class="intro"></p>
	</body>
</html>

4. kalau tak percaya buang @ pindahkan fail Jquery tersebut keluar dari tempat anda save tadi. Untuk testing.
(Nota: Dalam programming, pengujian AMAT, AMAT, AMATLAH PENTING (Sebut dah 3x maka ia adalah amat penting). Tanpa pengujian , kita tidak tahu samada aplikasi yang kita bangunkan menjadi seperti yang kita nak buat. )

Boleh download contoh disini.

Sampai sini sahaja coretan saya. Jumpa lagi

baru2 nih saya ada cerita kenapa pc saya hang, erm… kadang2 perasan tak , kita kadang2 tak pernah terfikir perkara yg tidak diingini terjadi, maka kita tidak akan bersedia untuk perkara yg kita sendiri fikir tidak akan terjadi..

maka katakanlah anda buat kerja , lepas abis buat kerja save kat dekstop, anda shut down bile anda fikir keje anda habis, esoknya bile nak on pc , huh hang, tak masuk windows, dan mcm2 lagi.. perkara sebegini terjadi pada saya…

jadi tip untuk diri saya sendiri
- jangan save kerja atau fail kat desktop atau drive C:/>, sila buat partition dalam hardisk khas untuk kerja2 kita, apa?? tak tau apa tu partition?? partition tu kita pecahkan ruang2 HD yang ada kepada beberapa drive
seumpama ruang sebuah rumah dipecahkan kepada beberapa bilik… haa faham tak.. contohnya katakanlah hard disk anda ada 80gb, janganlah pakai 80gb untuk c:/ drive jer, bahagikan misalnya 30gb untuk C:/ , 40gb untuk D:/ , 10gb untuk E:/ sebagai contoh..

maka katakanlah pc anda hang, tak masuk windows -psstt.. pastikan yg rosak hanya fail windows , kalau komponen pc rosak dah jadi lain citer plak — ….. so senang citer format je dan plih c:\ drive untuk reinstallation..

sy tahu mgkn anda diluar sana hebat2 leh repair windows tanpa format pc, tip ni untuk user tahap cipan ( level beginner, tahap rendah ) mcm saya nih..

saya sebenarnya tak suka asal rosak jer , format pc, saya sebagai org yang minat dalam bidang It banyak menghabiskan masa usha2 forum atau website yg boleh memberikan penyelesaian untuk saya. tapi kalau masalah tak selesai lebih 3hari misalnya, jawabnya format PC — usah buang masa jika anda rasa tak boleh buat, kalau dah usaha nak wat camne kan…

sekian coretan dr saya

sekadar berblog

salam kepada pengunjung. tahun nie banyak teknologi dan programming baru telah diperkenalkan. oklah..
saya nak citer ttg dua programming nie iaitu actionscript dan javascript.

dulu kalau nak buat animasi jer, mesti ramai yg akan sebut FLASH… itu dulu, ketika saya buat PSM pun saya pakai Adobe Flash. tetapi tahun nie, mungkin saya rasa kurang org pakai Flash sebab ada programming baru yg menyaingi Flash iaitu Javascript…

dengan wujudnya platform HTML5 dalam web browser ( apa tu HTML5? huh nnt saya citer) , maka fungsi javascript akan lebih sempurna… sebab javascript boleh buat animasi dengan lebih lancar…

ada beberapa sebab kenapa javascript popular skrg nih
- percuma , javascript telah sedia ada dlam browser…
- tak perlu software tertentu untuk buat javascript programming
- tak perlu plug-in untuk view javascript, notepad pun boleh pakai wat javascript

berbanding dengan flash ada beberapa kekangan
- kene pakai software daripada adobe, semestinya adobe flash
- perlu plug-in yg dinamakan flash player , kalau x de , flash tak boleh nak jalan…
- flash player slalu update, masalahnya die update ciri2 yg memerlukan kuasa processor yg pantas, maka kesianlah pada sesiapa yg pakai prosessor yg tak laju, saya pernah hang beberapa kali disebabkan flash player yg latest, selalunya saya akan cuba detect kenapa pc saya slow nak running dengan tengok windows task manager –> performance, cpu usage akan mencapai 100% tanpa henti bile running flash, tapi bile ‘end process’ flash player, pc akan kembali mcm biasa.. erm.. so saya pakai versi flash player yg lama sekadar nak tgk video je (dr youtube)..

itulah ceritanya, tetapi saya tidak akan mengabaikan flash sebab ada effect tertentu yg memerlukan flash…

Sekian..

ps: Apple tidak membenarkan atau view sebarang fail atau animasi daripada flash pada produk Apple, contohnya Ipad. ada sebab daripada Apple nk tengok , click laman web nih http://www.apple.com/hotnews/thoughts-on-flash/

Salam kepada semua pengunjung. dah lama blog ni berhabuk x berupdate. hari nie saya berdepan dengan ujian yg datang dari-Nya.

kini, saya sedang mengalami latihan industri, maklumlah nak dekat2 habis LI nih, banyak kerja yg nak kene buat . salah satu nya ialah update report LI

semalam saya dah buat , failnya saya save kan dalam dekstop. bahan2 report ada dlm pendrive, tetiba dalam beberapa jam kemudian, pendrive x leh nak akses.x taw kenapa,. terjadi malam semalam. saya nak kene present sama ada hari selasa atau rabu nie… alamak pendrive dah rosak, bahan2 report LI ada dlm pendrive. rasa lemah semangat la plak kan…

sambil termenung2 saya tenung bilik saya, berSEPAH2…..

maka untuk menghilangkan kekusutan fikiran, saya kemaslah bilik, cari juga slip/resit pendrive waktu saya beli dulu—— tak ada, aduh…. warranty 5 tahun tu , pendrive jenama PEN DRIVE..opst jgn keliru yer, sebetulnya benda tu dipanggil thumbdrive, tetapi disebabkan kebanyakkan kwn2 panggil pendrive , maka saya pun panggil lah pendrive

belom habis cerita disitu.. esoknya (hari nie) pc pula buat hal
simptomnya ialah bile kita on pc, sampai je keluar skreen yg display logo Window Xp (sy pakai OS win xp) , tuppppp…… die restart balik sampai keluar logo win xp , die restat lagi dan lagi ( tiada kesudahan..),

abis la report2 yg ada dlm desktop tu… zass… suatu tamparan besar bg saya.. sy kene wat balik….
nak tak nak, saya kene FORMAT PC saya balik….

kalau anda jadi saya, anda bingung ke bengong? , huh

pendrive rosak pc pun rosak…

ps: update nih time tengah fornmat pc…

Salam,

Dalam artikel semalam saya ada tunjukkan bagaimana untuk menambahkan Flash component melalui drag dan drop dan juga melalui actionscript. Pada artikel kali ini saya akan tunjukkan bagaimana untuk berinteraksi dengan Flash component.

Untuk membolehkan flash component berfungsi,  sebelum itu saya akan terangkan beberapa istilah yang mudah difahami

Istilah

Listener = merupakan satu object yang kita cipta untuk membolehkan sesuatu komponen berinteraksi dengan komponen. Listener juga digunakan untuk kawal events

Events = merupakan beberapa pelakuan tentang flash component tersebut. Sebagai contoh Button component ada events seperti click, Combo Box ada events seperti close , enter, change dan sebagainya.

Property =  sifat yang ada pada flash component seperti Button ada property seperti label, icon, label placement dan sebagainya

Penerangan mengenai bagaimana nak handle flash component

Untuk membolehkan kita mengawal ( handle ) flash component, kita perlu ciptakan satu objek yang dipanggil listener.  Menerusi object listener, kita takrifkan fungsi yang mana dalam setiap fungsi terdapat property yang perlu dilaksanakan. Kemudian kita panggil listener menerusi kod addEventListener yang memanggil 2 parameter iaitu events dan nama listener.

Rajah 1 : Kaedah ringkas untuk mengawal flash component

Sebagai contoh , katakan saya mahu create satu Button component , kemudian saya mahu Button component tersebut berfungsi dan memaparkan notis apabila Button tersebut ditekan.

Contoh :

1. Drag and drop Button component. Caranya heret Button component daripada Panel Component dan letakkan di mana-mana tempat di atas Stage. Kemudian delete Button tersebut.

2. Klik Ctrl + L ( tekan tanpa lepas kekunci Ctrl kemudian tekan kekunci  L ), anda dapati panel Library dipaparkan dan Button component ada didalam library.

3. Bina satu dynamic text dengan memilih peralatan Text tool pada tools panel, setkan sebagai dynamic , namakan ia sebagai txt_notes;  saiz width :200 px , height: 30 px; kedudukan x: 100 , y:150 .

3. Klik frame 1 pada timeline, taip actionscript ini.

/**********   Code Action Script ***********************/

/* import pakej Button

cipta satu Button dengan nama btn_Submit, letak pada aras (depth)

yang berikutnya */

import mx.controls.Button;

createClassObject(Button,”btn_Submit”,this.getNextHighestDepth())

/* letakkan btn_Submit pada kedudukan x:100, y:100 */

btn_Submit.move(100,100)

/* namakan label bagi Button */

btn_Submit.label=”Sila klik Saya”

/* cipta satu objek sebagai listener

kemudian setkan textbox memaparkan notis apabila

Button ditekan */

var oListener:Object=new Object()

oListener.click=function(){

txt_notes.text=”Anda telah tekan butang”;

}

/* panggil objek listener, setkan events sebagai list, dan nama listener */

btn_Submit.addEventListener(“click”,oListener)

/********  Tamat Code Action Script ******************/

4. Lihat hasilnya dengan menekan Ctrl + Enter

Taraaa……

Muat Turun fail

Di dalam Flash , terdapat satu ciri yang dipanggil UI Flash Components. Dengan UI Flash Components, kita boleh membina borang dengan menggunakan komponen seperti Button, List,CheckBox, ComboBox dan sebagainya.

Flash Component dalam Flash MX 2004

Terdapat 2 cara untuk menambah flash component iaitu :

-         tambahkan component dengan cara heret dan letak ( drag and drop )

1. Dalam Flash Mx 2004 , pergi ke menu Window –>  Development Panel –>  Components
2. Drag salah satu component ke Stage

-         tambahkan component dengan menggunakan Action Script

Read the rest of this entry »