Scribd Logo
Unggah

Selamat datang di Scribd!

  • Pertemuan5 Javascript

    Diunggah oleh

    Dindin Suryadi
    5 tayangan17 halaman
    java scrivt

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    java scrivt

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    5 tayangan17 halaman

    Pertemuan5 Javascript

    Diunggah oleh

    Dindin Suryadi
    java scrivt

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 17

    19/10/2013

    1
    Java Script
    Bikin Website tambah Interaktif..
    Alam Rahmatulloh
    alam@unsil.ac.id
    Universitas Siliwangi, Tasikmalaya
    JavaScript
    #1 Apa itu JavaScript?
    #2 JavaScript Kenalan Singkat
    #3 Kemampuan JavaScript
    #4 Document Object Model
    #5 Programming Features
    #1 Apa itu JavaScript
    19/10/2013
    2
    Bahasa Scripting
    pada Website
    Bahasa Scripting
    pada Website
    JavaScript
    didesain untuk menambah
    interaktifitas sebuah website
    JavaScript
    Dijalankan oleh Browser
    dan bukan Server
    19/10/2013
    3
    Artinya ?
    bisa di-disable oleh
    pengunjung website
    JavaScript
    adalah bahasa Scripting,
    bukan bahasa pemrograman
    Apakah JavaScript sama
    dengan Java?
    19/10/2013
    4
    TIDAK. JavaScript dan Java
    sangat berbeda baik itu dari
    bahasa maupun dari konsep
    dan disainnya.
    TIDAK. JavaScript dan Java
    sangat berbeda baik itu dari
    bahasa maupun dari konsep
    dan disainnya.
    JavaScript
    bersifat Case Sensitive
    JavaScript
    Nama resmi JavaScript : ECMAScript.
    ECMAScript dikembangkan oleh ECMA
    Organization.
    ECMA-262adalah standar resmi JavaScript.
    Diciptakan oleh Brendan Eich. Muncul
    pertama kali di semua browser
    Netscape dan Microsoft pada tahun 1996.
    Disetujui sebagai standar internasional
    pada tahun 1998
    19/10/2013
    5
    #2 JavaScript
    QuickStart
    fungsi JavaScript berada di
    <script>...</script>
    e.g.
    <head>
    <script>
    function displayDate()
    {
    document.getElementById("demo").
    innerHTML=Date();
    }
    </script>
    </head>
    19/10/2013
    6
    <body>
    <h1>My First JavaScript</h1>
    <p id="demo">This is a
    paragraph.</p>
    <button type="button"
    onclick="displayDate()">Display
    Date</button>
    </body>
    sebelum di-klik
    sesudah di-klik
    #3 Kemampuan
    Javascript
    19/10/2013
    7
    Kemampuan JavaScript
    # Menulis Output ke HTML
    # Mengganti konten HTML
    # Bereaksi terhadap Event
    (misal klik)
    # Mengubah Style HTML
    # Mengecek sebuah input
    1 Menulis Output ke HTML
    <head>
    <script>
    function lakukanSesuatu()
    {
    document.write("<p>Ini paragraf
    yang ditulis
    JavaScript</p>");
    }
    </script>
    </head>
    ...
    <button type="button"
    onclick="lakukanSesuatu()">Sesua
    tu</button>
    ...
    19/10/2013
    8
    2 Mengganti Konten HTML
    <head>
    <script>
    function lakukanSesuatu()
    {
    x=document.getElementById(demo);
    x.innerHTML="Hello";
    </script>
    </head>
    19/10/2013
    9
    3 Interaksi terhadap Event
    <button type="button"
    onclick=lakukanSesuatu()">
    Click Me!</button>
    4 Mengubah Style HTML
    <script>
    function lakukanSesuatu()
    {
    document.getElementById("demo").st
    yle.color="#ff0000";
    }
    </script>
    19/10/2013
    10
    #5 Pengecekan Input
    <script>
    function myFunction()
    {
    var
    x=document.getElementById("demo").
    value;
    if(x==""||isNaN(x))
    {
    alert("Not Numeric");
    }
    }
    </script>
    <body>
    <h1>My First JavaScript</h1>
    <p>Please input a number.</p>
    <input id="demo" type="text">
    <button type="button"
    onclick="myFunction()">Click
    Me!</button>
    </body>
    19/10/2013
    11
    JavaScript TIDAK HARUS
    diletakkan didalam
    <head>...</head>
    bisa di dalam
    <body>...</body>
    19/10/2013
    12
    Atau seperti CSS, di
    File Lain
    <script type="text/javascript"
    src="http://www.dakta.com/wpcontent/plugins/audio-
    player/assets/audio-player.js?ver=2.0.4.1"></script>
    #4 Document Object
    Model
    document.getElementByID("some id")
    Standar W3C untuk mengakses
    elemen HTML
    19/10/2013
    13
    ketika sebuah halaman Web
    diLoad, Browser membuat
    sebuah Document Object
    Model (DOM) dari halaman
    tersebut
    model HTML DOM dibangun
    dalam bentuk trees dari
    object.
    *Tree menggambarkan BEBERAPA contoh Elemen HTML
    jika ingin memanipulasi
    elemen HTML, kita harus
    menemukan elemen HTML-
    nya terlebih
    dahulu.
    19/10/2013
    14
    jika ingin memanipulasi
    elemen HTML, kita harus
    menemukan elemen HTML-
    nya terlebih
    dahulu.
    *Sebagaimana Selector pada CSS
    3 cara
    3 Cara
    Menemukan elemen HTML
    - dengan id
    - dengan tag
    - dengan class
    dengan id
    var x=document.getElementById("intro");
    19/10/2013
    15
    dengan tag
    var x=document.getElementById("main");
    var y=x.getElementsByTagName("p");
    #5 Programming
    Features
    Comment
    var x=5; /* declare x and assign 5 to it */
    var y=x+2; // declare y and assign x+2 to
    it
    Variable
    var x=5;
    var y=6;
    var z=x+y;
    19/10/2013
    16
    Tipe Data
    var x // Now x is undefined
    var x = 5; // Now x is a Number
    var x = "John"; // Now x is a String
    Object
    person=new Object();
    person.firstname="John";
    person.lastname="Doe";
    person.age=50;
    person.eyecolor="blue";
    IF-Else
    if (time<20)
    {
    x="Good day";
    }
    else
    {
    x="Good evening";
    }
    Looping
    for (var i=0;i<cars.length;i++)
    {
    document.write(cars[i] + "<br>");
    }
    19/10/2013
    17
    dan lain lain...
    Further references :
    http://www.w3schools.com
    next session
    > Server Side Programming

    Anda mungkin juga menyukai