script kalender JS (Java Script)

<script>
setCal()
function leapYear(year) {
if (year % 4 == 0) // basic rule
return true // is leap year
/* else */ // else not needed when statement is "return"
return false // is not leap year
}
function getDays(month, year) {
// create array to hold number of days in each month
var ar = new Array(12)
ar[0] = 31 // January
ar[1] = (leapYear(year)) ? 29 : 28 // February
ar[2] = 31 // March
ar[3] = 30 // April
ar[4] = 31 // May
ar[5] = 30 // June
ar[6] = 31 // July
ar[7] = 31 // August
ar[8] = 30 // September
ar[9] = 31 // October
ar[10] = 30 // November
ar[11] = 31 // December


// return number of days in the specified month (parameter)
return ar[month]
}


function getMonthName(month) {
// create array to hold name of each month
var ar = new Array(12)
ar[0] = "January"
ar[1] = "February"
ar[2] = "March"
ar[3] = "April"
ar[4] = "May"
ar[5] = "June"
ar[6] = "July"
ar[7] = "August"
ar[8] = "September"
ar[9] = "October"
ar[10] = "November"
ar[11] = "December"
// return name of specified month (parameter)
return ar[month]
}
function setCal() {
// standard time attributes
var now = new Date()
var year = now.getYear()
if (year < 1000)
year+=1900
var month = now.getMonth()
var monthName = getMonthName(month)
var date = now.getDate()
now = null
// create instance of first day of month, and extract the day on which it occurs
var firstDayInstance = new Date(year, month, 1)
var firstDay = firstDayInstance.getDay()
firstDayInstance = null
// number of days in current month
var days = getDays(month, year)
// call function to draw calendar
drawCal(firstDay + 1, days, date, monthName, year)
}
function drawCal(firstDay, lastDate, date, monthName, year) {
// constant table settings
var headerHeight = 10 // height of the table's header cell
var border = 0 // 3D height of table's border
var cellspacing = 1 // width of table's border
var headerColor = "red" // color of table's header
var headerSize = "+1" // size of tables header font
var colWidth = 30 // width of columns in table
var dayCellHeight = 15 // height of cells containing days of the week
var dayColor = "yellow" // color of font representing week days
var cellHeight = 35 // height of cells representing dates in the calendar
var todayColor = "yellow" // color specifying today's date in the calendar
var timeColor = "white" // color of font representing current time
// create basic table structure
var text = "" // initialize accumulative variable to empty string
text += '<CENTER>'
text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>' // table settings
text += '<TH COLSPAN=7 HEIGHT=' + headerHeight + '>' // create table header cell
text += '<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>' // set font for table header
text += monthName + ' ' + year 
text += '</FONT>' // close table header's font settings
text += '</TH>' // close header cell
// variables to hold constant settings
var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>'
openCol += '<FONT COLOR="' + dayColor + '">'
var closeCol = '</FONT></TD>'
// create array of abbreviated day names
var weekDay = new Array(7)
weekDay[0] = "Sun"
weekDay[1] = "Mon"
weekDay[2] = "Tue"
weekDay[3] = "Wed"
weekDay[4] = "Thu"
weekDay[5] = "Fri"
weekDay[6] = "Sat"
// create first row of table to set column width and specify week day
text += '<TR ALIGN="center" VALIGN="center">'
for (var dayNum = 0; dayNum < 7; ++dayNum) {
text += openCol + weekDay[dayNum] + closeCol 
}
text += '</TR>'
// declaration and initialization of two variables to help with tables
var digit = 1
var curCell = 1
for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
text += '<TR ALIGN="right" VALIGN="top">'
for (var col = 1; col <= 7; ++col) {
if (digit > lastDate)
break
if (curCell < firstDay) {
text += '<TD></TD>';
curCell++
} else {
if (digit == date) { // current cell represent today's date
text += '<TD HEIGHT=' + cellHeight + '>'
text += '<b><FONT COLOR="' + todayColor + '" SIZE=2>'
text += digit
text += '</FONT><BR>'
text += '</TD>'
} else
text += '<TD HEIGHT=' + cellHeight + '>' + digit + '</TD>'
digit++
}
}
text += '</TR>'
}
// close all basic table tags
text += '</TABLE>'
text += '</CENTER>'
// print accumulative HTML string
document.write(text) 
}
</script>

• JavaScript II
• JavaScript III
• JavaScript prompt
• Js Event dan Fungsi
• Interaksi Js
• membuat Jam dgn JS
• Interaksi Js dgn textarea

Script Jam JS (java script)

<canvas id="clock" width="100" height="100"></canvas>
               <script type="text/javascript">
        window.onload = function() {
            function draw() {
                var ctx = document.getElementById('clock').getContext('2d');
                ctx.strokeStyle = "rgba(0, 0, 0, 1)";
                ctx.clearRect(0, 0, 100, 100);
                ctx.beginPath();
                ctx.lineWidth = 1;
                ctx.arc(50, 50, 48, 0, Math.PI * 2, true);
                ctx.stroke();
                var i;
                for(i=0; i < 360; i+=6) {
                    ctx.lineWidth = ((i % 30)==0)?3:1;
                    ctx.strokeStyle = ((i % 30)==0)?"rgb(200,0,0)":"rgb(0,0,0)";
                    var r = i * Math.PI / 180;
                    ctx.beginPath();
                    ctx.moveTo(50+(45 * Math.sin(r)), 50+(45 * Math.cos(r)));
                    ctx.lineTo(50+((((i % 30)==0)?37:40) * Math.sin(r)), 50+((((i % 30)==0)?37:40) * Math.cos(r)));
                    ctx.closePath();
                    ctx.stroke();
                }
                ctx.strokeStyle = "rgba(32, 32, 32, 0.6)";
                // hour
                var d = new Date();
                var h = (d.getHours() % 12) + (d.getMinutes() / 60);
                ctx.lineWidth = 4;
                ctx.beginPath();
                ctx.moveTo(50+(25 * Math.sin(h * 30 * Math.PI / 180)), 50+(-25 * Math.cos(h * 30 * Math.PI / 180)));
                ctx.lineTo(50+(5 * Math.sin((h+6) * 30 * Math.PI / 180)), 50+(-5 * Math.cos((h+6) * 30 * Math.PI / 180)));
                ctx.closePath();
                ctx.stroke();
                //minute
                var m = d.getMinutes() + (d.getSeconds() / 60);
                ctx.strokeStyle = "rgba(32, 32, 32, 0.8)";
                ctx.lineWidth = 2;
                ctx.beginPath();
                ctx.moveTo(50+(38 * Math.sin(m * 6 * Math.PI / 180)), 50+(-38 * Math.cos(m * 6 * Math.PI / 180)));
                ctx.lineTo(50+(3 * Math.sin((m+30) * 6 * Math.PI / 180)), 50+(-3 * Math.cos((m+30) * 6 * Math.PI / 180)));
                ctx.closePath();
                ctx.stroke();
                //second
                var s = d.getSeconds() + (d.getMilliseconds() / 1000);
                ctx.strokeStyle = "rgba(0, 255, 0, 0.7)";
                ctx.lineWidth = 1;
                ctx.beginPath();
                ctx.moveTo(50+(45 * Math.sin(s * 6 * Math.PI / 180)), 50+(-45 * Math.cos(s * 6 * Math.PI / 180)));
                ctx.lineTo(50+(10 * Math.sin((s+30) * 6 * Math.PI / 180)), 50+(-10 * Math.cos((s+30) * 6 * Math.PI / 180)));
                ctx.closePath();
                ctx.stroke();
            }
            setInterval(draw, 100);
        }
    </script>

• JavaScript II
• JavaScript III
• JavaScript prompt
• Js Event dan Fungsi
• Interaksi Js
• membuat Jam dgn JS
• Interaksi Js dgn textarea

Pengenalan JS

JAVA SCRIPT

A.    Mengenal Program JavaScript

Jika anda sudah pernah belajar bahasa pemrograman seperti C, Pascal atau Visual Basic mungkin tidak akan terlalu sulit untuk mempelajari bahasa pemrograman Java Script.

Penulisan beberapa perintah dalam JavaScipt adalah case sensitive, jadi penulisan kode harus diperhatikan. Untuk latihan pertama kali buatlah kode JavaScript sederhana dibawah ini.

Pada navigator versi lama yang tidak mendukung JavaScript, penggunaan kode JavaScript akan merusak dokumen HTML yang sudah dibuat dengan bagusnya. Agar hal itu tidak terjadi, maka perlu kita tambahkan teg komentar <!-- … //--> agar kode tidak akan dieksekusi sebagai program akan tetapi hanya komentar.

js_teks.html

<html> <head> <title>JavaScript</title> </head> <body> <script language="JavaScript"> <!--   document.write("My First JavaScript !<br>");   document.write("Selamat berjuang"); //--> </script> </body> </html>

Hasil jadi :

My first JavaScript !

Selamat berjuang

• JavaScript II
• JavaScript III
• JavaScript prompt
• Js Event dan Fungsi
• Interaksi Js
• membuat Jam dgn JS
• Interaksi Js dgn textarea

interaksi JS dgn komponen textarea.

·         Interaksi JavaScript dengan komponen textarea.

js_textarea.html

<html> <head> <title>Textarea</title> <script language="JavaScript"> function cek() {   var str="Menu yang anda pilih : \n";   for (var i=0;i<form_input.menu.options.length;i++)   {     if (document.form_input.menu.options[i].selected)     {       str=str+form_input.menu.options[i].value+"\n";     }   }   form_input.pilihan.value=str; } </script> </head> <body> <h2>Menu Makanan</h2> <form name="form_input"> <pre> Pilih menu yang anda sukai ! <select name="menu" multiple onChange="cek()">   <option value="Ayam goreng">Ayam goreng</option>   <option value="Sate Kambing">Sate Kambing</option>   <option value="Soto Ayam">Soto Ayam</option>   <option value="dan lain-lain">dll</option> </select><br> Keterangan : <textarea name="pilihan" rows="4" cols="30" readonly="true"></textarea> </pre> </form> </body> </html>

      Hasil jadi:

membuat jam dgn JS

        Fungsi script dibawah ini adalah untuk menampilkan waktu yang dapat berubah sesuai dengan waktu system komputer.

js_jam.html

<html> <head> <title>Time</title> <script language="JavaScript"> function update() {   var jam = new Date();   var h =jam.getHours();   var m =jam.getMinutes();   var s =jam.getSeconds();     form.jam.value=h+":"+m+":"+s;   setTimeout('update()',500); } </script> </head> <body onload="update()"> <center> Waktu menunjukan pukul : <form name="form"> <input type="text" name="jam" size="8"> </form> </center> </body> </html>

Interaksi Js

·         Interaksi JavaScript dengan komponen radio button.

js_radio.html

<html> <head> <title>Radio Button</title> <script language="JavaScript"> function cek() {   if(form_input.gender[0].checked)   {     form_input.keterangan.value=form_input.gender[0].value;   }else   {     form_input.keterangan.value=form_input.gender[1].value;   } } </script> </head> <body> <h2>Input Data</h2> <form name="form_input"> <pre> Gender : <input type="radio" name="gender" value="Laki-Laki"                onClick="cek()">L <input          type="radio" name="gender" value="Perempuan"                         onClick="cek()">P <input          type="teks" name="keterangan" readonly="true"> </pre> </form> </body> </html>

      Hasil jadi:

    

Gender :        L            P  : 

·         Interaksi JavaScript dengan komponen input yang bertype password. Buatlah dua file berikut  yaitu file js_password yang berfungsi untuk melakukan validasi ganti password dan file js_info untuk informasi apabila ganti password berhasil.

js_info.html

<html> <head><title>Informasi</title> </head> <body> <h2>Password berhasil di rubah ...</h2> </body> </html>

Hasil Jadi :

Password berhasil berubah ...

Js Event dan Fungsi

JAVASCRIPT

A.    Event dan Fungsi

Event adalah aksi dari user yang bisa menghasilkan interaktifitas, seperti ditekannya button oleh mouse sedangkan fungsi adalah suatu blok kode yang diberi nama.

Event	Keterangan
Abort (onAbort)	Terjadi pada saat user mengagalkan proses download image
Blur (onBlur)	Terjadi ketika elemen kehilangan focus, artinya user melakukan klik diluar elemen tersebut
Change (onChange)	Terjadi pada saat usermemodifikasi isi dari data dalam suatu field data
Click (onClick)	Terjadi pada saat user melakukan klik terhadap satu elemen yang berhubungan dengan event
Dblclik (onDblclik)	Terjadi pada saat user melakukan klik dua kali pada satu elemen yang berhubungan dengan event, elemen bisa berupa hyperkink atau elemen dari suatu form
Dragdrop (onDragdrop)	Terjadi pada saat user melakukan drag dan drop elemen di dalam navigator
Error (onError)	muncul ketika error pada saat loading halaman
Focus (onFocus)	Terjadi pada saat user memberikan focus pada satu elemen
Keydown (onKeydown)	Terjadi pada saat user menekan satu tombol pada keyboard
Keypress (onKeypress)	Terjadi pada saat user menekan dan menahan tombol keyboardnya
Keyup (onKeyup)	Terjadi pada saat user melepaskan tekanannya dari tombol keyboard
Load (onLoad)	Terjadi pada saat user memanggil suatu halaman
Mouseover (onMouseover)	Terjadi pada saat user meletakan kursor mouse diatas suatu elemen
Mouseout (onMouseout)	Terjadi pada saat kursor mouse meninggalkan posisi suatu elemen
Reset (onReset)	Terjadi pada saat user menghapus data pada suatu form dengan bantuan tombol reset
Resize (onResize)	Terjadi pada saat user merubah ukuran jendela browser
Select (onSelect)	Terjadi pada saat user melakukan proses select terhadap suatu teks di dalam suatu field berjenis teks atau teks area
Submit (onSubmit)	Terjadi pada saat user melakukan klik terhadap tombol pengiriman suatu form
Unload (onUnload)	Terjadi pada saat user meninggalkan halaman yang sedang diproses

      Untuk lebih memahami mengenai penggunaan event cobalah script dibawah ini.

js_event.html

<html> <head><title>Penanganan Kejadian</title> <script language=”JavaScript”> function pesan() {   alert(“Anda sudah menekan tombol !”); } </script> </head> <body> <input type=”button” name=”clik_me” value=”Clik Me” onClick=”pesan()”> </body> </html>

      Hasil jadi :

clik me

     Hasil jadi setelah clik kalimat di atas :

Anda sudah clik diatas

 ok

java script II

A.    Mendeklarasikan Variabel

Variabel adalah suatu nilai yang isinya dapat berubah-rubah. Pendeklarasian variabel dengan menggunakan kata kunci var.

JavaScript dapat mendaklarasikan suatu variabel secara otomatis. Namun, kebiasaan mendeklarasikan suatu variabel akan sangat bermanfaat apabila kita akan melakukan pendefinisian fungsi.

js_variabel.html

<html> <head> <title>Pendeklarasian Variabel</title> </head> <body> <script language="JavaScript">   var string = "JavaScript";   var bilangan = 101;   var boolean = true;   document.write(“<pre>”);   document.write("Variabel string  berisi   : "+string+"<br>");   document.write("Variabel bilangan  berisi : "+bilangan+"<br>");   document.write("Variabel boolean  berisi  : "+boolean);   document.write(“</pre>”); </script> </body> </html>

Hasil jadi :

 Variable string berisi     : javascript

 Variable bilangan berisi : 101

 Variable boolean berisi  : true