Dokumen javascript menulis di halaman yang sama

Dengan sendirinya, HTML tidak memiliki kecerdasan apa pun. Itu tidak bisa menghitung, tidak tahu apakah seseorang telah mengisi formulir dengan benar, dan tidak bisa membuat keputusan berdasarkan bagaimana pengunjung web berinteraksi dengannya. Pada dasarnya, HTML memungkinkan orang membaca teks, melihat gambar, menonton video, dan mengeklik tautan untuk berpindah ke halaman web lain dengan lebih banyak teks, gambar, dan video. Untuk menambahkan kecerdasan ke halaman web Anda sehingga dapat merespons pengunjung situs Anda, Anda memerlukan JavaScript

JavaScript memungkinkan halaman web bereaksi dengan cerdas. Dengannya, Anda dapat membuat formulir web cerdas yang memberi tahu pengunjung saat mereka lupa menyertakan informasi yang diperlukan. Anda dapat membuat elemen muncul, menghilang, atau bergerak di sekitar halaman web (lihat ). Anda bahkan dapat memperbarui konten halaman web dengan informasi yang diambil dari server webâtanpa harus memuat halaman web baru. Singkatnya, JavaScript memungkinkan Anda membuat situs web Anda lebih menarik, efektif, dan bermanfaat

Catatan

Sebenarnya, HTML5 menambahkan beberapa kecerdasan pada HTMLâtermasuk validasi formulir dasar. Tetapi karena tidak semua browser mendukung tambahan yang bagus ini (dan karena Anda dapat melakukan lebih banyak hal dengan formulir dan JavaScript), Anda masih memerlukan JavaScript untuk membuat formulir yang terbaik, paling ramah pengguna, dan interaktif. Anda dapat mempelajari lebih lanjut tentang HTML5 dan formulir web di Formulir HTML5 Ben Henick (OâReilly) dan Menguasai Formulir HTML5 Gaurav Gupta (Penerbitan Paket)

Gambar  1-1.  Telinga Interaktif (http. // www. amplifon. bersama. uk/interactive-ear/), panduan interaktif untuk pendengaran manusia, memungkinkan pengunjung mempelajari dan menjelajahi berbagai bagian telinga manusia. Informasi baru muncul sebagai respons terhadap gerakan dan klik mouse. Dengan JavaScript, Anda dapat membuat efek interaktif Anda sendiri

Bagi banyak orang, istilah âpemrograman komputerâ memunculkan visi tentang kutu buku super cerdas yang membungkuk di atas keyboard, mengetik omong kosong yang hampir tidak dapat dipahami selama berjam-jam. Dan, sejujurnya, beberapa pemrograman seperti itu. Pemrograman bisa tampak seperti sihir rumit yang jauh melampaui manusia biasa. Tetapi banyak konsep pemrograman yang tidak sulit untuk dipahami, dan seiring berjalannya bahasa pemrograman, JavaScript adalah bahasa pertama yang bagus untuk seseorang yang baru mengenal pemrograman

Tetap saja, JavaScript lebih kompleks daripada HTML atau CSS, dan pemrograman sering kali merupakan dunia asing bagi perancang web; . Di sepanjang buku ini, Anda akan mempelajari konsep dasar pemrograman yang berlaku baik saat Anda menulis JavaScript, ActionScript, atau bahkan menulis program desktop menggunakan C++. Lebih penting lagi, Anda akan mempelajari cara mendekati tugas pemrograman sehingga Anda akan tahu persis apa yang ingin Anda lakukan sebelum mulai menambahkan JavaScript ke halaman web

Banyak desainer web langsung dikejutkan oleh simbol dan kata-kata aneh yang digunakan dalam JavaScript. Program JavaScript rata-rata ditaburi dengan simbol ({ } [ ] ; , (). =) dan penuh dengan kata-kata asing (var, null,

Setiap bahasa pemrograman memiliki kumpulan kata kunci dan karakternya sendiri, dan kumpulan aturannya sendiri untuk menggabungkan kata dan karakter tersebutâsintaksis bahasa tersebut. Anda harus menghafal kata-kata dan aturan bahasa JavaScript (atau setidaknya menyimpan buku ini sebagai referensi). Saat belajar berbicara bahasa baru, Anda segera menyadari bahwa menempatkan aksen pada suku kata yang salah dapat membuat sebuah kata tidak dapat dipahami. Demikian pula, salah ketik sederhana atau bahkan tanda baca yang hilang dapat mencegah program JavaScript bekerja, atau memicu kesalahan di browser web. Anda akan membuat banyak kesalahan saat mulai belajar memprogramâitu hanya sifat pemrograman

Pada awalnya, Anda mungkin akan merasa frustrasi dengan pemrograman JavaScript. Anda akan menghabiskan banyak waktu untuk melacak kesalahan yang Anda buat saat mengetik skrip. Juga, Anda mungkin menemukan beberapa konsep yang terkait dengan pemrograman agak sulit untuk diikuti pada awalnya. Tapi jangan khawatir. Jika Anda pernah mencoba mempelajari JavaScript di masa lalu dan menyerah karena menurut Anda itu terlalu sulit, buku ini akan membantu Anda melewati rintangan yang sering membuat orang baru mengenal pemrograman tersandung. (Dan jika Anda memiliki pengalaman pemrograman, buku ini akan mengajari Anda keunikan JavaScript dan konsep unik yang terlibat dalam pemrograman untuk browser web. )

Selain itu, buku ini tidak hanya tentang JavaScriptâtetapi juga tentang jQuery, pustaka JavaScript terpopuler di dunia. jQuery membuat pemrograman JavaScript yang kompleks menjadi lebih mudahâ¦jauh lebih mudah. Jadi dengan sedikit pengetahuan JavaScript dan bantuan jQuery, Anda akan dapat membuat situs web yang canggih dan interaktif dalam waktu singkat.

Apa itu Program Komputer?

Saat Anda menambahkan JavaScript ke halaman web, Anda sedang menulis program komputer. Memang, sebagian besar program JavaScript jauh lebih sederhana daripada program yang Anda gunakan untuk membaca email, memperbaiki foto, dan membuat halaman web. Tetapi meskipun program JavaScript (juga disebut skrip) lebih sederhana dan lebih pendek, mereka berbagi banyak sifat yang sama dengan program yang lebih rumit

Singkatnya, program komputer apa pun adalah serangkaian langkah yang diselesaikan dalam urutan yang ditentukan. Katakanlah Anda ingin menampilkan pesan selamat datang menggunakan nama pengunjung halaman web. âSelamat datang, Bob. â Ada beberapa hal yang perlu Anda lakukan untuk menyelesaikan tugas ini

1. Tanyakan nama pengunjung

2. Dapatkan respons pengunjung

3. Cetak (yaitu, tampilkan) pesan di halaman web

Meskipun Anda mungkin tidak ingin mencetak pesan selamat datang di halaman web, contoh ini menunjukkan proses dasar pemrograman. Tentukan apa yang ingin Anda lakukan, lalu bagi tugas itu menjadi langkah-langkah individual. Setiap kali Anda ingin membuat program JavaScript, Anda harus melalui proses penentuan langkah-langkah yang diperlukan untuk mencapai tujuan Anda. Setelah Anda mengetahui langkah-langkahnya, Anda akan menerjemahkan ide Anda ke dalam kode pemrogramanâkata dan karakter yang membuat browser web berfungsi seperti yang Anda inginkan

Peramban web dibuat untuk memahami HTML dan CSS dan mengonversi bahasa tersebut menjadi tampilan visual di layar. Bagian web browser yang memahami HTML dan CSS disebut layout atau mesin rendering. Tetapi sebagian besar browser juga memiliki sesuatu yang disebut juru bahasa JavaScript. Itu adalah bagian dari browser yang memahami JavaScript dan dapat menjalankan langkah-langkah program JavaScript. Peramban web biasanya mengharapkan HTML, jadi Anda harus secara khusus memberi tahu peramban saat JavaScript datang dengan menggunakan tag

Sering kali, Anda akan menambahkan

Faktanya, browser web membiarkan Anda mengabaikan atribut type di HTML 4. 01 dan XHTML 1. 0 file jugaâskrip akan berjalan sama; . Buku ini menggunakan HTML5 untuk doctype, tetapi kode JavaScript akan sama dan berfungsi sama untuk HTML 4. 01, dan XHTML 1

Anda kemudian menambahkan kode JavaScript Anda antara pembukaan dan penutupan

You’ll find out what this JavaScript does in a moment. For now, turn your attention to the opening and closing ________0_______1

________10_______

Figure 1-2. Nike.com’s website uses JavaScript extensively to create a compelling showcase for their products. The home page (top) includes a row of navigation buttons along the top—Men, Women, Kids, and so on—that, when moused over, reveal a panel of additional navigation options. For example, mousing over the Sports button (circled in bottom image) reveals a panel listing different sports that Nike makes products for.

Just remember that you must use one set of opening and closing ________0_______1. The code should now look like this:

________0_______

In this example, the stuff you just typed is shown in boldface. The two HTML tags are already in the file; make sure you type the code exactly where shown.

Launch a web browser and open the hello.html file to preview it.

A JavaScript Alert box appears (see ). Notice that the page is blank when the alert appears. (If you don’t see the Alert box, you probably mistyped the code listed in the previous steps. Double-check your typing and read the following Tip.)

Tip

When you first start programming, you’ll be shocked at how often your JavaScript programs don’t seem to work…at all. For new programmers, the most common cause of nonfunctioning programs is simple typing mistakes. Always double-check to make sure you spelled commands (like ________13_______1 in the first script) correctly. Also, notice that punctuation frequently comes in pairs (the opening and closing parentheses, and single-quote marks from your first script, for example). Make sure you include both opening and closing punctuation marks when they’re required.

Click the Alert box’s OK button to close it.

When the Alert box disappears, the web page appears in the browser window.

Although this first program isn’t earth-shatteringly complex (or even that interesting), it does demonstrate an important concept: A web browser will run a JavaScript program the moment it reads in the JavaScript code. In this example, the ________13_______2 command appeared before the web browser displayed the web page, because the JavaScript code appeared before the HTML in the tag. This concept comes into play when you start writing programs that manipulate the HTML of the web page—as you’ll learn in Chapter 3.

Figure 1-3. The JavaScript Alert box is a quick way to grab someone’s attention. It’s one of the simplest JavaScript commands to learn and use.

Note

Some versions of Internet Explorer (IE) don’t like to run JavaScript programs in web pages that you open directly off your hard drive, for fear that the code might do something harmful. So when you try to preview the tutorial files for this book in Internet Explorer, you might see a message saying that IE has blocked the script. Click “Allow blocked content.”

This annoying behavior only applies to web pages you preview from your computer, not to files you put up on a web server. To avoid hitting the “Allow blocked content” button over and over, preview pages in a different web browser, like Chrome or Firefox.

The script in the previous section popped up a dialog box in the middle of your monitor. What if you want to print a message directly onto a web page using JavaScript? There are many ways to do so, and you’ll learn some sophisticated techniques later in this book. However, you can achieve this simple goal with a built-in JavaScript command, and that’s what you’ll do in your second script:

1. In your text editor, open the file hello2.html.

   While ________0_______1

   Like the ________13_______2 function, ________13_______5 is a JavaScript command that literally writes out whatever you place between the opening and closing parentheses. In this case, the HTML

________13_______6

7

8

_9

0

1

2

3

4

5

1. 6
   7
   8

2. Click in the blank line between the ________0_______1 and closing tags near the top of the page, and type:

   $(document).ready(function() {

   _0

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

   _1

   $(document).ready(function() {

   _2

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

   _3

   $(document).ready(function() {

   _4

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

   _5

   $(document).ready(function() {

   _6

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

   _7

   $(document).ready(function() {

   _8

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

   _9

   $('header').hide().slideDown(3000);

   0

0

$('header').hide().slideDown(3000);

2

$('header').hide().slideDown(3000);

3

________42_______4

________42_______5

________42_______6

________42_______7

________42_______8

________42_______9

________52_______0

________52_______1

________52_______2

________52_______3

________52_______4

________52_______5

________52_______6

________52_______7

________52_______8

• ________52_______9—leaving off the closing parenthesis—you’ll probably get the: “Unexpected token;” message, meaning that Chrome was expecting something other than the character it’s showing. In this case, it encountered the semicolon instead of the closing parenthesis.

• 0. Sangat mudah untuk melupakan tanda kutip pembuka atau penutup. Juga mudah untuk mencampur tanda kutip tersebut; .
  1. Apa pun kasusnya, Anda mungkin akan melihat pesan âUncaught SyntaxError. Kesalahan ILEGALâ token tak terduga

• 2âAndaâ akan mendapatkan kesalahan yang mengatakan bahwa perintah yang salah eja tidak ditentukan. misalnya, âUncaught ReferenceError. aler tidak ditentukan,â jika Anda salah mengeja perintah
  1. Anda juga akan mengalami masalah saat salah mengeja fungsi jQuery (seperti fungsi
  4 dan
  5 di tutorial sebelumnya). Dalam hal ini, Anda akan mendapatkan kesalahan yang berbeda. Misalnya, jika Anda salah mengetik âhideâ sebagai âhidâ pada langkah 6 di , Chrome akan menampilkan kesalahan ini. âUncaught TypeError. Objek [Objek objek] tidak memiliki metode âhidââ

  Bagaimana cara menulis di halaman yang sama di JavaScript?

  Jika Anda ingin menambahkan konten ke halaman, Anda harus bekerja dengan DOM. Google "buat div javascript" atau "buat rentang javascript" misalnya, Anda pada dasarnya perlu membuat elemen yang memiliki teks Anda di dalamnya dan menambahkan elemen itu ke bagian halaman yang Anda inginkan . .

  Mengapa document write () tidak direkomendasikan lagi?

  write menghilangkan semua yang ada di halaman untuk menulis kontennya. Ini dilakukan karena konten pada halaman telah dibuat dan saat dokumen. tulis apa fungsinya, itu menimpa seluruh halaman saat menyisipkan konten . Itulah salah satu alasan utama menggunakan dokumen bukanlah ide yang baik.

  Apa itu tulis dokumen () dalam JavaScript?

  menulis dalam JavaScript adalah fungsi yang digunakan untuk menampilkan beberapa string dalam output halaman web HTML (jendela Browser) .

  Apa perbedaan antara innerHTML dan penulisan dokumen?

  dokumen. write() menempatkan konten langsung ke browser tempat pengguna dapat melihatnya. dokumen. innerHTML mengubah HTML objek tempat Anda menerapkannya .