Bagaimana cara menginstal html5?

npm init html5-boilerplate new-site
cd new-site
npm install
npm start
2 adalah lintas platform. Ia bekerja di mana pun node dan npm bekerja. Satu-satunya persyaratan adalah untuk npx, yang membutuhkan npm versi 5. 2 atau lebih besar dan npm init yang membutuhkan versi npm lebih besar dari 6. 0. Jika Anda terjebak pada versi npm yang lebih lama, Anda masih dapat menggunakan
npm init html5-boilerplate new-site
cd new-site
npm install
npm start
2 dengan menjalankan perintah berikut untuk menginstal proyek secara global

Show

npm install -g create-html5-boilerplate

Kemudian Anda dapat menggunakan

npm init html5-boilerplate new-site
cd new-site
npm install
npm start
_2 seperti pada contoh berikut

create-html5-boilerplate new-site
cd new-site
npm install
npm start
_

Menginstal Versi Tertentu

Anda juga dapat menginstal versi tertentu

npx create-html5-boilerplate new-site --release=7.2.0
cd new-site
npm install
npm start

BERKONTRIBUSI

Menyiapkan Salinan Lokal

  1. Kloning repo dengan
    npm init html5-boilerplate new-site
    cd new-site
    npm install
    npm start
    
    _7
  2. Jalankan
    npm init html5-boilerplate new-site
    cd new-site
    npm install
    npm start
    
    8 di folder root
    npm init html5-boilerplate new-site
    cd new-site
    npm install
    npm start
    
    2
  3. Jalankan
    yarn create html5-boilerplate new-site
    cd new-site
    yarn install
    yarn start
    
    _0 untuk membuat npm menjalankan salinan lokal alih-alih mengunduh dari registri
  4. Sekarang Anda dapat menggunakan
    yarn create html5-boilerplate new-site
    cd new-site
    yarn install
    yarn start
    
    1 dan
    yarn create html5-boilerplate new-site
    cd new-site
    yarn install
    yarn start
    
    2

catatan. Anda dapat menggunakan

yarn create html5-boilerplate new-site
cd new-site
yarn install
yarn start
3 dari
npm init html5-boilerplate new-site
cd new-site
npm install
npm start
2 tanpa menjalankan
yarn create html5-boilerplate new-site
cd new-site
yarn install
yarn start
0 juga dimungkinkan untuk menjalankan secara langsung titik masuk NodeJS
yarn create html5-boilerplate new-site
cd new-site
yarn install
yarn start
6 atau
yarn create html5-boilerplate new-site
cd new-site
yarn install
yarn start
7
yarn create html5-boilerplate new-site
cd new-site
yarn install
yarn start
8 adalah folder yang diabaikan git, jadi Anda harus menggunakan folder ini untuk pengujian

Bab ini menjelaskan prosedur dan alat yang tersedia untuk mengembangkan aplikasi HTML5 di NetBeans IDE, termasuk informasi tentang cara membuat, menjalankan, mengintegrasikan, dan men-debug aplikasi Anda

Bab ini berisi bagian-bagian berikut

19. 1 Tentang Mengembangkan Aplikasi HTML5

Proyek aplikasi HTML5 adalah aplikasi yang ditampilkan di browser di desktop atau perangkat seluler Anda. Aplikasi HTML5 biasanya terdiri dari file HTML, CSS, dan JavaScript. JavaScript yang digunakan untuk memanipulasi dan memproses objek dalam aplikasi umumnya ditangani di sisi klien oleh mesin JavaScript di browser web. Aplikasi HTML5 sering digunakan sebagai klien yang menggunakan berbagai layanan web. IDE menyediakan alat berikut untuk mendukung pengembangan aplikasi HTML5 dan HTML5 dalam aplikasi web PHP dan Java

  • Wizard untuk membuat aplikasi dan file HTML5

  • Penyelesaian kode JavaScript, debugging dan pengujian

  • Inspeksi kode menggunakan Chrome atau browser WebKit yang dibundel

  • Editor file preprosesor CSS dan CSS serta alat penataan gaya

  • Wizard untuk menghasilkan klien JavaScript untuk layanan web RESTful

  • Monitor Jaringan untuk panggilan layanan web REST dan komunikasi WebSocket

IDE juga menyediakan alat untuk mengemas aplikasi HTML5 sebagai aplikasi seluler asli melalui Apache Cordova

19. 2 Bekerja dengan Aplikasi HTML5

Alur kerja berikut menunjukkan cara bekerja dengan aplikasi HTML5

Cara mengembangkan aplikasi HTML5

19. 3 Membuat Proyek Aplikasi HTML5

IDE menyediakan panduan untuk membuat proyek HTML5 dan file HTML, CSS, dan JavaScript yang biasanya berisi proyek HTML5. Saat Anda menggunakan panduan Proyek Baru untuk membuat proyek HTML5, Anda memiliki opsi untuk membuat proyek berdasarkan templat situs. Dalam wisaya Anda dapat menentukan templat situs yang terletak di sistem lokal Anda atau mengunduh salah satu templat situs yang tercantum dari repositori online

Untuk membuat proyek aplikasi HTML5

  1. Pilih File > Proyek Baru dari menu utama

  2. Pilih template proyek Aplikasi HTML5 dari kategori HTML5

    Atau, pilih Aplikasi HTML5 dengan Sumber yang Ada untuk mengimpor proyek yang ada sebagai aplikasi HTML5

    Klik Berikutnya

  3. Tentukan templat situs untuk aplikasi atau pilih Tanpa Templat Situs untuk membuat aplikasi kosong yang hanya berisi file index.html. Klik Berikutnya

  4. Tentukan file JavaScript untuk ditambahkan ke proyek (opsional)

  5. Klik Selesai

Saat Anda mengklik Selesai, IDE akan membuat proyek dan menampilkan simpul untuk proyek tersebut di jendela Proyek

19. 3. 1 Cara Membuat Aplikasi HTML5 untuk Platform Seluler

IDE menyertakan templat situs HTML5 yang memungkinkan Anda membuat aplikasi seluler dengan mudah yang dibangun di atas platform Cordova. Cordova memungkinkan Anda membuat aplikasi yang memanfaatkan beberapa fungsi asli yang disediakan di perangkat seluler Android dan iOS. Anda dapat membuat aplikasi HTML5 menggunakan template Cordova atau menambahkan dukungan untuk Cordova ke aplikasi HTML5 Anda

Anda harus menginstal Cordova di sistem lokal Anda sebelum dapat membuat proyek Cordova. IDE akan meminta Anda untuk menginstal Cordova jika instalasi Cordova Anda tidak terdeteksi saat Anda membuat aplikasi Cordova atau saat Anda menambahkan dukungan untuk Cordova ke aplikasi. Anda dapat menemukan petunjuk penginstalan dan detail tambahan tentang platform di situs berikut

http://cordova.apache.org/

Catatan

IDE menggunakan Git dan NodeJS untuk bekerja dengan Cordova. Anda harus mengonfigurasi pengaturan proxy untuk Git dan NodeJS dengan benar jika Anda menggunakan proxy

Untuk mengembangkan aplikasi untuk platform seluler, Anda harus terlebih dahulu menginstal perangkat lunak platform yang diperlukan dan platform tersebut harus dikenali oleh IDE. Jika Anda mengembangkan untuk platform Android, Anda perlu menentukan lokasi SDK Android di sistem lokal Anda

Catatan

Perangkat iOS dan emulator hanya tersedia di OS X. IDE secara otomatis mendeteksi detail penginstalan iOS di OS X

Cara mendaftarkan platform seluler Android dengan IDE

  1. Buka jendela Opsi di IDE

  2. Klik tab Platform Seluler di kategori Lain-Lain di jendela Opsi

  3. Ketik lokasi penginstalan Android SDK atau klik Telusuri untuk menemukan penginstalan di sistem lokal Anda

Cara membuat aplikasi Cordova baru

  1. Pilih File > Proyek Baru dari menu utama

  2. Pilih template proyek Aplikasi Cordova dari kategori HTML5. Klik Berikutnya

  3. Tentukan nama proyek dan lokasi

  4. Klik Berikutnya di panel Template Situs

    Templat Cordova Hello World sudah dipilih

  5. Tentukan file JavaScript untuk ditambahkan ke proyek (opsional)

    Anda dapat memodifikasi Berkas JavaScript yang disertakan dalam proyek kapan saja di kategori Berkas JavaScript di jendela Properti Proyek

  6. Tentukan detail konfigurasi proyek Cordova (opsional)

    Anda dapat mengedit detail konfigurasi kapan saja di kategori Cordova di jendela Properti Proyek

  7. Klik Selesai

Bagaimana cara menambahkan dukungan Cordova ke aplikasi HTML5

  1. Klik kanan simpul proyek di jendela Proyek dan pilih Properti

  2. Pilih kategori Cordova di jendela Project Properties

  3. Klik Buat Sumber Daya Cordova di panel Cordova

    Setelah Anda mengklik Buat Sumber Daya Cordova, penambahan IDE membuat file konfigurasi Cordova di proyek dan mengaktifkan dua tab di panel Cordova tempat Anda dapat menentukan detail tambahan

  4. Tentukan ID aplikasi, nama dan versi untuk aplikasi Cordova. Klik Oke

Bagaimana cara menambahkan plugin Cordova ke aplikasi Cordova

  1. Klik kanan aplikasi Cordova di jendela Proyek dan pilih Properti di menu popup

  2. Pilih kategori Cordova di jendela Project Properties dan klik tab Plugins

  3. Pilih plugin Cordova dari daftar plugin yang tersedia dan klik panah kanan ( > ) untuk memindahkan plugin ke daftar plugin yang dipilih. Klik Oke

19. 3. 2 Cara Menambahkan Dukungan untuk Fitur HTML5 ke Aplikasi

Anda dapat memasukkan JavaScript dan CSS ke aplikasi web Java dan aplikasi PHP dengan menambahkan file ke proyek. Anda juga dapat menggunakan jendela Properti Proyek untuk menyertakan pustaka JavaScript dan mengonfigurasi praprosesor CSS yang ingin Anda gunakan dalam proyek. Anda dapat menjalankan aplikasi di browser seluler dan di perangkat Android dan iOS serta emulator dan men-debug file JavaScript. Tidak perlu mengubah jenis proyek aplikasi atau membuat proyek baru

Cara menambahkan pustaka JavaScript ke web Java atau aplikasi PHP

  1. Klik kanan node proyek di jendela Proyek dan pilih Properti di menu popup

  2. Pilih kategori File JavaScript

  3. Pilih pustaka JavaScript yang ingin Anda tambahkan dan klik tombol panah kanan ( > ). Klik Oke

19. 4 Menjalankan Aplikasi HTML5

Proyek aplikasi HTML5 biasanya dijalankan di browser di desktop atau perangkat seluler Anda. Saat Anda menjalankan aplikasi HTML5 di sistem lokal Anda untuk pengujian atau debug, Anda tidak perlu mengompilasi atau menerapkan aplikasi ke server karena mesin JavaScript di browser biasanya menangani semua skrip di aplikasi. Untuk menjalankan aplikasi Anda terlebih dahulu menentukan browser dan kemudian menjalankan aplikasi

Anda dapat menjalankan aplikasi HTML5 pada emulator untuk platform seluler atau menerapkan aplikasi ke perangkat seluler

19. 4. 1 Cara Menentukan Browser

Saat Anda ingin menjalankan aplikasi atau file HTML5 dari IDE, Anda perlu menentukan browser target. IDE memungkinkan Anda untuk dengan mudah memilih salah satu browser yang diinstal pada sistem lokal Anda atau browser WebKit tertanam. Jika Anda sedang mengembangkan aplikasi untuk perangkat seluler, Anda dapat memilih untuk menjalankan aplikasi di emulator untuk perangkat seluler atau menerapkan langsung ke perangkat seluler

Untuk menentukan browser untuk aplikasi HTML5

  • Untuk menentukan browser target untuk aplikasi, lakukan salah satu langkah berikut

    • Pilih aplikasi di jendela Proyek lalu pilih browser dari daftar drop-down di Toolbar

    • Buka jendela Properti Proyek dan pilih browser di panel Jalankan jendela

Daftar browser diatur dalam tabel untuk membantu Anda memilih browser target. Jika Anda memilih browser atau perangkat di baris atas tabel, Anda dapat men-debug aplikasi di IDE dan menggunakan fitur lain yang disediakan saat IDE terintegrasi dengan browser. Tabel mengatur browser di kolom berikut

  • Kolom Peramban menampilkan peramban web yang tersedia di sistem lokal Anda. Saat Anda memilih browser di kolom Browser, aplikasi akan diluncurkan di jendela di browser yang dipilih saat Anda menjalankan aplikasi

  • Kolom Browser Perangkat Seluler menampilkan daftar perangkat seluler yang dapat Anda pilih sebagai platform target dan browser yang tersedia di platform tersebut. Saat Anda memilih browser di kolom Browser Perangkat Seluler, IDE akan menjalankan aplikasi di browser pada perangkat seluler yang dipilih atau di emulator untuk perangkat tersebut

  • Kolom Cordova menampilkan daftar perangkat seluler yang dapat Anda pilih sebagai platform target. Saat Anda memilih perangkat di kolom Cordova, IDE akan mengemas proyek sebagai aplikasi seluler asli dan menerapkan aplikasi ke perangkat seluler atau emulator. Klik Configure Cordova untuk membuka panel Cordova di jendela Project Properties

Anda harus menginstal Apache Cordova di mesin lokal Anda jika ingin menentukan target di kolom Cordova

Jika Anda ingin menjalankan aplikasi di browser pada perangkat seluler Android atau di emulator Android, Anda perlu menginstal Android SDK di sistem lokal Anda dan mendaftarkan lokasi Android SDK di jendela Opsi. Perangkat dan simulator iOS hanya tersedia di OS X

Jika Anda ingin men-debug aplikasi atau file HTML5, atau menyinkronkan IDE dengan browser Anda untuk memeriksa kode Anda, Anda harus memilih Chrome dengan Konektor NetBeans atau Browser WebKit Tertanam sebagai browser target

19. 4. 2 Cara Menjalankan Aplikasi

Setelah Anda menentukan browser, Anda dapat menjalankan aplikasi dengan cara berikut

  • Klik kanan node proyek di jendela Proyek dan pilih Jalankan di menu popup

  • Pilih aplikasi di jendela Proyek lalu klik Jalankan di Bilah Alat atau pilih Jalankan > Jalankan Proyek (F6) di menu utama

Saat Anda menjalankan aplikasi, IDE secara otomatis membuka aplikasi di browser atau perangkat seluler yang dipilih dan membuka Log Browser di jendela Keluaran

Jika lebih dari satu proyek terbuka, Anda dapat menentukan salah satu proyek sebagai Proyek Utama. Setelah Anda menentukan proyek sebagai Proyek Utama, pintasan keyboard F6 akan selalu menjalankan Proyek Utama terlepas dari proyek yang dipilih di jendela Proyek

19. 4. 3 Cara Menjalankan File

Anda dapat menjalankan file HTML dalam aplikasi HTML5 dengan cara berikut

  • Klik kanan file HTML di jendela Proyek dan pilih Jalankan File dari menu popup (Shift-F6)

  • Jika file HTML terbuka di editor, Anda dapat mengklik kanan file tersebut dan memilih Run File (Shift-F6) dari menu popup atau klik tombol Run File di tab Selection di jendela CSS Styles

Saat Anda menjalankan file, IDE membuka file di browser target untuk aplikasi tersebut

19. 5 Mengintegrasikan Proyek HTML5 dengan Browser

Ekstensi NetBeans tersedia untuk browser Chrome yang memungkinkan IDE dan browser untuk berkomunikasi. Untuk mengintegrasikan IDE dengan browser Chrome, Anda perlu memasang ekstensi NetBeans Connector dari Toko Web Chrome atau memasang ekstensi secara manual. Setelah Anda menginstal ekstensi, Anda dapat melakukan tugas berikut di browser Chrome

  • Gunakan mode Inspeksi untuk memilih dan menemukan elemen dalam kode Anda

  • Men-debug file JavaScript

  • Pilih berbagai ukuran browser dari menu tindakan NetBeans

Jangan tutup bilah info di tab di browser Chrome yang memberi tahu Anda bahwa "Konektor NetBeans sedang men-debug tab ini". Menutup bilah info akan memutus IDE dari browser Chrome. Untuk menyambungkan kembali IDE, tutup tab tempat aplikasi berjalan dan jalankan kembali aplikasi dari IDE

Catatan. Anda hanya perlu menginstal ekstensi satu kali

19. 5. 1 Cara Memasang Ekstensi dari Toko Web Chrome

Setelah mengunduh, Anda dapat melakukan langkah-langkah berikut untuk menginstal ekstensi NetBeans untuk browser Chrome

Untuk menginstal ekstensi NetBeans untuk Chrome

  1. Klik kanan node proyek HTML5 di jendela Project Projects dan pilih Properties di menu popup

    Alternatifnya, Anda dapat memilih browser target untuk proyek dari daftar drop-down di toolbar

  2. Di panel Jalankan jendela Properti, pilih Chrome dengan Konektor NetBeans di daftar tarik-turun server. Klik Oke

  3. Klik kanan simpul proyek HTML5 di jendela Proyek dan pilih Jalankan

    Saat Anda mengeklik Jalankan, IDE membuka dialog yang meminta Anda memasang ekstensi dari Toko Web Chrome

  4. Klik Buka Toko Web Chrome di kotak dialog Instal Ekstensi Chrome

  5. Klik Gratis di Toko Web Chrome untuk memasang ekstensi dan mengonfirmasi bahwa Anda ingin menambahkan ekstensi NetBeans Connector

  6. Setelah extension terpasang di browser Chrome, klik Re-run Project di kotak dialog Install Chrome Extension untuk membuka aplikasi HTML5 di browser Chrome

    Anda akan melihat bilah info di tab di browser Chrome yang memberi tahu Anda bahwa "Konektor NetBeans sedang men-debug tab ini"

19. 5. 2 Cara Memasang Ekstensi Secara Manual

Jika Anda tidak dapat terhubung ke Toko Web Chrome, Anda dapat memasang ekstensi Konektor NetBeans secara manual dengan melakukan langkah-langkah berikut

Untuk menginstal ekstensi Chrome secara manual

  1. Buka browser Chrome Anda untuk chrome://chrome/extensions/

  2. Di sistem lokal Anda, navigasikan ke direktori NETBEANS_INSTALL/webcommon/modules/lib, di mana NETBEANS_INSTALL adalah instalasi IDE

  3. Seret ekstensi Konektor NetBeans (netbeans-chrome-connector.crx) dari direktori lib ke tab Ekstensi di jendela browser Chrome dan setujui penambahan ekstensi

  4. Klik kanan simpul proyek HTML5 di jendela Proyek dan pilih Jalankan untuk membuka aplikasi di browser

    Anda akan melihat bilah info di tab di browser Chrome yang memberi tahu Anda bahwa "Konektor NetBeans sedang men-debug tab ini"

19. 6 Memeriksa Kode HTML5 dengan Browser

Anda dapat menggunakan mode Inspeksi untuk membantu Anda menemukan dan mengedit kode sumber di aplikasi HTML5. Saat mode Inspeksi diaktifkan, informasi tentang beberapa tindakan yang Anda lakukan di browser seperti memilih dan menyorot elemen dikomunikasikan ke IDE. Saat Anda menjalankan aplikasi, Anda dapat menggunakan browser untuk membantu menemukan elemen HTML dalam kode sumber Anda. Saat Anda memilih atau menempatkan kursor di atas elemen di jendela browser, elemen tersebut secara bersamaan disorot atau dipilih di jendela DOM Browser IDE. Saat Anda memilih elemen, aturan gaya untuk elemen tersebut secara otomatis ditampilkan di tab Pilihan di jendela Gaya CSS

Untuk memeriksa aplikasi Anda dengan browser

  1. Setel browser target untuk aplikasi ke salah satu browser atau perangkat yang tercantum di baris atas dalam daftar drop-down pilihan browser

    Browser dan perangkat di baris atas daftar drop-down pilihan browser mendukung mode Inspeksi

  2. Jalankan aplikasi atau file

    Saat Anda menjalankan aplikasi, browser target terbuka dan menampilkan halaman indeks atau file di jendela

  3. Aktifkan mode Inspeksi (Ctrl+Shift+S) di browser

    Di browser Chrome Anda dapat mengaktifkan mode Inspeksi di menu NetBeans Actions. Di Peramban WebKit Tertanam, Anda dapat mengeklik tombol Periksa di bilah alat. Alternatifnya, Anda dapat mengeklik ikon Inspeksi di jendela Browser DOM

  4. Gerakkan kursor Anda atau pilih elemen HTML di halaman di jendela browser

Saat Anda memindahkan kursor atau memilih elemen di browser, konten jendela berikut di IDE diperbarui untuk disinkronkan dengan tindakan Anda di browser

  • Jendela DOM peramban. Jendela Browser DOM menampilkan pohon DOM dari halaman saat ini. Saat Anda menggerakkan kursor ke atas elemen di browser, elemen tersebut disorot di jendela DOM Browser. Anda dapat mengklik dua kali elemen di jendela untuk membuka file sumber di editor

  • Jendela Gaya CSS. Tab Pilihan dari jendela Gaya CSS menampilkan aturan gaya untuk elemen yang dipilih. Anda dapat mengedit aturan untuk elemen di jendela CSS Styles

Saat Anda mengaktifkan mode Inspeksi di browser, elemen apa pun yang berada dalam status 'hover' akan tetap dalam status hingga Anda menonaktifkan mode Inspeksi. Anda dapat memilih elemen dalam status hover dan memeriksa serta memodifikasi properti status hover dan melihat perubahan pada elemen di browser Anda

Untuk mengaktifkan mode Inspeksi di browser Chrome, Anda perlu menginstal ekstensi NetBeans untuk mengintegrasikan IDE dengan browser

19. 7 Mengubah Ukuran Layar Browser

Satu aplikasi HTML5 dapat dilihat di berbagai perangkat dengan ukuran layar berbeda. IDE dapat membantu Anda mengembangkan proyek yang dapat merespons dan beradaptasi dengan perangkat tampilan yang berbeda dengan memungkinkan Anda melihat halaman pada ukuran layar yang berbeda. Saat Anda menjalankan aplikasi HTML5 dari IDE, Anda dapat memilih untuk melihat halaman dalam salah satu ukuran layar default atau membuat ukuran layar kustom

Anda dapat melihat aplikasi Anda di browser apa pun, tetapi jika Anda ingin dapat dengan cepat beralih di antara ukuran layar, Anda perlu menentukan salah satu browser terintegrasi berikut sebagai browser target

  • Chrome dengan Konektor NetBeans

  • Browser WebKit Tertanam

Saat Anda melihat aplikasi di salah satu browser terintegrasi, Anda dapat memilih ukuran tampilan di menu di browser

Anda dapat menentukan browser target untuk aplikasi di jendela Project Properties atau di daftar drop-down Set Project Configuration di toolbar IDE

19. 7. 1 Cara Beralih Antar Ukuran Layar

Peramban terintegrasi menyediakan menu yang memungkinkan Anda beralih di antara ukuran layar umum yang telah dikonfigurasi sebelumnya di menu. Saat Anda memilih ukuran layar baru, area tampilan browser akan diubah ukurannya ke ukuran yang dipilih. Dengan mengubah ukuran layar, Anda dapat melihat bagaimana tata letak aplikasi merespons berbagai ukuran, misalnya, sebagai hasil dari kueri media yang ditentukan dalam lembar gaya

Setelah Anda meluncurkan aplikasi, Anda dapat memilih ukuran layar dari menu di browser. Lokasi menu untuk memilih opsi ukuran layar bergantung pada browser target

  • Chrome dengan Konektor NetBeans. Klik ikon NetBeans di bilah lokasi URL untuk membuka menu dan memilih ukuran layar

  • Browser WebKit Tertanam. Pilih ukuran layar di menu Opsi Lainnya atau klik ikon di bilah alat. Bilah alat di jendela Peramban Web berisi elemen-elemen berikut

    • Tampilkan ikon perangkat. Klik ikon perangkat tampilan untuk mengubah ukuran area tampilan ke ukuran yang dipilih. Anda dapat menempatkan kursor di atas ikon untuk menampilkan dimensi perangkat layar. Anda dapat mengubah ikon mana yang ditampilkan di bilah alat dengan memilih Kustomisasi di daftar drop-down Opsi Lainnya

    • Menu Pilihan Lainnya. Pilih ukuran jendela di daftar drop-down untuk melihat konten halaman dalam ukuran jendela yang dipilih. Daftar drop-down menampilkan semua ukuran jendela yang tersedia. Pilih Kustomisasi untuk membuka dialog yang memungkinkan Anda mengubah, membuat, atau menghapus ukuran jendela

    • pemilih pembesaran. Ketik nilai di kolom teks atau pilih nilai di daftar drop-down untuk mengubah perbesaran konten halaman

    • Periksa ikon. Pilih untuk mengaktifkan mode Inspeksi di halaman

Saat Anda menjalankan aplikasi HTML5, lokasi halaman saat ini ditampilkan di bilah Lokasi. Halaman dirender menggunakan mesin browser WebKit yang berjalan di server ringan tersemat (localhost:8383). Anda dapat mengubah detail server di jendela Project Properties

19. 7. 2 Cara Membuat Ukuran Layar Khusus

Anda dapat membuat ukuran khusus untuk jendela dengan memilih Sesuaikan di menu ukuran layar. Saat Anda memilih Kustomisasi, browser akan menampilkan jendela yang memungkinkan Anda membuat ukuran baru dan mengubah opsi ukuran layar default. Anda juga dapat mengedit isi menu

19. 8 Membuat Template HTML5

Template HTML5 memungkinkan Anda dengan cepat membuat proyek HTML5 yang berisi file dan struktur yang didasarkan pada template. Template situs dapat membantu Anda mengembangkan proyek dengan cepat dengan menyediakan beberapa file JavaScript, CSS, dan HTML yang kemudian dapat Anda modifikasi sesuai kebutuhan Anda

Saat Anda membuat proyek HTML5 di panduan Proyek Baru, Anda dapat memilih untuk menggunakan templat situs .zip arsip yang terletak di sistem lokal Anda, tentukan URL templat online atau pilih templat dari daftar templat situs populer di

19. 8. 1 Cara Membuat Templat Situs

Anda dapat menggunakan IDE untuk membuat templat situs yang didasarkan pada proyek Anda dengan melakukan langkah-langkah berikut

Untuk membuat templat situs

  1. Di jendela Proyek, buka proyek HTML5 yang merupakan model untuk template Anda

  2. Klik kanan proyek HTML5 dan pilih Save as Template di menu popup

  3. Tentukan nama dan tempat Anda ingin menyimpan template

  4. Tentukan file yang ingin Anda sertakan dalam template. Klik Selesai

Template apa pun yang Anda simpan ditambahkan secara otomatis ke daftar drop-down Pilih Template di panduan Aplikasi HTML5 Baru

19. 9 Membuat Cascading Style Sheets

Anda dapat menghasilkan lembar gaya kaskade (CSS) dari definisi tipe dokumen (DTD) yang ada, membuat lembar gaya kosong dan mengedit file di editor CSS atau menggunakan praprosesor CSS untuk menghasilkan lembar gaya

Saat Anda mengedit file CSS, IDE menyediakan jendela dan kotak dialog yang dapat membantu Anda membuat aturan dan deklarasi CSS. Setelah Anda membuat aturan, Anda dapat menambahkan deklarasi ke aturan tersebut dengan mengedit style sheet di editor atau di jendela CSS Styles. Saat mengedit file CSS, Anda dapat memanfaatkan fitur editor standar, termasuk penyelesaian, indentasi, pewarnaan sintaks, dan perintah clipboard standar

Jika Anda ingin menggunakan preprocessor CSS untuk menghasilkan style sheet, IDE mendukung sintaks LESS dan Sassy CSS. Untuk mengkompilasi file LESS atau Sass dan menghasilkan style sheet, Anda harus terlebih dahulu menginstal perangkat lunak praprosesor LESS atau Sass di sistem lokal Anda. Setelah Anda menginstal perangkat lunak preprosesor, Anda dapat mengonfigurasi perangkat lunak untuk mengkompilasi file dan menghasilkan file CSS setiap kali file LESS atau Sass disimpan

19. 9. 1 Cara Membuat Lembar Gaya Cascading

Anda dapat menggunakan panduan File Baru untuk membuat lembar gaya cascading baru di proyek Anda. Setelah Anda membuat style sheet, Anda dapat melihat file baru di jendela Proyek dan jendela File. Saat Anda membuat lembar gaya, file terbuka di Editor Sumber

Untuk membuat lembar gaya kaskade

  1. Pilih File > File Baru dari menu utama

  2. Pilih HTML5 > Cascading Style Sheet. Klik Berikutnya

  3. Masukkan nama dan lokasi untuk file CSS. Klik Selesai

19. 9. 2 Cara Menambahkan Aturan CSS ke Cascading Style Sheet

Anda dapat membuat aturan CSS dalam lembar gaya dengan mengetik langsung di editor sumber atau dengan menggunakan kotak dialog Edit Aturan CSS. Anda dapat membuka kotak dialog Edit CSS Rules dari jendela CSS Styles

Untuk menambahkan Aturan CSS ke lembar gaya

  1. Buka file CSS di editor sumber

  2. Buka jendela CSS Styles (Window > Web > CSS Styles)

  3. Klik Dokumen di jendela CSS Styles jika pohon Style Sheets tidak ditampilkan di jendela CSS Styles

  4. Klik ikon Edit Aturan CSS () untuk membuka kotak dialog Edit Aturan CSS

  5. Pilih Jenis Pemilih di kotak dialog

  6. Ketik nama di kolom teks Selector untuk elemen id atau http://cordova.apache.org/0 atau pilih elemen dari daftar drop-down

  7. Konfirmasikan bahwa style sheet yang benar dipilih dalam daftar drop-down Style Sheet

  8. Tentukan properti tambahan apa pun untuk aturan tersebut. Klik Oke

Setelah Anda mengklik OK Anda dapat melihat bahwa aturan baru terdaftar di jendela CSS Styles dan jendela Navigator dan aturan tersebut ditambahkan ke file CSS di editor

19. 9. 3 Cara Menambahkan Properti ke Aturan CSS

Anda dapat menambahkan properti dan nilai ke aturan CSS dengan mengedit style sheet secara manual di editor sumber, dengan memilih nilai di jendela Gaya CSS atau dengan menentukan nilai di kotak dialog Tambahkan Properti

Untuk menambahkan properti ke aturan CSS di jendela CSS Styles

  1. Buka file CSS di editor sumber

  2. Buka jendela CSS Styles (Window > Web > CSS Styles)

  3. Klik Dokumen di jendela CSS Styles jika pohon Style Sheets tidak ditampilkan di jendela CSS Styles

  4. Pilih aturan yang ingin Anda edit di bagian atas jendela CSS Styles

    Properti dari aturan yang dipilih ditampilkan di bagian bawah jendela CSS Styles

  5. Klik Tambahkan Properti di kolom kiri tabel di bagian bawah jendela CSS Styles dan pilih properti di daftar drop-down

  6. Ketik nilai untuk properti di kolom teks atau pilih nilai dari daftar drop-down di kolom kanan tabel dan tekan tombol kembali pada keyboard Anda

Saat Anda menekan tombol kembali, properti dan nilai ditambahkan ke aturan di editor CSS

Untuk menambahkan properti ke aturan CSS di kotak dialog Tambahkan Properti

  1. Buka file CSS di editor sumber

  2. Buka jendela CSS Styles (Window > Web > CSS Styles)

  3. Klik Dokumen di jendela CSS Styles jika pohon Style Sheets tidak ditampilkan di jendela CSS Styles

  4. Di editor sumber, tempatkan kursor sisipkan di antara tanda kurung aturan CSS yang ingin Anda edit

  5. Klik ikon Add Property () di bagian bawah jendela CSS Styles untuk membuka kotak dialog Add Property

  6. Pilih nilai untuk properti dari daftar drop-down atau ketikkan nilai di bidang teks di kolom kanan tabel

  7. Tentukan properti tambahan apa pun untuk aturan tersebut. Klik Oke

19. 9. 4 Membuat File Preprocessor CSS

Anda dapat membuat file praprosesor Sass atau LESS yang dapat dikompilasi untuk menghasilkan file CSS Anda. IDE menyediakan wizard untuk menghasilkan file preprocessor dan untuk mengonfigurasi perangkat lunak preprocessor untuk melihat lokasi perubahan pada file. Anda harus menginstal perangkat lunak preprocessor CSS pada sistem lokal Anda jika Anda ingin mengkompilasi file preprocessor secara lokal untuk menghasilkan file CSS

Anda dapat menggunakan penyelesaian kode dan pewarnaan sintaks di editor untuk membantu Anda mengedit file praprosesor CSS

Cara membuat file preprocessing CSS

  1. Pilih File > File Baru dari menu utama

  2. Pilih File Sass atau File KURANG dalam kategori HTML5. Klik Berikutnya

  3. Masukkan nama dan lokasi untuk file baru

  4. (Opsional) Pilih Compile Sass (or LESS) files on Save

    Saat Anda mengaktifkan compile on save untuk file preprocessor CSS, Anda dapat menentukan direktori yang berisi file preprocessor dan direktori yang akan berisi file CSS yang dikompilasi

  5. (Opsional) Ubah direktori input dan output

    Ketika file preprocessor di direktori input diubah dan disimpan, file CSS secara otomatis dikompilasi ulang dan dibuat di direktori output yang ditentukan

  6. Klik Selesai

19. 9. 5 Cara Menghasilkan File CSS Menggunakan CSS Preprocessor

IDE dapat dikonfigurasi untuk mengkompilasi file praprosesor LESS dan Sass untuk menghasilkan file CSS. Saat Anda mengedit file praprosesor CSS dalam proyek Anda, Anda dapat mengkompilasi file secara lokal untuk melihat bagaimana perubahan Anda memengaruhi tata letak aplikasi. Perangkat lunak praprosesor CSS harus diinstal pada sistem lokal Anda jika Anda ingin mengompilasi file secara lokal

Anda dapat menemukan instruksi untuk menginstal LESS dan Sass di situs berikut

http://cordova.apache.org/1

http://cordova.apache.org/2

Jika Anda ingin file preprocessor dikompilasi secara otomatis saat Anda menyimpannya, Anda perlu mendaftarkan perangkat lunak preprocessor CSS dengan IDE. Anda dapat menentukan lokasi executable untuk perangkat lunak praprosesor CSS di jendela Opsi

Cara mendaftarkan perangkat lunak preprocessor CSS di IDE

  1. Buka jendela Opsi

  2. Klik tab CSS Preprocessors di kategori Miscellaneous

  3. Ketik jalur ke perangkat lunak praprosesor yang dapat dieksekusi atau klik Telusuri untuk menemukan file yang dapat dieksekusi di sistem lokal Anda

  4. (Opsional) Pilih Open Output on Error jika Anda ingin IDE membuka jendela Output saat terjadi kesalahan selama kompilasi. Opsi ini diaktifkan secara default

  5. (Opsional) Pilih Hasilkan informasi debug ekstra jika Anda ingin informasi debug dibuat di file CSS. opsi ini diaktifkan secara default

Anda dapat mengonfigurasi perangkat lunak untuk melihat lokasi file praprosesor di aplikasi Anda dan mengompilasi file CSS secara otomatis saat file praprosesor disimpan. Anda dapat mengaktifkan compile on save untuk file preprocessor CSS saat Anda membuat file atau di jendela Project Properties

Catatan

Jika Anda mengubah file CSS yang dihasilkan, perubahan Anda akan hilang saat berikutnya file praprosesor CSS dikompilasi

Cara mengaktifkan compile on save di jendela Project Properties

  1. Klik kanan node proyek di jendela Proyek dan pilih Properti di menu popup

  2. Pilih kategori CSS Preprocessors dan pilih tab preprocessor untuk proyek Anda (LESS atau Sass)

  3. Pilih Compile Sass Files on Save (atau Compile LESS Files on Save)

    Jika Anda melihat peringatan di jendela Properti Proyek bahwa file yang dapat dieksekusi tidak dipilih, klik Configure Executable untuk membuka jendela Opsi dan tentukan lokasi file yang dapat dieksekusi dari preprocessor

  4. Di tabel Watch, tentukan direktori Input yang berisi file preprocessor

  5. Tentukan direktori Output untuk file CSS yang dihasilkan

  6. (Opsional) Tentukan opsi kompiler apa pun. Klik Oke

19. 10 Membuat File JavaScript

IDE menyediakan wizard untuk membuat file JavaScript dan dukungan untuk JavaScript di editor sumber. Saat Anda menjalankan aplikasi, tab Log Browser terbuka di jendela Keluaran

19. 10. 1 Cara Membuat File JavaScript

Anda dapat menambahkan file JavaScript ke proyek Anda dengan salah satu dari dua cara

  • sebagai file JavaScript

  • sebagai perpustakaan JavaScript

Anda dapat menggunakan panduan File Baru untuk menambahkan file JavaScript ke proyek kapan saja. Anda juga dapat menggunakan wizard untuk membuat file fungsi JavaScript umum yang dapat Anda gunakan untuk menyediakan fungsionalitas ke beberapa proyek HTML5 atau web. Jika kategori HTML atau Web tidak tersedia dalam instalasi Anda, Anda dapat memilih File JavaScript di kategori Lainnya di wizard File Baru. Jika Anda ingin file JavaScript terlihat di jendela Proyek, buat file JavaScript di subfolder proyek yang sesuai, seperti http://cordova.apache.org/3 atau http://cordova.apache.org/4

Template default yang digunakan untuk file JavaScript hanya berisi informasi lisensi. Anda dapat menggunakan Pengelola Template untuk memodifikasi template JavaScript

Untuk membuat file JavaScript mandiri

  1. Pilih File > File Baru > HTML5 > File JavaScript

  2. Masukkan nama file yang diinginkan di kolom File Name

  3. Klik Selesai untuk menyimpan file

Untuk mengedit template File JavaScript

  1. Pilih Alat > Templat di menu utama untuk membuka Pengelola Templat

  2. Perluas simpul HTML5 dalam daftar templat dan pilih templat File JavaScript

  3. Klik Buka di Editor untuk mengedit template di editor sumber

19. 10. 2 Cara Mengedit File JavaScript

Anda dapat mengedit file JavaScript di editor sumber. Editor sumber menyediakan fitur standar seperti penyelesaian kode dan pewarnaan sintaks. Editor menyediakan penyorotan kode untuk metode dan variabel, serta variabel global dan properti objek literal. Saat file JavaScript dibuka di editor sumber, jendela Navigator menampilkan struktur file JavaScript dan memungkinkan Anda menavigasi ke elemen dalam kode dengan mudah. Fitur pengeditan JavaScript juga berfungsi untuk kode JavaScript yang disematkan dalam file PHP, JSP, dan HTML

IDE menyediakan beberapa template kode JavaScript untuk membantu Anda menghasilkan kode. Anda dapat melihat daftar templat kode JavaScript default dan menambahkan templat kode Anda sendiri di tab Templat Kode di kategori Editor di jendela Opsi

IDE menyediakan alat untuk membantu Anda dengan kode JavaScript Anda. Saat Anda mengedit kode, parser berjalan di latar belakang dan memberikan peringatan dan petunjuk mendetail untuk mengatasi potensi masalah. Anda dapat mengonfigurasi petunjuk JavaScript yang ditampilkan di jendela Opsi. Saat Anda mengedit file JavaScript, Anda dapat menggunakan jendela Log Peramban untuk mengevaluasi ekspresi JavaScript

Penyelesaian kode JavaScript memberi Anda pilihan kelas inti JavaScript bawaan IDE untuk dimasukkan ke dalam kode Anda dan dapat menunjukkan kepada Anda metode yang tersedia untuk string JavaScript. Penyelesaian kode berfungsi dengan semua tipe literal dalam JavaScript. Mesin analisis tipe dan penyelesaian kode juga mengetahui tentang kelas gaya prototipe (hanya fungsi reguler) dan operator untuk membangunnya

NetBeans IDE berkonsultasi dengan parameter tipe untuk parameter fungsi dan tipe pengembalian (http://cordova.apache.org/5, http://cordova.apache.org/6). Jenis ini ditampilkan dalam penyelesaian kode. dalam daftar, dalam dokumentasi, dan dalam petunjuk parameter. Jenis pengembalian juga ditampilkan dalam dialog penyelesaian kode setelah nama fungsi, dipisahkan dengan titik dua. IDE dapat menentukan tipe pengembalian untuk banyak fungsi. Fungsi ini sangat penting untuk dukungan JSQuery. Misalnya, metode yang mengembalikan benar atau salah memiliki tipe pengembalian Boolean, bilangan literal yang mengembalikannya memiliki tipe pengembalian Angka, dan seterusnya. IDE menyimpulkan tipe dan secara eksplisit melacak tipe yang dideklarasikan melalui komentar. Implikasi yang paling penting adalah bahwa IDE mengikuti tipe melalui panggilan

Untuk mengedit file JavaScript

  • Perluas simpul proyek di jendela Proyek dan klik dua kali file JavaScript untuk membuka file di editor

19. 10. 3 Cara Men-debug File JavaScript

Anda dapat menggunakan IDE untuk men-debug file JavaScript di aplikasi HTML5. Proses debug JavaScript dimulai secara otomatis saat Anda menjalankan pengujian aplikasi atau unit di salah satu browser yang mendukung proses debug. Saat Anda men-debug aplikasi, jendela berikut memberikan detail debug

Tabel 19-1 JavaScript Debugging Windows

Deskripsi Jendela

Jendela breakpoint

Menampilkan daftar breakpoint di semua aplikasi yang terbuka

Jendela Tumpukan Panggilan

Menampilkan tumpukan eksekusi saat ini dari program JavaScript

Jendela variabel

Menampilkan variabel dan jam tangan yang valid dalam cakupan saat ini

Anda dapat membuat jam tangan baru dari jendela Variabel. Untuk detail tentang membuat jam tangan, lihat

Log Peramban

Menampilkan pengecualian, kesalahan, dan peringatan yang dihasilkan oleh browser


Saat Anda menjalankan aplikasi, debugger akan menjeda eksekusi aplikasi pada breakpoint pertama dalam JavaScript yang ditemui dan file JavaScript yang berisi breakpoint terbuka di editor. IDE juga secara otomatis membuka jendela debugger JavaScript. Anda dapat menggunakan tombol debug di bilah alat untuk menjelajahi file JavaScript

Untuk men-debug file JavaScript di IDE, IDE harus dapat berkomunikasi dengan debugger. Untuk menggunakan debugger JavaScript di IDE, Anda harus memilih salah satu opsi browser berikut sebagai browser target

Tabel 19-2 Browser yang mendukung JavaScript Debugging

Deskripsi Browser

Browser WebKit Tertanam

IDE menyertakan browser yang didasarkan pada WebKit. Browser WebKit tertanam memungkinkan Anda untuk melihat dan men-debug aplikasi HTML5 di IDE. Jika Anda memilih Browser WebKit Tertanam sebagai browser di jendela Properti Proyek, IDE akan membuka browser di jendela di IDE saat Anda menjalankan aplikasi dan proses debug diaktifkan secara otomatis

Chrome dengan Konektor NetBeans

IDE menyertakan ekstensi yang dapat Anda instal di browser Chrome yang memungkinkan IDE dan browser untuk berkomunikasi. Jika Anda memilih Chrome dengan NetBeans Connector sebagai browser di jendela Properties, IDE akan membuka browser Chrome saat Anda menjalankan aplikasi. Debugging diaktifkan secara otomatis jika ekstensi dipasang saat Anda menjalankan aplikasi. Jika ekstensi tidak terpasang, IDE akan meminta Anda untuk memasang ekstensi


19. 10. 4 Cara Mengatur Breakpoints JavaScript

Untuk men-debug JavaScript di aplikasi Anda di IDE, Anda perlu menentukan breakpoint yang akan menjeda eksekusi skrip saat ditekan. Anda dapat menyetel breakpoint JavaScript berikut di IDE

Tabel 19-3 Jenis Titik Hentakan JavaScript

Deskripsi titik henti

DOM

Gunakan breakpoint ini untuk men-debug perubahan yang dibuat pada pohon DOM

Garis

Gunakan breakpoint ini untuk men-debug baris kode tertentu di file JavaScript Anda

Peristiwa

Gunakan breakpoint ini untuk men-debug tindakan di aplikasi Anda yang dipanggil oleh peristiwa

XMLHttpRequest

Gunakan breakpoint ini untuk men-debug permintaan URL


Untuk membuka kotak dialog New Breakpoint

  • Pilih Debug > Breakpoint Baru dari menu utama

    Sebagai alternatif, Anda dapat membuka jendela Breakpoints dengan mengeklik ikon New Breakpoint () di margin kiri

Langkah-langkah untuk menyetel breakpoint JavaScript akan bergantung pada jenis breakpoint

Untuk menyetel breakpoint DOM

  1. Buka file HTML di editor

  2. Buka jendela Browser DOM, jika belum terbuka

  3. Di jendela Browser DOM, temukan objek di pohon DOM yang ingin Anda debug

  4. Klik kanan objek dan pilih salah satu properti DOM breakpoint di menu popup

Untuk mengatur breakpoint baris

  1. Buka file JavaScript di editor

  2. Klik di margin kiri editor di sebelah baris tempat Anda ingin menyetel breakpoint

    Ikon breakpoint () akan muncul di margin

Untuk mengatur breakpoint acara

  1. Buka file JavaScript atau file HTML di editor

  2. Tempatkan kursor insert di file dan pilih Debug > New Breakpoint di menu utama untuk membuka kotak dialog New Breakpoint

  3. Pilih JavaScript di daftar drop-down Debugger dan pilih Event di daftar drop-down Breakpoint Type

  4. Pilih tindakan apa pun yang Anda ingin memicu breakpoint. Klik Oke

Untuk menyetel breakpoint XMLHttpRequest

  1. Buka file JavaScript atau file HTML di editor

  2. Tempatkan kursor insert di file dan pilih Debug > New Breakpoint di menu utama untuk membuka kotak dialog New Breakpoint

  3. Pilih JavaScript di daftar drop-down Debugger dan pilih XMLHttpRequest di daftar drop-down Breakpoint Type

  4. Tentukan URL yang akan memicu breakpoint saat diminta oleh skrip. Klik Oke

19. 10. 5 Cara Menjalankan Tes Unit pada File JavaScript

Anda dapat mengonfigurasi IDE untuk menggunakan JS Test Driver atau Karma untuk menjalankan pengujian unit untuk file JavaScript Anda. Untuk menggunakan runner pengujian, Anda perlu menginstal runner pengujian, lalu mengonfigurasi runner pengujian untuk menentukan browser dan framework pengujian yang ingin digunakan oleh runner pengujian dan file yang akan dimuat saat menjalankan pengujian. Setelah Anda mengonfigurasi pelari pengujian untuk aplikasi Anda, Anda dapat menjalankan pengujian dari jendela Proyek. Anda dapat melihat hasil pengujian di jendela Keluaran IDE

Debugging pengujian unit diaktifkan secara otomatis jika Anda menetapkan Chrome dengan NetBeans Connector sebagai salah satu browser JS Test Driver saat Anda mengonfigurasi JS Test Driver di jendela Layanan

Untuk menjalankan pengujian unit dengan JS Test Driver

  1. Unduh http://cordova.apache.org/_7 JAR ke sistem lokal Anda

  2. Di jendela Layanan, klik kanan node JS Test Driver dan pilih Configure di menu popup

  3. Di kotak dialog Configure JSTestDriver, klik Browse dan temukan http://cordova.apache.org/7 JAR yang Anda unduh

  4. Pilih browser yang ingin Anda uji. Klik Oke

    Hanya browser yang diinstal di sistem lokal Anda yang ditampilkan dalam daftar

  5. Klik kanan node JS Test Driver dan pilih Start untuk memulai server js-test-driver

    Saat Anda memilih Mulai, setiap browser yang Anda tentukan akan membuka jendela dan akan menunggu untuk menjalankan pengujian unit. Anda dapat melihat statusnya di tab server js-test-driver di jendela Output

  6. Pilih Baru > File Baru untuk membuka panduan File Baru

  7. Pilih File Konfigurasi JsTestDriver di kategori Tes Unit di wizard File Baru

  8. Gunakan nama default http://cordova.apache.org/_9 untuk Nama File

  9. Klik Telusuri dan pilih File Konfigurasi (folder chrome://chrome/extensions/0 dalam proyek) untuk Folder. Klik Selesai

    Nama file harus http://cordova.apache.org/_9 dan file harus berada di root folder chrome://chrome/extensions/0 untuk mengaktifkan perintah Tes untuk proyek. Jalur yang benar yang ditampilkan di bidang teks File yang Dibuat akan serupa dengan yang berikut ini

    chrome://chrome/extensions/_3

    Jika folder chrome://chrome/extensions/_0 tidak ada, Anda dapat membuat folder dengan mengetikkan chrome://chrome/extensions/0 di bidang teks Folder atau dengan membuat folder secara manual lalu menentukan folder di jendela Properti Proyek

    Saat Anda mengklik Selesai, IDE membuat file http://cordova.apache.org/9 dan membuka file di editor. Di jendela Proyek, Anda dapat melihat file di bawah node File Konfigurasi

  10. Edit http://cordova.apache.org/_9 untuk menentukan lokasi file sumber JavaScript dan file pengujian

  11. Klik kanan node proyek dan pilih Test di menu popup

Saat Anda mengklik Uji, IDE menjalankan pengujian unit. Anda dapat membuka jendela Test Results untuk melihat hasilnya. Anda dapat melihat detail tentang tes khusus di jendela Keluaran

Catatan

Untuk menggunakan JS Test Driver di IDE Anda perlu mendownload JS Test Driver JAR yang tersedia dari lokasi berikut

chrome://chrome/extensions/_8

Situs JS Test Driver juga menyediakan dokumentasi dan detail tentang penggunaan JS Test Driver

19. 10. 6 Cara Menambahkan Perpustakaan JavaScript ke Proyek

Jika Anda menggunakan pustaka JavaScript yang akan menyediakan fungsionalitas tertentu dalam proyek Anda, Anda dapat menggunakan panduan Proyek Baru untuk menambahkan pustaka ke proyek saat Anda membuat proyek atau menambahkan pustaka JavaScript ke proyek di jendela Properti Proyek

Untuk menambahkan library JavaScript ke HTML5 atau aplikasi web

  1. Buka proyek yang dipilih di IDE

  2. Klik kanan simpul proyek di jendela Proyek dan pilih Properti

  3. Pilih kategori File JavaScript di jendela Project Properties

  4. Pilih perpustakaan dari daftar perpustakaan yang tersedia dan klik panah kanan ( > ) untuk memindahkan perpustakaan ke daftar perpustakaan yang dipilih

    Anda bisa mengetikkan nama pustaka di bidang teks di atas daftar pustaka yang tersedia untuk memfilter daftar

  5. Jika perlu, tentukan lokasi folder untuk file di bidang Folder Perpustakaan, atau klik Telusuri untuk memilih dari folder yang tersedia. Jika Anda tidak yakin, gunakan lokasi folder default. Klik Oke

    Bagaimana cara memasang HTML5 di Chrome?

    Memasang Ekstensi dari Toko Web Chrome .
    Pilih File > Proyek Baru untuk membuka panduan Proyek Baru
    Pilih Aplikasi HTML5/JS di kategori HTML/JavaScript. Klik Berikutnya

    Bisakah saya mengunduh HTML5 secara gratis?

    Editor HTML5, pembuat situs web sumber terbuka dan gratis berdasarkan Silex. Mulai 19-05-2021, proyek ini dapat ditemukan di sini. Editor ini adalah alat online sumber terbuka dan gratis yang memungkinkan Anda mendesain halaman html dengan antarmuka yang sangat mirip dengan antarmuka dreamweaver atau powerpoint.

    Bagaimana cara membuka HTML5 di Chrome?

    Dengan asumsi Google Chrome disetel sebagai program default Anda, cukup ketuk dua kali dokumen HTML dan itu akan terbuka secara alami di Chrome.

    Bagaimana cara mengaktifkan HTML5 di browser saya?

    HTML5 adalah versi bahasa HTML yang didukung oleh sebagian besar browser web modern, termasuk Google Chrome. HTML5 diaktifkan secara default di Chrome, jadi tidak perlu mengaktifkannya .