06 javascript

Click here to load reader

Post on 12-Sep-2014




1 download

Embed Size (px)


Materi Kuliah Internet & Disain Web Teknik Elektro Universitas Brawijaya Malang


  • JavascriptClient Side ScriptingHerman Tolle, ST., MT - ([email protected])

  • Web DinamisWebsite yang dinamis menyediakan interaksi antara pengguna dengan halaman webInteraktifitas tidak didapatkan pada dokumen yang murni HTML saja.Kemampuan pemrograman dapat ditambahkan pada dokumen web untuk interaktifitas

  • Why JavaScript?Web application round-trip expensiveno way to do computation on the client sideexample: form validationWeb pages staticno way to allow users to interact with the pageexample: popup link menusWhat is neededclient-side code

  • Pemrograman WebClient Side Script :Script yang ditambahkan dalam dokumen html, dieksekusi oleh browser client. Javascript, Jscript, VBScriptServer Side Script:Script yang ditambahkan dalam dokumen html, dieksekusi oleh server, hasilnya dalam bentuk html yang dikirim ke client.ASP/ASP.Net, PHP, CGI, JSP, dll

  • Pemrosesan Script













    (Client side processing)



    Java Applets

    Server Side Processing

  • Client Side ScriptScript yang ditambahkan (embedded) pada halaman web yang sebelumnya hanya disusun dengan sintaks HTML. Penambahan script ini mempunyai tujuan tertentu. Misalnya:menampilkan jam dan tanggal yang up- to-date, menu yang dinamis (mis: pull down menu), kontrol terhadap sebuah window, animasi sederhana, animasi mousemaupun untuk validasi form, dll

  • Client Side ScriptAdvantage:Waktu proses relatif cepat karena langsung dieksekusi oleh browser clientTidak memerlukan web server untuk hostingDapat dieksekusi langsung oleh berbagai browser

    Disadvantage:Script bisa dilihat oleh penggunaScript dapat di copy-pasteTidak cocok untuk akses data atau database

  • Server Side ScriptDigunakan untuk membuat aplikasi web atau konten-konten dinamis: news, buku tamu, dllPHP: open source dan banyak digunakan luasActive Server Pages (ASP) dan ASP.Net, teknologi yang dikembangkan oleh MicrosoftColdFusion (CFM), dikembangkan oleh MacromediaJava Server Pages dan Servlet dikembangkan oleh Sun MicrosystemCommon Gateway Interface (CGI), yang dibuat dengan bahasa pemrograman C++ atau PerlServer Side Include (SSI), seperti misalnya Frontpage Server Extension

  • Server Side ScriptAdvantage:Script tidak bisa dilihat oleh pengguna, sehingga tidak dapat di-copy-pasteCocok untuk akses data atau aplikasi databaseUntuk membuat fitur-fitur tertentu yang berguna, misalnya: hit counter, user manajemen, disain yang dinamis, CMS, dll

    Disdvantage:Waktu proses relatif lebih lambat karena dieksekusi oleh serverMemerlukan web server untuk hosting

  • JavaScriptVery little connection to Javamarketing move by NetscapeJavaScript isa scripting languagefor web clientsinterpretedUn-typedDynamic HTMLcombination of JavaScript, CSS and DOMto create very flexible web page presentation

  • Scripts vs. programsa scripting language is a simple, interpreted programming languagescripts are embedded as plain text, interpreted by applicationsimpler execution model: don't need compiler or development environmentsaves bandwidth: source code is downloaded, not compiled executableplatform-independence: code interpreted by any script-enabled browserbut: slower than compiled code, not as powerful/full-featured

  • JavaScript: the first Web scripting language, developed by Netscape in 1995syntactic similarities to Java/C++, but simpler & more flexible(loose typing, dynamic variables, simple objects)

    JScript: Microsoft version of JavaScript, introduced in 1996same core language, but some browser-specific differencesfortunately, IE & Netscape can (mostly) handle both JavaScript & JScript

    JavaScript 1.5 & JScript 5.0 cores conform to ECMAScript standard

    VBScript: client-side scripting version of Microsoft Visual Basic

  • Java AppletApplets are small applications to run on clients machine.It is in separate file than the Web page itself.The downloaded applet executed by the browsers built-in interpreter, that reduces the burden on the server.A Java applet first need to be compiled and needs JDK.JavaScript is a subset of Java and dont need to be compiled, it is an interpreted only language.

  • What's the difference between Java and JavaScript?Java is completely different from JavaScriptJava is a full-fledged, object-oriented prog. lang. It belongs in the same league as C, C++, and other compiled languages. Also, you need to compile a Java program (using JDK) before you can run it, whereas with JavaScript, no compilation is needed- simply open up a text editor, type it, save it, and your browser is ready to run it!

  • Common scripting tasksadding dynamic features to Web pagesvalidation of form dataimage rolloverstime-sensitive or random page elementshandling cookies

    defining programs with Web interfacesutilize buttons, text boxes, clickable images, prompts, frames

  • limitations of client-side scriptingsince script code is embedded in the page, viewable to the worldfor security reasons, scripts are limited in what they can doe.g., can't access the client's hard drivesince designed to run on any machine platform, scripts do not contain platform specific commandsscript languages are not full-featurede.g., JavaScript objects are crude, not good for large project development

  • JavaScript code can be embedded in a Web page using SCRIPT tagsthe output of JavaScript code is displayed as if directly entered in HTML

    JavaScript Page

    // silly code to demonstrate output

    document.write("Hello world!");

    document.write("How are " + "you?");

    Here is some static text as well.

    document.write displays text in page

    text to be displayed can include HTML tags

    the tags are interpreted by the browser when the text is displayed

    as in C++/Java, statements end with ;

    JavaScript comments similar to C++/Java

    // starts a single line comment

    /**/ enclose multi-line comments

  • JavaScript Object ReferenceJavaScript has a wide variety of objects you can use when programming, and each of them have different properties you can control or display through the use of methods. This list should make your programming jobs in JavaScript a little easier. Client-side JavaScript objects Anchor, Applet, Array, Boolean, Button, Checkbox, Date, document, event, FileUpload, form, Frame, Function, Hidden, History, Image, Java, JavaArray, JavaClass, JavaObject, JavaPackage, Layer Link, Location, Math, MimeType, Navigator, netscape, Number, Object, Option, Packages, Password, Plugin, Radio, RegExp, Reset, screen, Select, String, Style, Submit, Sun, Text, Textarea, window.

  • Tips Client Side Script:Gunakan untuk proses-proses sisi client Script Javascript mudah untuk dibajakPelajari bagaimana cara menambahkan ke website kitaSource:http://www.dynamicdrive.comhttp://www.javascriptsource.com

  • ReferensiJavaScript Guide from Netscape (Complete Reference):http://developer.netscape.com/docs/manuals/communicator/jsguide4/index.htmQuick Reference from Shelly Cahsman:http://www.scsite.com/js/qr.htmJavaScript Object Reference:http://www.htmlstuff.com/programmer/jsobjects/index.html

  • Client-side JavaScript objects

  • TaskBaca dan pelajari materi Lanjutan + Contoh, lihat file Javascript2.pptTambahkan pada website Anda:Show the time and date to a Web page.Add a greeting to a Web page based on the time of day.Using mouse event handlers create rollover effect.