Adding JavaScript and CSS (Cascading Style Sheet) file in CodeIgniter is very simple. You have to create JS and CSS folder in root directory and copy all the .js files in JS folder and .css files in CSS folder as shown in the figure. Show
For example, let us assume, you have created one JavaScript file sample.js and one CSS file style.css. Now, to add these files into your views, load URL helper in your controller as shown below. $this->load->helper('url'); After loading the URL helper in controller, simply add the below given lines in the view file, to load the sample.js and style.css file in the view as shown below. ExampleCreate a controller called Test.php and save it in application/controller/Test.php load->helper('url'); $this->load->view('test'); } } ?> Create a view file called test.php and save it at application/views/test.php CodeIgniter View Example Click Here to execute the javascript function. Create a CSS file called style.css and save it at css/style.css body { background:#000; color:#FFF; } Create a JS file called sample.js and save it at js/sample.js function test() { alert('test'); } Change the routes.php file in application/config/routes.php to add route for the above controller and add the following line at the end of the file. Saya mau bertanya, bagaimana ya cara load file css atau js external kalo pakai server node.js? Klo pake php atau tanpa server tinggal ://untuk load css //untuk jsIni memang di client (file .html) tetapi ternyata berpengaruh juga kalo server nya node.js, masa iya harus pakai css dan js internal terus gan? Mohon solusinya mastah NB: Membuka file html nya dari route express. seperti ini : var app = require('express')(); app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); //Redirect }); Placing scripts at the bottom of the 5 element improves the display speed, because script interpretation slows down the display. Penulisan di akhir 5 akan meningkatkan kecepatan display atau tampilnya konten di web.Karena, jika kita tulis di dalam 4, script tersebut akan dieksekusi terlebih dahulu sebelum konten ditampilkan.Jadi, disarankan menulis kode Javascript di dalam 5, tepatnya sebelum tutup 2.2. Menulis Javascript pada File EksternalCara kedua, kita bisa menulis Javascript di File yang terpisah dengan HTML. Biasanya digunakan jika kita tidak ingin kode Javascript bercampur dengan kode HTML. Bagaimana caranya? Caranya, buatlah sebuah file yang berekstensi 3. File ini kita isi dengan kode Javascript.Sebagai contoh, saya akan membuat file eksternal dengan nama 4 dan 5 sebagai kode HTML-nya.Berikut ini isi file 4 :
Lalu isi 5 adalah sebagai berikut:
Hasilnya: Coba kamu perhatikan! Pada kode HTML 5, kita tetap menggunakan tag 1. Akan tetapi, tag ini tidak kita isi dengan kode Javascript. Melainkan kita menggunakan atribut 0 untuk menggunakan kode Javascript yang ada di file 4.O ya, perlu diperhatikan juga: Tag 1 tetap harus ditutup dengan 3 walaupun tidak punya isi.Salah: ❌
Benar: ✅
Lalu gimana jika kode Javascript-nya berada di folder yang berbeda dengan dokumen HTML-nya? Atau Javascriptnya berada di internet? Itu gimana? Untuk kode Javascript yang berada di folder yang berbeda, kita menulisnya mengikuti alamat path foldernya. Misalnya struktur foldernya seperti ini: Karena file 4 berada di dalam folder 5, maka kita harus menulisnya:
Giaman paham kan? Nah, untuk kode Javascript yang diambil dari internet, kita cukup tuliskan alamat URL dari Javascript tersebut. Contoh:
3. Menulis Javascript pada AtributPenulisan Javascript pada atribut bisanya dilakukan pada atribut event. Contoh:
Pada contoh ini, kita membuat elemen 6 dan memiliki attribut 7 yang berisi kode Javascript.Nantinya, kode javascript yang ada di dalam atribut 7 akan dieksekusi saat event klik terjadi pada elemen 6.Apakah Javascript hanya bisa ditulis pada atribut 7 saja?Atribut 7 adalah salah satu atribut event yang ada di HTML, kode Javascript bisa ditulis di semua atribut event.Ingat atribut event! Bukan atribut biasa. Jika kamu ingin lihat semua atribut event, silahkan cek di Event Reference. Penulisan atribut event di HTML diawali dengan 2, misalnya untuk event 3, maka pada atribut HTML ditulis 7.Contoh lagi biar makin paham:
Pada contoh ini, kita menggunakan event 5, maka ditulis 6. Event ini terjadi saat kita melepas tombol di keyboard.Jadi nantinya saat kita mengetik pada elemen 7, kode Javascript yang ada di 6 akan dieksekusi.Kode Javascript tersebut berfungsi untuk menampilkan jumlah karakter yang diketik. Hasilnya: 4. Penulisan Javascript pada URLNah ini yang menurut saya cara yang cukup aneh. Cara ini memang jarang digunakan dan hampir tidak ada yang menggunakannya di dalam aplikasi. Tapi tetap bisa. Caranya, pada URL kita gunakan 9 lalu diikuti dengan kode Javascript yang ingin dieksekusi.Contoh:
Ini di ketik pada address bar browser. Maka hasilnya:
Lalu, bagaimana kita menggunakan cara ini di HTML? Cara ini bisa kita gunakan pada tag 0, lalu mengisinya di atribut 1.Contoh: 0Hasilnya: Jadi saat link 0 diklik, ia akan membuka URL 9 dan menjalankan kode Javascript yang ada di sana.
Bagaimana cara yang benar untuk menggunakan file JavaScript di HTML?Anda bisa langsung menambahkan JavaScript di HTML dengan menggunakan tag <script></script> yang mencakup semua kode JS yang Anda tulis. Kode JS yang bisa ditambahkan: di antara tag <head> di antara <body>
Bagaimana cara menjalankan JavaScript Coba Anda jelaskan?Mengaktifkan JavaScript di browser Anda. Buka Chrome di komputer Anda.. Klik. Setelan.. Klik Keamanan dan Privasi.. Klik Setelan situs.. Klik JavaScript.. Pilih Situs dapat menggunakan JavaScript.. Di mana tempat yang benar untuk menyisipkan JavaScript?Pada dasarnya, kita bebas ingin meletakkan kode JavaScript di bagian mana saja, selama berada di dalam tag <script>.
Bagaimana cara membuat fungsi di JavaScript?untuk membuat function, penulisannya harus di awali oleh syntax “function” dan kemudian di lanjutkan dengan nama function yang mau di buat. dan isi dari function di tuliskan di dalam tanda kurung kurawal pembuka “{” dan tanda kurung kurawal penutup “}”.
|