JQuery Syntax

hoho sekarang saya akan melanjutkan latihan JQuery krna kemarin baru perkenalan sama yang namanya JQuery, sekarang akan membahas tentang syntaxnya

jQuery syntax adalah 'tailor-made' untuk memilih HTML elements dan menampilkan bberapa aksi pada elemen2 yang dipilih..

syntax dasarnya adalah : $(selector).action()

• $ tanda untuk mendefinisikan / mengakses jQuery
• (selector) to "query (or find)" element2 html
• jQuery action() apa yg dilakukan pada elements yang dipilih

contoh :

$(this).hide() - meng-hide element yg sekarang digunakan.

$("p").hide() - meng-hide semua dengan element <p> .

$(".test").hide() - meng-hide semua dengan class="test".

$("#test").hide() - meng-hide semua dengan id="test".

- Document Ready Event

kamu seharusnya telah memperhatikan bahwa semua metode jQuery dalam contoh kita, ada di dalam document ready event.

yg diatas adalah untuk mencegah syntax jQuery tidak berjalan semestinya,

team jQuery juga telah membuat event method yang lebih pendek pada document ready event yaitu:

gunakan syntax yang kamu mau, kami pikir bahwa document ready event lebih mudah unutk dimengerti ketika membaca pada kode2.

oleh Gugus Widiandito

source : w3schools.com

Pengenalan jQuery

Assalamualaikum Wr. Wb. 

halo semuaah!

Setelah sekian lama vakum dari blog ini, saya mencoba menghidupkan kembali blognya, ya sekedar sharing2 aja lah ya, yang penting masih jalan haha

kali ini saya akan membahas tentang jQuery, sebagai seorang web developer pasti anda sudah tau apa itu jQuery, iya kan?? nah bagi yang blm tau, saya kasih penjelasan sedikit, sebenarnya saya jg masih belajar, jadi sambil belajar juga sambil berbagi ilmunya..hehe 

ayo kita mulai!!

Apa itu jQuery?

jQuery adalaaahh sebuah library javascript, sedangkan library itu sendiri adlah kumpulan dari fungsi2 siap pakai untuk mempermudah pembuatan aplikasi, jadi kesimpulannya adalah jQuery itu kumpulan fungsi2 yang dapat mempermudah penulisan kodee javascript.

sebelum memulai mempelajarinya, setidaknya anda tau dasar2 dari yang namanya HTML, CSS, daan Javascript.. 

JQuery juga menyederhanakan banyak hal rumit dari javascript, seperti Ajax dan manipulasi DOM

Perpustakaan jQuery berisi beberapa fitur berikut:

Manipulasi HTML / DOM 

Manipulasi CSS 

Metode acara HTML 

Efek dan animasi 

AJAXUtilitas.

Mengapa jQuery?

Ada banyak kerangka kerja JavaScript lainnya di luar sana, namun jQuery nampaknya paling populer, dan juga yang paling dapat diperpanjang.

Banyak perusahaan terbesar di Web menggunakan jQuery, seperti:

Google 

Microsoft

IBM 

Netflix

Apakah jQuery akan bekerja di semua browser?

Tim jQuery mengetahui semua masalah lintas-browser, dan mereka telah menulis pengetahuan ini ke dalam perpustakaan jQuery. JQuery akan berjalan persis sama di semua browser utama, termasuk Internet Explorer 6!

Contoh syntax JQuery :

Created By Gugus Widiandito

referensi : w3schools.com

terimakasih semuaah~~

Pengenalan Javascript

Javascript adalah salah satu bahasa pemrograman yang sangat populer di dunia. kalau anda berencana untuk jadi seorang web programmer. maka hukumnya wajib buat belajar bahasa ini. Javascript merupakan satu dari tiga bahasa yang kalian mesti pelajari selain HTML dan CSS. Tanpa javascript, sebuah website dianggap mati atau tak bernyawa. Lhoh kox bisa?? Saya akan kasih sebuah analogi agar anda mudah memahami apa itu javascript. saya akan bertanya kepada anda? Bagaimana cara membuat secangkir kopi panas? Tentu, anda butuh cangkir,kopi,gula,dan air panas. Apakah setelah itu anda bisa langsung menikmati secangkir kopi panas. jawabannya tentu tidak. Anda butuh seseorang atau anda sendiri untuk memasak air dan mencampurkan kopi, gula, dan air panas ke dalam cangkir. Baru anda bisa menikmatinya. Jadi apa fungsi javascript? javascript bisa di analogikan sebagai seseorang atau anda. Sebuah tombol login di facebook takkan berfungsi tanpa adanya sederet perintah didalamnya. Dan sederet perintah itu dinamakan javascript. Anda butuh aksi untuk membuat secangkir kopi. Anda butuh javascript agar website anda bernyawa. itu kenapa javascript disebut juga actionscript.

Apa saja yang dapat dilakukan oleh Javascript :

1. Javascript dapat mengubah konten HTML

    ketik coding dibawah ini pada web editor kalian ( Budayakan ngetik yah bro. Biar gak kram ).

    

2. Javascript dapat mengubah atribut HTML

3. Javascript dapat mengubah style (CSS) HTML

4. Javascript dapat mengvalidasi data

Jika anda perhatikan, semua coding diatas menggunakan satu dari sekian banyak metodh  HTML yaitu document.getElementById(). Pada artikel selanjutnya kita akan belajar bagaimana menuliskan komentar pada JavaScript. 

Created by Arif Yuni Firmansah

Web Component & Polymer #5 : Ayo Koding

Ada 2 langkah dalam mengimplementasikan web components  pada polymer:
1.membuat custom element pada file html.
2.lalu memanggil custom element tsb ke dalam file index.html dengan perintah
    <link rel="import" href="custom-element-example.html">,
 kemudia menggunakan element tsb di antara tag body pada index.html
ex; <custom-element-example></custom-element-example>

saya akan memberi contoh menulis Hallo Broh pada web components.

1.Untuk memudahkan kita membedakan elemen bawaan polymer dengan elemen buatan kita sendiri saran saya buat satu folder lagi di dalam project kita bernama custom (terserah),uuntuk tempat elemen-elemen buatan kita sendiri.

2.buat file html pada folder yang kita buat tadi dengan nama misal hallo-broh.html
3.tulis script di bawah ini

   keterangan:
      1) file yang harus dipanggil saat kita akan membuat custom elemen baru
      2) nama tag yang akan kita gunakan dalam hal ini tag <hallo-broh></hallo-broh>

      3) letak content tag tsb misal di atas adalah tag h1
      4) tag <polymer-element> adalah untuk tempat semua aksi dan tampilan elemen tsb.
4.lalu simpan setelah itu buka file index.html
5.lalu tulis script di bawah ini.

  keterangan:
1) file yang harus dipanggil pada file index.html jika file tsb tidak dipanggil maka rel="import" tidak jalan karena itu merupakan attribut terbaru yang ditambahkan w3c untuk menggunakan webcomponents
2)jika kita ingin menggunakan element hallo-broh maka kita harus memanggil file tempat elemen hallo-broh itu dibuat tentunya karena ini elemen baru maka kita menggunakan  rel="import".
3)jika kita akan menampilkan elemen hallo-broh maka kita hanya menuliskan <hallo-broh></hallo-broh> saja.

6.lalu kita run file index itu coba kita run di chrome dev editor.

hasilnya

BY : MUHAMAD NUR FASIKHIN

Web Component & Polymer #4 : Penginstalan - Eps 3 ( Alternative )

Secara default folder tambahan yang dibutuhkan dalam Polymer adalah sebagai berikut

Namun jika saat penginstalan menggunakan cara pada Episode 2 tidak mendapatkan folder-folder rsb maka ini solusinya.

Ada 3 cara alternative yaitu:
1.mendownload file zip-nya
2.menggunakan bower.
3.menggunakan git.

tapi penulis di sini akan menjelaskan cara yang ke 2 yaitu menggunakan bower.
Di sini penulis mengansumsikan di PC kalian sudah terinstal nodejs,bower,dan git.
kemudian ikuti langkahnya.

1.klik kanan folder project kalian yang sudah dibuatkan pada chrome dev editor.
2.pilih Git Bash.
3.akan muncul command prompt atau terminal.
4.ketikkan kode ini lalu tekan enter pada setiap kode secara berurutan.
     
      bower install --save Polymer/polymer
   bower install --save Polymer/core-elements
   bower install --save Polymer/paper-elements
5.tunggu hingga semuanya terdownload.

BY;MUHAMAD NUR FASIKHIN

Memaksimalkan Sublime #2 : Better Completion

JavaScript and jQuery 1.9

Twitter Bootstrap 2 and 3

Gambar di atas merupakan salah satu dari fitur better completion.

bagaimana cara instalnya di sublime...?

1.Tekan CTRL+SHIFT+P

2.Cari "Install Package"

3.setelah itu ,jika sudah muncul pilihan baru,cari "Better Completion"

4.Pilih "Better Completion"

5.tunggu hingga selesai diinstal.

6.jika sudah terinstall maka selanjutnya adalah SETTING

SETTING

1.pilih preferences pada menu bar lalu pilih package setting,kemudian pilih sublime better completion ,pilih setting user.
2.Akan muncul document baru.
3.copy dan paste code dibawah ini di document tsb.

{
// --------------------
// sublime-better-completions-Package
// --------------------
// API files is contains the *keyword* such as `html`, `jquery`, `myglossary` with lowercase as filename `sublime-better-completion-api-${filename}.sublime-settings` place in `/packages/User/` (your own) or `/packages/${this-package}/sublime-completions/` (package build-in).
// After you enable, disable or added new your own completions, you might need restart your Sublime Text Editor.
//
// Your own setting file `sublime-better-completion-setting.sublime-settings` need to place in `/packages/User/` and contains all your api setting property that you want to enable.
//
// --------------------
// APIs Setup
// --------------------
// `true` means enable it.
// `false` means disable it.
"completion_active_list": {
// build-in completions
"gruntjs-plugins": false,
"html": true,
"javascript": true,
"jquery": true,
"jquery-sq": false, // Single Quote
"php": true,
"phpci": false,
"twitter-bootstrap": false,
"twitter-bootstrap3": true,
"underscorejs": false,

// Your own completions?
"my-angularjs": false,
"my-glossary": false,
"my-html": false,
"my-javascript": false
}
}

4.kemudian save.
5.lalu pilih prefences  kembali,kemudian pilih setting user.
6.sebelum tanda } tulis koma ( , ) Copy dan paste code di bawah ini

"auto_complete_triggers":
[
{
"characters": "qazwsxedcrfvtgbyhnujmikolpQAZWSXEDCRFVTGBYHNUJMIKOLP",
"selector": "text, source, meta, string, punctuation, constant"
}
]

7.restart sublime kamu.

oleh M.Nur Fasikhin

Web Component & Polymer #4 : Penginstalan - Eps 2

Di Posting Sebelumnya,hanya dijelaskan penginstalan Peralatan Pendukung yang sudah terbundle di Chrome Dev Editor ,kali ini akan dijelaskan bagaimana penginstalan file yang dibutuhkan.

Penginstalan

1.Buka Chrome Dev Editor.
2.pilih icon di paling kiri atas(pojok kiri atas)

 Pilih Folder utama untuk project-project yang menggunakan polymer (folder ini akan selalu menjadi tempat penyimpanan file yang dibutuhkan)

 Akan Muncul tampilan seperti ini setelah memilih folder.Beri Nama Project kita dan pilih sesuai yang ada di gambar ini.

Note : Ketika pembuatan project baru kita harus terhubung ke internet karena masih ada file yang harus didownload otomatis oleh Chrome Dev Editor.

project akan terbuat.

 jika kita terkoneksi internet saat pembuatan project maka Chrome Dev Editor akan mendownload otomatis file tamabahan yang dib

utuhkan.seperti gambar ini.

Note : Jika kita lupa tidak terkoneksi internet saat pembuatan project tidak perlu khawatir ,masih bisa diatasi.

yaitu:

1.Klik Kanan project kita lalu pilih Bower Install

2. maka secara otomatis akan mendownload file tambahan yang dibutuhkan