Scribd Logo
Upload

Welcome to Scribd!

  • jQuery Web Design Workshop

    Uploaded by

    Fourth Account
    8 views45 pages
    This document provides an overview of jQuery, a popular JavaScript library. It discusses what jQuery is, how to download it, basic jQuery syntax using selectors and events, and common effects like hide/show, fading, and sliding. It includes 10 examples of jQuery code to demonstrate these concepts. The workshop assignment is to complete the 10 examples, take screenshots of the results, and write a report explaining each example and the relevant HTML tags.

    Original Description:

    Original Title

    TM14 - Pengenalan jQuery

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document provides an overview of jQuery, a popular JavaScript library. It discusses what jQuery is, how to download it, basic jQuery syntax using selectors and events, and common effects like hide/show, fading, and sliding. It includes 10 examples of jQuery code to demonstrate these concepts. The workshop assignment is to complete the 10 examples, take screenshots of the results, and write a report explaining each example and the relevant HTML tags.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    8 views45 pages

    jQuery Web Design Workshop

    Uploaded by

    Fourth Account
    This document provides an overview of jQuery, a popular JavaScript library. It discusses what jQuery is, how to download it, basic jQuery syntax using selectors and events, and common effects like hide/show, fading, and sliding. It includes 10 examples of jQuery code to demonstrate these concepts. The workshop assignment is to complete the 10 examples, take screenshots of the results, and write a report explaining each example and the relevant HTML tags.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 45

    Workshop Desain Web

    14. Pengenalan jQuery

    M. Udin Harun Al Rasyid, S.Kom, Ph.D


    http://udinharun.lecturer.pens.ac.id/
    udinharun@pens.ac.id
    Arif Basofi

    1
    2
    Rencana Pembelajaran Semester
    Pekan Pembahasan
    1-2 1-2. HTML Dasar
    3 3. HTML 5
    4 4. Cascading Style Sheet (CSS)
    5 5. Cascading Style Sheet (CSS) advanced
    6-7 6-7. Bootstrap
    8 UTS: Presentasi Proposal Final Project Kuliah
    9 8. Bootstrap
    10-11 9-10. Javascript
    12 11. jQuery
    13 12. Website Layout & Template
    14 13. Colors & Typography
    15-16 UAS: Demo Final Project Kuliah

    3
    Capaian Pembelajaran Kuliah

    ◼ Mahasiswa memahami sintak jQuery.


    ◼ Mahasiswa mampu mengimplementasikan
    jQuery untuk membuat aplikasi berbasis web.

    4
    Konten

    ◼ Introduction
    ◼ What is jQuery
    ◼ Downloading jQuery
    ◼ jQuery Syntax
    ◼ jQuery Selectors
    ◼ Event Methods
    ◼ jQuery Effects

    5
    Introduction
    ◼ jQuery is a JavaScript Library.
    ◼ jQuery greatly simplifies JavaScript programming.
    ◼ The purpose of jQuery is to make it much easier to use JavaScript
    on your website.

    6
    What is jQuery
    ◼ jQuery is a lightweight, "write less, do more", JavaScript library.
    ◼ The purpose of jQuery is to make it much easier to use JavaScript on your
    website.
    ◼ jQuery takes a lot of common tasks that require many lines of JavaScript
    code to accomplish, and wraps them into methods that you can call with a
    single line of code.
    ◼ jQuery also simplifies a lot of the complicated things from JavaScript, like
    AJAX calls and DOM manipulation.
    ◼ The jQuery library contains the following features:
    • HTML/DOM manipulation
    • CSS manipulation
    • HTML event methods
    • Effects and animations
    • AJAX
    • Utilities

    7
    Downloading jQuery
    ◼ There are two versions of jQuery available for downloading:
    ❑ Production version - this is for your live website because it has been minified and compressed
    ❑ Development version - this is for testing and development (uncompressed and readable code)
    ◼ Both versions can be downloaded from jQuery.com.
    ◼ The jQuery library is a single JavaScript file, and you reference it with the HTML
    <script> tag (notice that the <script> tag should be inside the <head> section):

    8
    jQuery Syntax

    http://udinharun.lecturer.pens.ac.id 9
    10
    jQuery Selectors

    http://udinharun.lecturer.pens.ac.id 11
    Percobaan 01:

    http://udinharun.lecturer.pens.ac.id 12
    13
    14
    Percobaan 02:

    http://udinharun.lecturer.pens.ac.id 15
    16
    17
    Percobaan 03:

    http://udinharun.lecturer.pens.ac.id 18
    19
    jQuery Event Methods

    http://udinharun.lecturer.pens.ac.id 20
    Commonly Used jQuery Event
    Methods

    21
    Percobaan 04

    http://udinharun.lecturer.pens.ac.id 22
    23
    Percobaan 05:

    http://udinharun.lecturer.pens.ac.id 24
    25
    Percobaan 06:

    26
    jQuery Effects - Hide and Show

    ◼ Hide, Show, Toggle, Slide, Fade, and Animate.

    http://udinharun.lecturer.pens.ac.id 27
    Percobaan 07:

    http://udinharun.lecturer.pens.ac.id 28
    29
    30
    Percobaan 08:

    http://udinharun.lecturer.pens.ac.id 31
    32
    jQuery Effects - Fading

    ◼ With jQuery you can fade elements in and out of visibility.

    http://udinharun.lecturer.pens.ac.id 33
    Percobaan 09:

    http://udinharun.lecturer.pens.ac.id 34
    http://udinharun.lecturer.pens.ac.id 35
    jQuery Effects - Sliding
    ◼ The jQuery slide methods slide elements up and down.

    http://udinharun.lecturer.pens.ac.id 36
    Percobaan 10:

    http://udinharun.lecturer.pens.ac.id 37
    38
    Tugas Workshop
    ◼ Kalian Kerjakan 10 percobaan source code
    diatas.
    ❑ Buatkan Laporan DOC yang terdiri dari:
    ◼ Cover
    ◼ Course Code, hasil tampilan, dan penjelasan tentang
    tag-tag HTML setiap percobaan.

    39
    NEXT

    Next:
    Website Layout & Template

    40
    References

    ◼ https://www.w3schools.com/jquery/jquery_intro.asp

    41
    IKLAN STRATEGI BELAJAR DAN
    SUKSES MENJADI MAHASISWA

    42
    Strategi Belajar ◼ Cek jaringan, kuota,
    PC/Laptop/smartphone
    Online dan
    ◼ Membaca dan melihat konten materi dari
    Komunikasi yang dosen sebelum pembelajaran dimulai.
    Efektif ◼ Hadir tepat waktu sesuai jam kuliah.
    ◼ Ijin ke dosen jika datang terlambat kuliah
    atau ada kendala.
    ◼ Catat hal-hal yang tidak dimengerti dan
    tanyakan saat kuliah online sinkron.
    ◼ Proaktif dalam forum diskusi secara
    langsung maupun tidak langsung.
    ◼ Kerjakan semua tugas tepat waktu.
    ◼ Jangan sampai tidak mengerjakan tugas.
    ◼ Pastikan tugas sudah sukses diunggah
    secara online.
    ◼ Berkomunikasi dengan dosen sesuai etika. Perhatikan
    Strategi Belajar pemakaian kosakata yang baik, waktu, tempat, alat
    komunikasi.
    Online dan ◼ Diskusi dengan teman/kakak kelas berkaitan dengan
    Komunikasi yang ◼
    tugas dan materi.
    Buat forum diskusi online dengan teman seangkatan.
    Efektif ◼ Ikuti forum komunitas IT di kampus maupun luar kampus.
    ◼ Ikuti forum BEM/HIMA/UKKI
    ◼ Aktif dalam kompetisi lomba mahasiswa.
    ◼ Menambah pengetahuan dari luar kampus secara online:
    ❑ edX
    ❑ Coursera
    ❑ udemy
    ❑ Khan Academy
    ❑ MIT Opencourseware
    ❑ W3schools
    ❑ Youtube
    ❑ etc
    ◼ Siapkan mentalmu dahulu
    ◼ Atur jadwalmu dengan sebaik mungkin
    ◼ Lengkapi alat-alat yang menunjang
    perkuliahan
    ◼ Pasang target IPK
    ◼ Belajar dengan fokus dan kerja keras
    ◼ Review materi kuliah
    ◼ Dekat dengan dosen
    Tips Sukses ◼ Asah skill
    Menjadi Mahasiswa ◼ Jalin jaringan yang luas
    ◼ Berorganisasi
    ◼ Berdoa kepada Allah SWT dan
    meminta doa restu dari kedua orangtua

    You might also like