Cara menggunakan php charcodeat equivalent

MODUL 4 JAVASCRIPT: DASAR, VARIABEL, &
Description Addition

-

Subtraction

*

Multiplication

/

Division

%

Modulus (division remainder)

++

Increment

--

Decrement

Example x=2 x+2 x=2 5-x x=4 x*5 15/5 5/2 5%2 10%8 10%2 x=5 x++ x=5 x--

Operator Penunjukan Operator = += -= *= /= %=

Example x=y x+=y x-=y x*=y x/=y x%=y

Is The Same As x=y x=x+y x=x-y x=x*y x=x/y x=x%y

Result 4 3 20 3 2.5 1 2 0 x=6 x=4

Operator Perbandingan Operator Description == is equal to != is not equal > is greater than < is less than >= is greater than or equal to <= is less than or equal to Operator Logika

Example 5==8 returns false 5!=8 returns true 5>8 returns false 5<8 returns true 5>=8 returns false 5<=8 returns true

Operator &&

Example x=6 y=3

||

!

Description and

or

(x < 10 && y > 1) returns true x=6 y=3

not

(x==5 || y==5) returns false x=6 y=3 x != y returns true

LATIHAN Sederhana saja, agar Anda mau membiasakan diri dengan JavaScript, maka Anda harus banyak berlatih mulai dari yang paling dasar. Buatlah semua contoh di bawah ini, jalankan untuk melihat hasilnya, dan lakukan modifikasi untuk lebih mengenal dan mengetahui kegunaan skrip yang baru Anda buat. 1. Menuliskan teks

2. Memformat teks dengan tag HTML

Hello World!

3. JavaScript yang diletakkan pada bagian HEAD

4. JavaScript yang diletakkan pada bagian BODY

5. JavaScript eksternal

The actual script is in an external script file called "xxx.js".

6. Deklarasi variabel, memberi nilai, dan menampilkannya

"+name+"

This example declares a variable, assigns a value to it, and then displays the variable.

Then the variable is displayed one more time, only this time as a heading.

7. Fungsi

<script type="text/javascript"> function myfunction() { alert("HELLO") }

By pressing the button, a function will be called. The function will alert a message.

8. Fungsi dengan argumen

By pressing the button, a function with an argument will be called. The function will alert this argument.

9. Fungsi dengan argumen (lagi)

When you click on one of the buttons, a function will be called. The function will alert the argument that is passed to it.

10. Fungsi yang mengembalikan suatu nilai

The script in the body section calls a function.

The function returns a text.

11. Fungsi dengan argumen yang mengembalikan suatu nilai

The script in the body section calls a function with two arguments, 2 and 3.

The function returns the sum of these two arguments.

JAVASCRIPT: PERCABANGAN DAN PUTARAN

RINGKASAN Bagian berikutnya yang masih merupakan dasar dari JavaScript adalah percabangan dan putaran. Dapat dikatakan bahwa percabangan dan putaran merupakan salah satu inti metode dalam semua bahasa pemrograman yang ada di dunia, karena dengan percabangan dan putaran akan dihasilkan sebuah program yang dinamis, dan bukan program yang linear serta bersifat statik. Karena JavaScript merupakan salah satu cara dalam melakukan pemrograman web di sisi client, maka JavaScript juga memiliki kemampuan ini. LATIHAN Disini Anda akan berlatih melakukan membentuk percabangan (pemilihan berdasar kondisi) dan membuat putaran dalam skrip. Jalankan contoh-contoh di bawah ini, kemudian perhatikan baik-baik dasar penggunaan dari setiap elemen untuk percabangan dan perulangan yang disertakan. Cobalah untuk mengembangkannya sendiri dalam bentuk modifikasi. 1.

This example demonstrates the If statement.

If the time on your browser is less than 10, you will get a "Good morning" greeting.

2.

}

This example demonstrates the If...Else statement.

If the time on your browser is less than 10, you will get a "Good morning" greeting. Otherwise you will get a "Good day" greeting.

3.

UAD

Official

UGM

Official

4.

This example demonstrates the switch statement.

You will receive a different greeting based on what day it is.

Note that Sunday=0, Monday=1, Tuesday=2, etc.

5.

Explanation:

The for loop sets i equal to 0.

As long as i is less than , or equal to, 5, the loop will continue to run.

i will increase by 1 each time the loop runs.

6.

7.

Explanation:

i equal to 0.

While i is less than , or equal to, 5, the loop will continue to run.

i will increase by 1 each time the loop runs.

8.

Explanation:

i equal to 0.

The loop will run

i will increase by 1 each time the loop runs.

While i is less than , or equal to, 5, the loop will continue to run.

JAVASCRIPT: OBYEK STRING, DATE, & ARRAY

RINGKASAN Setelah Anda terbiasa dengan dasar-dasar JavaScript beserta penggunaan variabel, termasuk mulai mengenal pemrograman skrip fungsi, maka selanjutnya Anda dapat mulai berlatih menggunakan berbagai obyek yang tersedia dalam JavaScript. Seperti telah disampaikan dalam perkuliahan, JavaScript menyediakan banyak obyek built-in yang dapat langsung diaplikasikan oleh pengguna. Dengan beragam modifikasi atribut serta nilai yang dapat diberikan pada suatu obyek, maka Anda akan mendapatkan beragam hasil pula. Properti obyek string Properties Length

Explanation Returns the number of characters in a string

Metode obyek string Methods anchor() big() blink() bold() charAt() charCodeAt() concat() fixed() fontcolor() fontsize() fromCharCode() indexOf()

italics() lastIndexOf()

link() match()

replace() search()

Explanation Returns a string as an anchor Returns a string in big text Returns a string blinking Returns a string in bold Returns the character at a specified position Returns the Unicode of the character at a specified position Returns two concatenated strings Returns a string as teletype Returns a string in a specified color Returns a string in a specified size Returns the character value of a Unicode Returns the position of the first occurrence of a specified string inside another string. Returns -1 if it never occurs Returns a string in italic Returns the position of the first occurrence of a specified string inside another string. Returns -1 if it never occurs. Note: This method starts from the right and moves left! Returns a string as a hyperlink Similar to indexOf and lastIndexOf, but this method returns the specified string, or "null", instead of a numeric value Replaces some specified characters with some new specified characters Returns an integer if the string contains some

slice() small() split() strike() sub() substr() substring()

sup() toLowerCase() toUpperCase()

specified characters, if not it returns -1 Returns a string containing a specified character index Returns a string as small text Replaces a string with a comma Returns a string strikethrough Returns a string as subscript Returns the specified characters. 14,7 returns 7 characters, from the 14th character (starts at 0) Returns the specified characters. 7,14 returns all characters from the 7th up to but not including the 14th (starts at 0) Returns a string as superscript Converts a string to lower case Converts a string to upper case

Metode obyek date Methods Date() getDate() getDay() getMonth() getFullYear() getYear() getHours() getMinutes() getSeconds() getMilliseconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCMonth() getUTCFullYear() getUTCHours()

Explanation Returns a Date object Returns the date of a Date object (from 1-31) Returns the day of a Date object (from 0-6. 0=Sunday, 1=Monday, etc.) Returns the month of a Date object (from 0-11. 0=January, 1=February, etc.) Returns the year of a Date object (four digits) Returns the year of a Date object (from 0-99). Use getFullYear instead !! Returns the hour of a Date object (from 0-23) Returns the minute of a Date object (from 0-59) Returns the second of a Date object (from 0-59) Returns the millisecond of a Date object (from 0999) Returns the number of milliseconds since midnight 1/1-1970 Returns the time difference between the user's computer and GMT Returns the date of a Date object in universal (UTC) time Returns the day of a Date object in universal time Returns the month of a Date object in universal time Returns the four-digit year of a Date object in universal time Returns the hour of a Date object in universal time

getUTCMinutes() getUTCSeconds() getUTCMilliseconds() parse() setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setYear() setUTCDate() setUTCDay() setUTCMonth() setUTCFullYear() setUTCHour() setUTCMinutes() setUTCSeconds() setUTCMilliseconds() toGMTString() toLocaleString() toString()

Returns the minutes of a Date object in universal time Returns the seconds of a Date object in universal time Returns the milliseconds of a Date object in universal time Returns a string date value that holds the number of milliseconds since January 01 1970 00:00:00 Sets the date of the month in the Date object (from 1-31) Sets the year in the Date object (four digits) Sets the hour in the Date object (from 0-23) Sets the millisecond in the Date object (from 0-999) Set the minute in the Date object (from 0-59) Sets the month in the Date object (from 0-11. 0=January, 1=February) Sets the second in the Date object (from 0-59) Sets the milliseconds after 1/1-1970 Sets the year in the Date object (00-99) Sets the date in the Date object, in universal time (from 1-31) Sets the day in the Date object, in universal time (from 0-6. Sunday=0, Monday=1, etc.) Sets the month in the Date object, in universal time (from 0-11. 0=January, 1=February) Sets the year in the Date object, in universal time (four digits) Sets the hour in the Date object, in universal time (from 0-23) Sets the minutes in the Date object, in universal time (from 0-59) Sets the seconds in the Date object, in universal time (from 0-59) Sets the milliseconds in the Date object, in universal time (from 0-999) Converts the Date object to a string, set to GMT time zone Converts the Date object to a string, set to the current time zone Converts the Date object to a string

Metode obyek array Methods length

Explanation Returns the number of elements in an array. This

concat() join() reverse() slice() sort()

property is assigned a value when an array is created Returns an array concatenated of two arrays Returns a string of all the elements of an array concatenated together Returns the array reversed Returns a specified part of the array Returns a sorted array

LATIHAN Seperti dalam pertemuan sebelumnya, gunakan contoh-contoh di bawah ini agar Anda dapat lebih mengenal akrab obyek-obyek dalam JavaSript dan cara memanfaatkannya. Perhatikan bahwa Anda benar-benar harus menelaah setiap baris skrip agar Anda tahu proses kerja setiap skrip yang Anda buat. 1. Menghitung karakter suatu string

2. Menguji apakah string berisi karakter tertentu, dengan indexof()

This example tests if a string contains a specified word. If the word is found it returns the position of the first character of the word in the original string. Note: The first position in the string is 0!

3. Menguji apakah string berisikan karakter tertentu, dengan match()

<script type="text/javascript"> var str = "W3CSchools is great!" document.write(str.match("great"))

This example tests if a string contains a specified word. If the word is found it returns the word.

4. Memunculkan bagian string tertentu

") document.write(str.substring(2,6))

The substr() method returns a specified part of a string. If you specify (2,6) the returned string will be from the second character (start at 0) and 6 long.

The substring() method also returns a specified part of a string. If you specify (2,6) it returns all characters from the second character (start at 0) and up to, but not including, the sixth character.

5. Mengubah menjadi huruf besar atau kecil

6. Membuat array berisi nama-nama

document.write(famname[i] + "
") }

7. Menghitung elemen yang berada dalam array

8. Tanggal hari ini

9. Jam saat ini

10. Mengeset tanggal

Egil","Tove","Hege","Stale","Kai

11. Melihat waktu UTC

12. Memunculkan nama-nama hari

13. Memunculkan tanggal lengkap

14. Membuat jam

{ clearTimeout(timer) } function start() { var time = new Date() var hours = time.getHours() var minutes = time.getMinutes() minutes=((minutes < 10) ? "0" : "") + minutes var seconds = time.getSeconds() seconds=((seconds < 10) ? "0" : "") + seconds var clock = hours + ":" + minutes + ":" + seconds document.forms[0].display.value = clock timer = setTimeout("start()",1000) }

JAVASCRIPT: GAMBAR, FRAME, FORM, DAN CLIENT

RINGKASAN Bagian berikutnya dari latihan menggunakan JavaScript adalah penguasaan skrip untuk menangani obyek gambar, frame, form, dan pendeteksian elemen web pada client yaitu browser yang digunakan. Pada dasarnya, HTML memang telah memiliki tag untuk penanganan obyek gambar, frame, dan form, tetapi seperti halnya sifat HTML yang statis, maka tag HTML untuk penanganan obyek-obyek tersebut juga memberikan hasil yang statis pula. JavaScript selain dapat digunakan untuk membuatnya lebih dinamis, juga digunakan untuk menjadi pre-processor dari masukan yang diberikan pengunjung halaman web ke situs web Anda, sehingga situs web Anda memiliki interaktivitas yang sebenarnya. LATIHAN Silakan Anda kerjakan latihan-latihan di bawah ini, dan seperti sebelumnya, perhatikan bagian mana saja yang digunakan agar dapat memberikan hasil yang diinginkan. Untuk beberapa contoh, Anda memerlukan file-file HTML tambahan, silakan Anda buat file HTML tambahan dengan isi yang berbeda-beda agar hasilnya lebih terlihat jelas. Diantara file tambahan yang dibutuhkan terdapat file pemroses masukan dari form. Bahasan file pemroses masukan form belum dijangkau dalam perkuliahan (dibahas khusus dalam pemrograman web tingkat lanjut, skrip pada sisi server), sehingga file HTML untuk pemroses form cukup file dummy saja yang berisi pesan teks “Data telah diproses”. 1. Preload gambar ke memori

2. Keluar dari frame

3. Melakukan update halaman pada 2 iframe

4. Validasi alamat e-mail

This example only tests if the email address character.

onsubmit="return

contains

an

"@"

Any "real life" code will have to test for punctuations, spaces and other things as well.

5. Validasi panjang masukan teks

6. Menjadikan teks masukan sebagai obyek aktif

7. Menggunakan tombol radio

8. Menggunakan kotak cek

9. Menggunakan kotak drop-down

10. Kotak drop-down sebagai menu

11. Kotak teks yang otomatis berpindah fokus bila batasan masukan terpenuhi

if (content.length==elmnt.maxLength) { next=elmnt.tabIndex if (next<document.forms[0].elements.length) { document.forms[0].elements[next].focus() } } }

This script automatically sets focus to the next input field when the current input field's maxlength has been reached

12. Deteksi browser yang digunakan

13. Deteksi konfigurasi tampilan yang digunakan

14. Redirect ke situs web berdasarkan browser yang digunakan

function redirectme() { bname=navigator.appName if (bname.indexOf("Netscape")!=-1) { window.location="http://www.netscape.com" return } if (bname.indexOf("Microsoft")!=-1) { window.location="http://www.microsoft.com" return } window.location="http://www.w3.org" }