Bagikan melalui

Hands On Lab: Alat Web Visual Studio 2013

oleh Tim Perkemahan Web

Unduh Kit Pelatihan Kamp Web

Visual Studio adalah lingkungan pengembangan yang sangat baik untuk . Proyek Windows dan web berbasis NET. Ini termasuk editor teks yang kuat yang dapat dengan mudah digunakan untuk mengedit file mandiri tanpa proyek.

Visual Studio mempertahankan pohon penguraian berfitur lengkap saat Anda mengedit setiap file. Ini memungkinkan Visual Studio untuk memberikan penyelesaian otomatis dan tindakan berbasis dokumen yang tak tertandingi sambil membuat pengalaman pengembangan jauh lebih cepat dan lebih menyenangkan. Fitur-fitur ini sangat kuat dalam dokumen HTML dan CSS.

Semua kekuatan ini juga tersedia untuk ekstensi, sehingga mudah untuk memperluas editor dengan fitur baru yang kuat agar sesuai dengan kebutuhan Anda. Web Essentials adalah kumpulan penyempurnaan terkait web (sebagian besar) ke Visual Studio. Ini termasuk banyak penyelesaian IntelliSense baru (terutama untuk CSS), fitur Tautan Browser baru, JSHint otomatis untuk file JavaScript, peringatan baru untuk HTML dan CSS, dan banyak fitur lain yang penting untuk pengembangan web modern.

Semua kode sampel dan cuplikan disertakan dalam Kit Pelatihan Kamp Web, tersedia di https://aka.ms/webcamps-training-kit.

Gambaran Umum

Tujuan

Di lab langsung ini, Anda akan mempelajari cara:

  • Gunakan fitur editor HTML baru yang disertakan dalam Web Essentials seperti cuplikan kode HTML5 yang kaya dan pengodean Zen
  • Gunakan fitur editor CSS baru yang disertakan dalam Web Essentials seperti pemilih Warna dan tipsalat matriks browser
  • Gunakan fitur editor JavaScript baru yang disertakan dalam Web Essentials seperti Ekstrak ke File dan IntelliSense untuk semua elemen HTML
  • Bertukar data antara browser Anda dan Visual Studio menggunakan Tautan Browser

Prasyarat

Berikut ini diperlukan untuk menyelesaikan lab langsung ini:

Siapkan

Untuk menjalankan latihan di lab langsung ini, Anda harus mengatur lingkungan Anda terlebih dahulu.

  1. Buka jendela Windows Explorer dan telusuri ke folder Sumber lab.
  2. Klik kanan Setup.cmd dan pilih Jalankan sebagai administrator untuk meluncurkan proses penyiapan yang akan mengonfigurasi lingkungan Anda dan menginstal cuplikan kode Visual Studio untuk lab ini.
  3. Jika kotak dialog Kontrol Akun Pengguna ditampilkan, konfirmasikan tindakan untuk melanjutkan.

Catatan

Pastikan Anda telah memeriksa semua dependensi untuk lab ini sebelum menjalankan penyiapan.

Menggunakan Cuplikan Kode

Di seluruh dokumen lab, Anda akan diinstruksikan untuk menyisipkan blok kode. Untuk kenyamanan Anda, sebagian besar kode ini disediakan sebagai Visual Studio Code Cuplikan, yang dapat Anda akses dari dalam Visual Studio 2013 untuk menghindari keharusan menambahkannya secara manual.

Catatan

Setiap latihan disertai dengan solusi awal yang terletak di folder Mulai latihan yang memungkinkan Anda mengikuti setiap latihan secara independen dari yang lain. Perlu diketahui bahwa cuplikan kode yang ditambahkan selama latihan hilang dari solusi awal ini dan mungkin tidak berfungsi sampai Anda menyelesaikan latihan. Di dalam kode sumber untuk latihan, Anda juga akan menemukan folder Akhir yang berisi solusi Visual Studio dengan kode yang dihasilkan dari menyelesaikan langkah-langkah dalam latihan yang sesuai. Anda dapat menggunakan solusi ini sebagai panduan jika Anda memerlukan bantuan tambahan saat Anda bekerja melalui lab langsung ini.

Latihan

Lab langsung ini mencakup latihan berikut:

  1. Bekerja dengan Tautan Browser dan Web Essentials
  2. Memanfaatkan Cuplikan Kode dan IntelliSense

Catatan

Saat pertama kali memulai Visual Studio, Anda harus memilih salah satu koleksi pengaturan yang telah ditentukan sebelumnya. Setiap koleksi yang telah ditentukan dirancang untuk mencocokkan gaya pengembangan tertentu dan menentukan tata letak jendela, perilaku editor, cuplikan kode IntelliSense, dan opsi kotak dialog. Prosedur di lab ini menjelaskan tindakan yang diperlukan untuk menyelesaikan tugas tertentu di Visual Studio saat menggunakan koleksi Pengaturan Pengembangan Umum . Jika Anda memilih koleksi pengaturan yang berbeda untuk lingkungan pengembangan Anda, mungkin ada perbedaan dalam langkah-langkah yang harus Anda mempertimbangkan.

Web Essentials adalah ekstensi Visual Studio yang menambahkan berbagai fitur berguna untuk pengembangan web modern, sebagian besar berfokus pada membuat pengalaman pengembangan web jauh lebih cepat dan lebih menyenangkan. Anda dapat menginstal Web Essentials dari Galeri Ekstensi di Visual Studio.

Browser Link adalah fitur baru yang disertakan dalam Visual Studio 2013 yang menyediakan saluran antara Visual Studio IDE dan browser terbuka apa pun untuk bertukar data antara aplikasi web Anda dan Visual Studio. Web Essentials memperluas Tautan Browser dengan alat untuk memanipulasi model objek DOM dan gaya CSS halaman web Anda langsung dari browser.

Dalam latihan ini, Anda akan menjelajahi beberapa fitur yang didukung oleh Web Essentials dan Browser Link untuk meningkatkan halaman kuis sederhana.

Tugas 1 - Menjalankan Proyek di Beberapa Browser

Dalam tugas ini, Anda akan mengonfigurasi aplikasi web untuk dijalankan di beberapa browser sekaligus, yang berguna untuk pengujian lintas browser.

  1. Buka Microsoft Visual Studio.

  2. Di menu File , pilih Buka | Proyek/Solusi... dan telusuri ex1-WorkingwithBrowserLinkandWebEssentials\Begin di folder Sumber lab (C:\WebCampsTK\HOL\VSWebTooling\Source). Pilih Begin.sln dan klik Buka.

  3. Di toolbar Visual Studio, perluas menu browser dan pilih Telusuri Dengan....

    Telusuri Dengan opsi menu

    Opsi menu Telusuri Dengan

  4. Dalam kotak dialog Telusuri Dengan , pilih Google Chrome dan Internet Explorer dengan menahan tombol CTRL dan klik Atur sebagai Default.

    Telusuri dengan kotak dialog

    Memilih beberapa browser default

  5. Google Chrome dan Internet Explorer sekarang akan muncul sebagai browser default. Klik Batal untuk menutup kotak dialog.

    Google Chrome dan Internet Explorer sebagai browser default

    Google Chrome dan Internet Explorer sebagai browser default

    Catatan

    Setelah mengonfigurasi browser default, opsi Beberapa Browser dipilih di menu browser.

    Beberapa browser

  6. Tekan CTRL + F5 untuk menjalankan aplikasi tanpa penelusuran kesalahan.

  7. Ketika kedua jendela browser terbuka, letakkan salah satunya di atas yang lain untuk melihat pembaruan di kedua browser secara bersamaan. Browser harus menampilkan halaman web dengan persegi panjang biru muda.

    Menempatkan satu browser di atas yang lain

    Menempatkan satu browser di atas yang lain

  8. Jangan tutup browser. Anda akan menggunakannya di tugas berikutnya.

Tugas 2 - Menggunakan Zen Coding untuk Membuat Elemen HTML

Zen Coding adalah plugin editor untuk pengodean dan pengeditan HTML, XML, XSL (atau format kode terstruktur lainnya) berkecepatan tinggi. Inti dari plugin ini adalah mesin singkatan yang kuat yang memungkinkan Anda untuk memperluas ekspresi -mirip dengan pemilih CSS- ke dalam kode HTML. Zen Coding adalah cara cepat untuk menulis HTML menggunakan sintaks pemilih gaya CSS.

Dalam latihan ini, Anda akan menggunakan fitur Zen Coding yang disediakan oleh Web Essentials untuk menghasilkan tombol HTML yang mewakili opsi pertanyaan.

  1. Beralih kembali ke Visual Studio.

  2. Buka file Index.cshtml yang terletak di folderBerandaTampilan | .

  3. <Ganti !-- TODO: tambahkan opsi di sini--> komentari dengan kode berikut, dan tekan TAB.

    button.btn.btn-info.btn-lg.option{Answer $}*4

  4. Kode harus diperluas ke HTML.

    HTML Diperluas HTML diperluas

    HTML diperluas

    Catatan

    Untuk mempelajari selengkapnya tentang sintaksIs pengkodian Zen, lihat artikel berikut ini.

  5. Klik tombol Refresh browser tertaut untuk memperbarui kedua browser.

    Refresh browser tertaut

    Refresh browser tertaut

    Internet Explorer - Halaman diperbarui dengan empat tombol

    Internet Explorer - Halaman diperbarui dengan empat tombol

    Google Chrome - Halaman diperbarui dengan empat tombol

    Google Chrome - Halaman diperbarui dengan empat tombol

  6. Beralih kembali ke Visual Studio.

  7. Anda telah menambahkan tombol ke halaman, tetapi Anda masih perlu menambahkan pertanyaan templat. Untuk melakukannya, Anda akan menggunakan fitur baru di Web Essentials yang disebut generator Lorem Ipsum. Temukan elemen div dengan atribut kelasdepan.

  8. Tambahkan kode berikut sebagai elemen turunan pertama dari div, dan tekan TAB.

    p.lead>lorem5

  9. Kode harus diperluas ke HTML.

    Lorem Ipsum autogenerasi

    Lorem Ipsum dibuat otomatis

    Catatan

    Sebagai bagian dari Zen Coding, Anda sekarang dapat menghasilkan kode Lorem Ipsum langsung di editor HTML. Cukup ketik lorem dan tekan TAB dan teks Lorem Ipsum 30 kata akan disisipkan. Misalnya lorem10 menyisipkan 10 kata Lorem Ipsum.

  10. Anda akan menambahkan logo di bagian atas pertanyaan dengan menggunakan fitur baru lain di Web Essentials yang disebut generator Lorem Pixel. Tambahkan kode berikut sebagai elemen anak pertama dari elemen div dengan kontainer sebagai nilai kelas , dan tekan TAB.

    div.row.header>pix-436x185-abstract

  11. Kode harus diperluas ke HTML.

    Lorem Pixel autogenerasi

    Lorem Pixel dibuat secara otomatis

    Catatan

    Sebagai bagian dari Zen Coding, Anda juga dapat menghasilkan kode Lorem Pixel langsung di editor HTML. Cukup ketik hewan pix-200x200 dan tekan TAB dan tag img dengan gambar 200x200 hewan akan dimasukkan.

  12. Klik tombol Refresh browser tertaut untuk memperbarui kedua browser.

    Internet Explorer - Gambar dan teks autogenerasi

    Internet Explorer - Gambar dan teks yang dibuat secara otomatis

    Google Chrome - Gambar dan teks yang dibuat secara otomatis

    Google Chrome - Gambar dan teks yang dibuat secara otomatis

    Catatan

    Karena gambar dipilih secara acak saat menambahkan cuplikan kode, gambar yang ditampilkan di browser mungkin berbeda.

  13. Jangan tutup browser. Anda akan menggunakannya di tugas berikutnya.

Tugas 3 - Memperbarui Properti Gaya

Dalam tugas ini, Anda akan menggunakan fitur Mode Inspeksi Tautan Browser untuk mendeteksi lokasi yang tepat di mana elemen DOM tertentu dihasilkan dan kemudian memperbarui properti warna elemen tersebut menggunakan pemilih warna yang disediakan oleh Web Essentials.

  1. Di browser Internet Explorer, tekan CTRL + ALT + I untuk mengaktifkan Mode Inspeksi.

  2. Pindahkan penunjuk ke atas batas biru muda dan klik.

    Memindahkan penunjuk ke atas batas biru muda

    Memindahkan penunjuk ke atas batas biru muda

  3. Beralih kembali ke Visual Studio. Perhatikan bagaimana elemen HTML yang Anda pilih di browser juga dipilih di editor HTML Visual Studio.

    Elemen HTML dipilih dalam elemen HTML editor HTML Visual Studio

    Elemen HTML dipilih di editor HTML Visual Studio

  4. Anda sekarang akan memperbarui kelas CSS depan untuk mengubah gaya elemen yang dipilih. Untuk melakukannya, tekan CTRL + , untuk membuka kotak pencarian Navigasi Ke . Ketik site.css dan tekan ENTER untuk membuka file.

    Membuka file Site.css

    Membuka file Site.css

  5. Tekan CTRL + F dan ketik .flip-container .front untuk menemukan pemilih CSS.

  6. Klik kotak biru muda di properti batas kelas untuk membuka Pemilih Warna.

    Membuka Pemilih Warna

    Membuka Pemilih Warna

  7. Perluas Pemilih Warna dengan mengklik tombol chevron dan pilih warna baru.

    Memperluas Pemilih Warna

    Memperluas Pemilih Warna

  8. Tekan CTRL + ALT + ENTER untuk menyegarkan browser tertaut.

  9. Beralih ke Internet Explorer dan perhatikan bagaimana warna batas telah berubah.

    Internet Explorer - Warna batas diperbarui

    Internet Explorer - Warna batas diperbarui

  10. Beralih ke Google Chrome dan perhatikan bagaimana warna batas telah berubah.

    Google Chrome - Warna batas

    Google Chrome - Warna batas diperbarui

  11. Beralih kembali ke Visual Studio.

  12. Buka akhir file Site.css dan tekan CTRL + F untuk menemukan pemilih .btn .

  13. Perhatikan bahwa properti -webkit-border-radius digaris bawahi dengan warna hijau.

    Properti -webkit-border-radius dari properti btn

    Properti -webkit-border-radius dari pemilih btn

  14. Tempatkan tanda sisipan di properti -webkit-border-radius . Garis biru akan muncul di bawah huruf pertama dari kata pertama properti. Ini adalah tag pintar.

  15. Tekan CTRL + . untuk membuka menu saran dan klik Tambahkan properti standar yang hilang (radius batas).

    Tambahkan saran properti standar yang hilang

    Menambahkan saran properti standar yang hilang

  16. Properti radius batas secara otomatis ditambahkan ke aturan CSS.

    Properti standar yang hilang ditambahkan

    Properti standar yang hilang ditambahkan

  17. Pindahkan penunjuk ke properti radius batas untuk menampilkan tipsalat matriks Browser. Tipsalat matriks browser menunjukkan ketersediaan properti di setiap browser.

    Tipsalat matriks browser

    Tipsalat matriks browser

  18. Perhatikan bahwa nilai properti radius batas masih digarisbawarkan. Pindahkan penunjuk ke atas nilai untuk melihat pesan peringatan.

    Peringatan nilai properti radius batas peringatan

    Peringatan nilai properti radius batas

  19. Hapus unit nilai properti radius batas seperti yang disarankan oleh tipsalat.

  20. Karena radius batas adalah properti standar untuk menentukan seberapa sudut batas bulat, Anda dapat menghapus properti dan nilai -webkit-border-radius dari aturan CSS.

  21. Tempatkan tanda sisipan di properti pembungkus kata dan perhatikan bahwa tag pintar juga muncul di bawah ini.

  22. Buka menu dan klik Tambahkan spesifikasi vendor yang hilang.

    Tambahkan saran spesifik vendor yang hilang

    Menambahkan saran khusus vendor yang hilang

  23. Properti -ms-word-wrap secara otomatis ditambahkan ke aturan CSS.

    Properti khusus vendor menambahkan

    Properti khusus vendor ditambahkan

Tugas 4 - Memperbarui Kode HTML dari Browser

Dalam tugas ini, Anda akan menggunakan fitur Mode Desain Tautan Browser untuk mengedit objek DOM dari browser dan mentransfer perubahan ke file sumber HTML di Visual Studio.

  1. Di Google Chrome, tekan CTRL + ALT + D untuk mengaktifkan Mode Desain.

  2. Pindahkan penunjuk ke atas dolor Lorem Ipsum duduk label amet dan klik.

    Mengedit pertanyaan

    Mengedit pertanyaan

  3. Kursor akan muncul. Ganti teks asli dengan Seperti apa tampilannya saat saya menulis pertanyaan yang lebih panjang?, lalu tekan ESC untuk keluar dari Mode Desain.

    Pertanyaan yang diedit Pertanyaan

    Pertanyaan diedit

  4. Beralih kembali ke Visual Studio dan buka Index.cshtml, jika belum dibuka. Perhatikan bahwa teks <dalam elemen p> telah diperbarui.

    Pertanyaan yang diperbarui di halaman HTML

    Pertanyaan yang diperbarui di halaman HTML

Tugas 5 - Meninjau Peringatan Terkait SEO

Search Engine Optimization (SEO) adalah proses membuat peringkat situs web lebih tinggi pada daftar hasil mesin pencari. Semakin tinggi peringkat situs dan semakin konsisten terdaftar, semakin banyak pengunjung situs akan mendapatkan dari mesin pencari itu. Web Essentials menggabungkan alat analitik yang memeriksa HTML, melaporkan masalah yang ditemukan dan memberikan bantuan untuk memperbaikinya.

  1. Buka menu Tampilan dan klik Daftar Kesalahan untuk membuka jendela Daftar Kesalahan .

    Daftar Kesalahan di menu Tampilan

    Daftar Kesalahan di menu Tampilan

  2. Perhatikan bahwa ada peringatan SEO yang memberi tahu bahwa <tag meta> untuk deskripsi halaman hilang. Klik dua kali entri peringatan SEO untuk memperbaikinya.

    Daftar Kesalahan jendela KesalahanJendela

    Jendela Daftar Kesalahan

  3. Dalam kotak dialog Web Essentials, klik Ya untuk menyisipkan tag meta> deskripsi<.

    Kotak dialog Web Essentials kotak

    Kotak dialog Web Essentials

  4. Editor untuk _Layout.cshtml terbuka dan <tag meta> secara otomatis ditambahkan ke bagian kepala file HTML.

    Tag meta secara otomatis ditambahkan di halaman _Layout

    Tag meta secara otomatis ditambahkan ke halaman _Layout

  5. Ubah nilai atribut konten menjadi GeekQuiz dan simpan file.

Latihan 2: Memanfaatkan Cuplikan Kode dan IntelliSense

Dengan Web Essentials, editor HTML telah diperluas dengan fungsionalitas tambahan. Dalam latihan ini, Anda akan melihat beberapa fitur baru yang berguna saat mengembangkan aplikasi web.

Tugas 1 - Menggunakan IntelliSense dalam Dokumen HTML

Fitur baru pertama yang akan Anda lihat dalam tugas ini disebut Dynamic IntelliSense. Dynamic IntelliSense membaca tag dan atribut lain untuk menyimpulkan kemungkinan id yang akan Anda gunakan.

Dalam tugas ini, Anda akan membuat elemen formulir HTML baru yang berisi label dan bidang input. Kemudian Anda akan menambahkan atribut untuk label untuk mengikatnya ke input, dan Anda akan melihat saran IntelliSense berdasarkan id input dalam cakupan.

  1. Buka Visual Studio Express 2013 untuk Web dan solusi Begin.sln yang terletak di folder Source/Ex2-TakingAdvantageofCodeSnippetsandIntelliSense/Begin . Atau, Anda dapat melanjutkan dengan solusi yang Anda peroleh di latihan sebelumnya.

  2. Di Penjelajah Solusi, buka file Index.cshtml yang terletak di folder Beranda Tampilan | .

  3. Tambahkan formulir berikut di dalam elemen bagian<>.

    (Cuplikan Kode - VisualStudio2013WebTooling - Ex2 - Formulir)

    <form>
     <input type="text" id="name" />
</form>

  4. Tag input harus didahului oleh label dengan beberapa deskripsi bidang. Tambahkan label berikut sebelum tag input.

    <form>
    <label id="name">Name</label>       
    <input type="text" id="name" />
</form>

  5. untuk atribut <label> menentukan elemen formulir mana yang terikat dengan label. Nilai atribut harus sama dengan id elemen terkait. Tambahkan atribut untuk ke <elemen label> . Seperti yang ditunjukkan pada gambar berikut, nilai "nama" muncul di kotak IntelliSense, berdasarkan id elemen dalam cakupan yang sama (formulir> penutup<).

    Menampilkan id di IntelliSense

    Menampilkan id di IntelliSense

  6. Hapus elemen formulir> yang baru ditambahkan< dan kontennya.

Tugas 2 - Menggunakan Cuplikan Kode HTML

HTML5 memperkenalkan lebih dari 25 tag semantik baru. Visual Studio sudah memiliki dukungan IntelliSense untuk tag ini, tetapi Visual Studio 2013 membuatnya lebih cepat dan lebih mudah untuk menulis markup dengan menambahkan cuplikan kode baru. Meskipun tag ini tidak rumit, tag tersebut dilengkapi dengan beberapa kehalusan kecil, seperti menambahkan fallback codec yang benar untuk tag audio . Dalam tugas ini, Anda akan melihat cuplikan kode HTML untuk tag audio.

  1. Dalam file Index.cshtml , ketik <aud di dalam <elemen bagian> seperti yang ditunjukkan pada gambar berikut.

    Menyisipkan elemen audio

    Menyisipkan elemen audio

  2. Tekan TAB dua kali dan perhatikan bagaimana kode berikut ditambahkan pada halaman dan kursor ditempatkan pada atribut src sumber pertama.

    <audio controls="controls">
     <source src="file.mp3" type="audio/mp3" />
     <source src="file.ogg" type="audio/ogg" />
</audio>

    Catatan

    Dengan menekan tombol TAB dua kali, cuplikan kode disisipkan. Cuplikan audio menunjukkan penggunaan standar tag audio , dengan dua file sumber untuk dukungan yang ditingkatkan.

  3. Hapus baris kedua dan perbarui sumber baris pertama dengan tautan berikut ke tampilan Menginstal ASP.NET dan Alat Web : https://learn.microsoft.com/shows/asp-net-site-videos/installing-aspnet-web-tools. Kode yang dihasilkan ditunjukkan di bawah ini.

    <audio controls="controls">
     <source src="http://media.ch9.ms/ch9/11d8/604b8163-fad3-4f12-9607-b404201211d8/KatanaProject.mp3" type="audio/mp3" />
</audio>

    Catatan

    File sumber digunakan sebagai contoh. Anda dapat menggunakan sumber lain jika mau.

  4. Tekan CTRL + S untuk menyimpan file.

  5. Tekan CTRL + F5 untuk memulai aplikasi.

  6. Perhatikan bahwa pemutar audio ditambahkan ke aplikasi.

    Pemutar audio di pemutar Audio Internet Explorer

    Pemutar audio di Internet Explorer

    Pemutar audio di pemutar Google Chrome

    Pemutar audio di Google Chrome

  7. Jangan tutup browser. Anda akan menggunakannya di tugas berikutnya.

Tugas 3 - Menggunakan IntelliSense dalam Dokumen JavaScript

Dengan Web Essentials 2013, lembar gaya dan halaman HTML menghasilkan daftar ID dan nama kelas. Dalam tugas ini, Anda akan mempelajari bagaimana daftar tersebut meningkatkan dukungan JavaScript IntelliSense di Web Essentials 2013.

  1. Dalam file Index.cshtml , tambahkan kode berikut untuk menentukan tag skrip untuk kode JavaScript.

    ...
</section>
@section scripts{
    <script type="text/javascript">

    </script>
}

  2. Tambahkan kode berikut di dalam tag skrip untuk menentukan fungsi panggilan balik yang siap.

    (Cuplikan Kode - VisualStudio2013WebTooling - Ex2 - ReadyFunction)

    (function () {
    $(document).ready(function () {

    });
}());

  3. Letakkan tanda sisipan di tag skrip dan tekan CTRL + . untuk membuka menu saran.

  4. Klik Ekstrak ke File.

    Ekstrak JavaScript ke saran file

    Ekstrak JavaScript ke saran file

  5. Di jendela Simpan Sebagai , pilih folder Skrip , beri nama file init.js dan klik Simpan.

    Jendela Simpan Sebagai

    Jendela Simpan Sebagai

    Catatan

    File init.js dibuat dan konten skrip dipindahkan ke file.

    Init.js file yang dibuat dengan konten termasuk

    Init.js file yang dibuat dengan konten yang disertakan

  6. Buka file Index.cshtml dan periksa apakah tag skrip diganti dengan referensi ke file init.js .

    Init.js referensi html

    Init.js referensi html

  7. Buka Penjelajah Solusi dan perhatikan bahwa file init.js disertakan secara otomatis dalam solusi.

    Init.js file yang disertakan dalam

    fileInit.js disertakan dalam solusi

  8. Beralih kembali ke file init.js untuk memperbarui panggilan balik fungsi siap .

  9. Di dalam definisi panggilan balik fungsi yang diteruskan ke siap, tambahkan kode berikut untuk mendapatkan semua elemen oleh atribut kelas tertentu.

    (function () {
     $(document).ready(function () {
          document.getElementsByClassName("")
     });
}());

  10. TekanSpasiCTRL + di antara tanda kutip di dalam panggilan fungsi getElementsByClassName.

    Menampilkan IntelliSense untuk fungsi getElementsByClassName

    Menampilkan IntelliSense untuk fungsi getElementsByClassName

    Catatan

    Perhatikan bahwa IntelliSense menunjukkan kelas yang ditentukan dalam lembar gaya proyek.

  11. Ganti baris yang telah Anda buat dengan kode berikut.

    (function () {
     $(document).ready(function () {
          var audioElements = document.getElementsByTagName("au");
     });
}());

  12. Posisikan kursor setelah au di dalam tanda kutip dalam fungsi getElementsByTagName dan tekan CTRL + Space.

    Menampilkan IntelliSense untuk metode getElementByTagName

    Menampilkan IntelliSense untuk metode getElementsByTagName

  13. Pilih "audio" dari daftar dan tekan ENTER. Hasilnya diperlihatkan dalam gambar berikut.

    Mengambil Elemen Audio

    Mengambil Elemen Audio

  14. Di Penjelajah Solusi, klik kanan file init.js di folder Skrip dan pilih Minify JavaScript dari menu Web Essentials.

    Minifikasi file JavaScript

    Minifikasi file JavaScript

  15. Ketika diminta untuk mengaktifkan minifikasi otomatis saat file sumber berubah klik Ya.

    Mengaktifkan peringatan minifikasi otomatis

    Mengaktifkan peringatan minifikasi otomatis

    Catatan

    init.min.js dibuat dan ditambahkan sebagai dependensi dari file init.js.

    fileInit.min.js dibuat

    fileInit.min.js dibuat

  16. Buka file init.min.js dan perhatikan bahwa file dikurangi.

    Init.min.js konten file

    Init.min.js konten file

  17. Dalam file init.js , tambahkan kode berikut di bawah panggilan fungsi getElementsByTagName untuk memutar semua elemen audio.

    (Cuplikan Kode - VisualStudio2013WebTooling - Ex2 - PlayAudioElements)

    var len = audioElements.length;
for (var i = 0; i < len; i++) {
    audioElements[i].play();
}

  18. Klik CTRL + S untuk menyimpan file. Karena file yang dikurangi sudah dibuka, Anda akan melihat kotak dialog yang mengatakan bahwa file telah dimodifikasi di luar editor sumber. Klik Ya.

    Microsoft Visual StudioPeringatan

    Peringatan Microsoft Visual Studio

  19. Beralih kembali ke file init.min.js untuk memverifikasi bahwa file telah diperbarui dengan kode baru.

    fileInit.min.js diperbarui

    Init.min.js file diperbarui

  20. Klik tombol Refresh Tautan Browser .

  21. Setelah kedua browser disegarkan, pemutar audio yang Anda lihat di tugas sebelumnya akan mulai diputar secara otomatis.

    Pemutar audio disertakan dalam tampilan

    Pemutar audio disertakan dalam tampilan

Ringkasan

Dengan menyelesaikan lab langsung ini, Anda telah mempelajari cara:

  • Gunakan fitur editor HTML baru yang disertakan dalam Web Essentials seperti cuplikan kode HTML5 yang kaya dan pengodean Zen
  • Gunakan fitur editor CSS baru yang disertakan dalam Web Essentials seperti pemilih Warna dan tipsalat matriks browser
  • Gunakan fitur editor JavaScript baru yang disertakan dalam Web Essentials seperti Ekstrak ke File dan IntelliSense untuk semua elemen HTML
  • Bertukar data antara browser Anda dan Visual Studio menggunakan Tautan Browser