Showing posts with label JavaScript. Show all posts

Home JavaScript

Sunday, January 13, 2019

React Native - Intro

  Author : Nurroin's Blog     No comments
January 13, 2019




Pengantar



React Native adalah sebuah Framework Javascript yang dikembangkan oleh Facebook dan memungkinkan kita membuat aplikasi mobile Android atau IOS menggunaka teknologi web. Seperti yang kita ketahui sekarang ini juga sudah banyak framework javascript yang bisa kita gunakan untuk membua aplikasi android atau ios, akan tetapi React Native ini berbeda denga Framework - framework javascript yang lainnya. Dengan Rect Native ini kita tidak membuat aplikasi Hybird yang dimana untuk android akan di compile di java dan untuk IOS akan di compile di Object-C.


Fitur React Native
Didalam React Native ini terdapat beberapa kompenen yang membuat nya bisa kita gunakan untuk membuat aplikasi mobile cross-platform. Berikut ini adalah beberapa fitur dari React Native ini :

ReactJS
Sebelum react native di keluarkan oleh facebook yang pertama di kenalkan adalah ReactJS yaitu framework javascript yang bisa digunakan untuk membuat aplikasi web dengan java script. Jika kamu sudah pernah menggunakan ReactJS maka kamu akan mudah untuk memahami React Native dan bagi kamu yang belum pernah mencoba ReactJS juga tidak masalah karna saya sendiri juga belum pernah coba ReactJS sebelumnya.

Native
Di Android dan IOS memiliki arsitektur yang berbeda, nah disini Native ini yang berfungsi untuk menghandle komponen dari masing - masing platform. Di native ini nanti kita akan mempelajari beberapa komponen untuk keperluan kita belajar membuat aplikasi dengan React Native.

Platform
Untuk saat ini platform yang sudah terintegrasi adalah Android dan IOS. Mungkin kedepanya bisa lebih dari dua platform ini yang bisa terintegrasi dengan react native ini kita tunggu saja.


Kelebihan React Native
Sebelum kita lanjut lebih dalam untuk coding kita perlu tau dulu sedikit apa sih kelebihan React Native dan kenapa kita harus mencoba membuat aplikasi dengan React Native ini. Nah berikut ini adalah kelebihan kita untuk menggunakan React Native.

JavaSript
Seperti yang sudah kita ketahui beberapa waktu yang lalu di survey stackoverflow JavaScript adalah salah satu bahasa pemrogramman yang paling banyak digunakan oleh developer di dunia. Dengan begitu artinya kita sebagai developer akan sangat mudah untuk mempelajari JavaScript ini karna komunitas yang sudah besar dan juga kita mempunyai banyak tempat untuk bertanya kalau kita mengalami kebingunan. Dan bagi kamu yang sudah berpengalaman dengan web development tentunya sudah akrab dengan javascript ini dan kamu sudah punya dasar untuk mulai membuat aplikasi dengan react native ini.

Code Sharing
Sebagian codebase yang kamu tulis itu bisa kamu gunakan untuk berbeda platform dimana disni bisa digunakan untuk android dan ios. Dengan begitu untuk hal - hal yang mendasar jika kita memiliki fungsi - fungsi umum yang tidak bersentuhan langsung dengan komponen yang berbeda platform ini kita bisa kita gunakan codebase tersebut. Sebagai contoh semisal kita punya sebuah fungsi untuk mengkonfersi currency, maka dengan begitu kita bisa gunakan untuk android ataupun di ios.

Comunity
React Native ini cukup diminati oleh para developer di dunia berikut ini adalah screenshoot dari repository react native.

React Native repository


Kelemahan React Native

React Native sendiri juga memiliki kelemahan berikut ini adalah beberapa keleamahan dari react native

Components
Untuk mengembangkan aplikasi mobile dengan react native kita harus banyak memahami Components dari masing - masing platform. Dikarenakan android dan ios ini memiliki arsitektur yang berbeda dengan begitu Components Native dari masing - masing platform masih terbatas. Untuk itu jika kita ingin menggunakan komponent yang belum ada maka kita harus membuatnya sendiri. DImana dengan begini masih belum bisa di lakukan oleh pemula. Tetapi jangan khawatir sampai saat ini kontributor untuk react native ini sudah mencapai 1,231 orang, artinya dengan begitu perkembangan dari react native hari demi hari akan lebih baik. Atau kalau kamu punya pengalaman yang cukup untuk javascript dan mobile development maka silahkan berkontribusi untuk react native ini.

JavaScript
Nah java script ini juga menjadi salah satu kelemahan dari react native, dikarenakan java script ini berkembang begitu cepatnya yang mengakibat kan beberpa hal itu tidak bisa di lakukan dengan perubahan yang begitu cepat. Untuk itu kita harus pintar - pintar beradaptasi dengan JavaScript ini.

Framework
Framework React Native juga menjadi kelemahan karena perubahan yang begitu cepatnya yang mengakibatkan ketika kamu mengupdate react native ke versi yang baru untuk versi yang lama beberapa tidak bisa kamu gunakan. So dengan begitu kamu harus pandai - pandai melakukan management codebase kamu agar tidak berpengaruh banyak ketika ada update dari framework react native ini.

Platform
Nah buat kamu yang ingin mengembangkan react native untuk ios maka kamu perlu punya macbook so memang karena ekosistem dari ios ini semua harus menggunakan produk dari Apple. Untuk android juga kamu butuh java dan gradle dimana dua hal ini yang menjadi issue dikalangan developer karena kebutuhan devices yang minimal dengan memory 4gb untuk bisa bekerja maksimal. Jadi memang salah satu tantangan jika kamu memutuskan untuk terjun di pengembangan aplikasi mobile kamu harus memiliki devices yang memadahi.

Perfomance
Untuk perfomance juga masih menjadi perdebatan dikalangan developer ada yang mengatakan bagus dan ada yang mengatakan kuran bagus juga. Akan tetapi bagi saya untuk react native ini sendiri permofance nya cukup lebih baik dibanding kan dengan kita menggunakan framework javascript yang lain karena pada dasarnya dengan menggunakan react native kita membuat apliakasi mobile dengan perfomance native, akan tetapi di beberapa kondisi react native belum sebaik kita pure menggunakan native.


Nah sekian sharing dari saya, semoga bermanfaat, dari pada penasaran pada React Native, yuk kita belajar sama-sama 

 Sumber : https://www.codepolitan.com/membuat-aplikasi-ios-pertama-dengan-react-native-58d94ef94eb76#

By
Read More

Thursday, April 27, 2017

JavaScript Chapter 11 - Perulangan For pada Javascript

  Author : Nurroin's Blog     No comments
April 27, 2017


Nurroin's Blog - Kembali lagi di Totorial dasar Javascript. Disini saya akan membahasa tentang "Perulangan For" pada Javascript, Lansung saja kepada materi.

 Perulangan di dalam pemrograman sangatlah berguna. Misalnya jika kita ingin menampilkan string secara berulang - ulang. Jika kita ingin menampilkan sebuah kalimat sebanyak 100 kali. Tidak mungkin kita menulis sebanyak 100 kali kan ?. Jadi solusinya di dalam pemrograman adalah menggunakan for loop atau dalam bahasa indonesia perulangan for. Tidak hanya string, kita juga bisa menjalankan sebauh method secara berulang - ulang.
Fungsi for pada semua bahasa pemrograman adalah untuk membuat perulangan. Denga membuat perulangan kita bisa membuatnya secara berulang - ulang, baik itu menampilkan string secara berulang-ulang, angka dan fungsi method secara berulang - ulang . Jadi kita dimudahkan dalam penggunaan for loop ini.
MEMBUAT PERULANGAN DENGAN FOR PADA JAVASCRIPT
Pada tutorial ini kita belajar membuat perulangan angka dan perulangan string pada javascript. Silahkan sobat perhatikan contoh berikut
Index.html
Disini kita membuat sebuah tombol yang jika diklik akan menjalankan function perulangan(). Baca tutorial sebelumnya tentang Pengenalan Event Javascript agar lebih jelas
Perulangan for pada Javascript sama cara penulisanya dengan membuat perulangan for pada PHP yang akan saya bahas pada artikel yang akan datang. Disini kita membuat perulangan for dengan x sama dengan 0, x lebih kecil sama dengan 10. Jadi yang ditampilkan adalah angka 0 sampai 10
var text = "";
var x;
for (x = 0; x <= 10; x++) {
        text += "Angka " + x + "<br>";
}
document.getElementById("hasil").innerHTML = text;
Untuk hasilnya.

Hasil dari index.html
 Setelah button di klik akan muncul seperti ini
Setelah button di klik

KESIMPULAN
Sobat dapat memberikan batasan sampai 1000 pun bisa tetapi jika sobat salah dalam penulisan loop ini maka web browser sobat akan crash itulah pengalaman yang pernah saya alami hehe :D . Dengan menggunakan loop ini programmer akan dipermudah dalam penulisan data dan tidak perlu ribet - ribet membuat banyak sekali data hanya dengan membuat loop ini kita bisa mengulang data dengan mudah
Referensi : Malas Ngoding

TUTORIAL BELAJAR JAVASCRIPT LAINNYA

By
Read More

Javascript Chapter 10 - Switch Case di JavaScript

  Author : Nurroin's Blog     No comments
April 27, 2017



Nurroin's Blog - Kembali lagi dengan Turorial dasar Javascipt, pada kesempatan ini saya akan membahas tentang "Switch Case" di Javascript. Langusng saja menuju ke materi.

 JAVASCRIPT PART 9 : SWITCH CASE DI JAVASCRIPT
Switch Case adalah fungsi yang berguna untuk membuat pengecekan sebuah nilai. Dan nilai yang tersedia untuk pengecekan bisa banyak atau lebih dari satu. Switch Case ini tidak hanya tersedia di javascript tetapi PHP pun juga menggunakan Switch Case ini yang akan kita bahas pada tutorial yang akan mendatang. Silahkan sobat perhatikan contoh penggunaan Switch Case pada javascript berikut.
SIWTCH CASE JAVASCRIPT
Pada contoh penggunaan Switch Case pada Javascript di tutorial ini. Kita akan membuat pengecekan sebuah variabel warna yang berisi merah. Dan kemudian kita cek isi variabel warna ini. Akan saya buat file belajar.html
Index.html
Perhatikan pada contoh di atas. Kita memiliki sebuah variabel bernama warna dan berisi string "merah".
var warna = "merah";
 Kemudian kita mengecek isi variabel warna ini.
 switch (warna){
    case "hitam":
        teks = "warna hitam";
        break;
    case "merah":
        teks = "Warna merah";
        break;
    case "hijau":
        teks = "Warna hijau";
        break;
    default:
        teks = "Warna tidak terdeteksi";
}
Jika warna menemukan data case yang sesuai dengan isi dari Variabel warna maka proses pengecekan akan dihentikan. Disini data ditemukan pada pengecekan kedua yaitu merah. Kemudian kita menyimpan string kedalam variabel teks. Sampai disini kita telah memilki isi di dalam variabel teks. Dan terakhir kita tampilkan
document.getElementById("hasil").innerHTML = teks;
Dan hasilnya.
hasil dari index.html
 Sedikit tambah, pada bagian default adalh bagian dimana jika pengecekan tidak di temukan maka default yang akan di gunakan. Misalnya jika pengecekan warna tidak ada yang sesuai maka default yang di jalankan
KESIMPULAN
Jadi Switch Case ini berguna untuk membuat pengecekan sebuah nilai sesuai variabel yang dimasukkan. Dan ketika Variabel tersebut ditemukan maka akan muncul isi dari Switch Case tersebut. Dan kita juga menambahkan default yang berfungsi ketika variabel tidak ditemukan maka default lah yang akan muncul

Referensi : Malas Ngoding


 TUTORIAL BELAJAR JAVASCRIPT LAINNYA

By
Read More

JavaScript Chapter 9 - Menampilkan Tanggal dengan JavaScript

  Author : Nurroin's Blog     No comments
April 27, 2017


Nurroin's Blog - Selain di PHP, dengan javascript kita juga bisa menampilkan tanggal. Kita dapat menampilkan tanggal dengan berbagai format. Bisa itu menampilkan hari, menit, detik, bulan, tahun dan lainnya. Oke langsung saja kita masuk ke pembahasan tutorial ini.

 MENAMPILKAN TANGGAL DENGAN JAVASCRIPT
Ada sebuah fungsi yang khusus disediakan di javasript untuk menampilkan tanggal. Yaitu kita bisa menggunakan fungsi Date(). Dengan menggunakan fungsi Date() ini kita bisa menampilkan tangal. Dan untuk mengatur foramt tanggal yang ditampilkan, teman - teman bisa menyesuaikan degan memberikan/mengisi fomat tanggal nya sesuai dengan keinginan didalam parameter fungsi Date().
Perlu teman - teman perhatikan. Seperti yang sudah kita bahas pada tutorial javascript sebelumnya bahwa javascript memiliki sifat case sensitive, yang artinya penulisan javascript sangat berpengaruh sekali tentang besar kecil hurufnya. Jadi untuk membuat tanggal, sobat harus menuliskan fungsi datenya dengan benar yaitu huruf "D" nya harus huruf kapital.
  • Contoh Salah > date()
  • Contoh Benar > Date()
 Jadi jika teman - teman menuliskan fungsi Date() dengan menggunakan huruf kecil semua, maka hasilnya tidak akan muncul. Jadi harus diawali dengan huruf kapital diawalnya, Sesuai dengan ketentuan penulisan fungsi date.

CONTOH MENAMPILKAN TANGGAL DENGAN JAVASCRIPT
Oke gak perlu lama - lama akan saya berikan contoh penggunaan fungsi Date() pada javascript
index.html

 Pada contoh ini, saya memasukkan fungsi date ke dalam variabel tanggal dan kemudian menampilkannya
 var tanggal = new Date();

document.getElementById("hasil").innerHTML = tanggal;
Dan hasilnya
Hasil dari index.html

KESIMPULAN
Kesimpulanya Untuk menampilkan tanggal pada javascript kita harus menggunakan fungsi Date() dan penulisan Date() harus diawali huruf D kapital (Besar) . Ketika sobat memasukkan fungsi Date() diawali dengan huruf kecil maka fungsi tersebut tidak akan ditampilkan alias Error . Tetapi contoh diatas adalah pembuatan tanggal yang sangat sederhana sobat bisa memberikan style css agar tanggal tersebut terlihat lebih cantik.
 
Referensi : Malas Ngoding

 TUTORIAL BELAJAR JAVASCRIPT LAINNYA

By
Read More

JavaScript Chapter 8 - Membuat Inputan Angka Denga JavaScript

  Author : Nurroin's Blog     No comments
April 27, 2017




Nurroin's Blog - Selamat datang di Nurroin's Blog . Ditutorial JavaScript ini, kta akan membahas tentang cara membuat form inputan yang hanya memungkinkan untuk mengimput angka saja yang bisa diketik pada form ini. Jika user mengetik huruf atau karakter lain, maka tidak akan berfungsi atau yang di input tidak akan berfungsi atau yang di inputkan tidak akan muncul pada form input. Jadi form yang akan kita buat ini adalah form yang hanya mau menampung angka saja. Untuk selanjutnya, tema-teman bisa menyimak tutorial cara Membuat inputan hanya angka dengan javascript berikut ini.

 Membuat Inputan Hanya Angka dengan Javascript

 Terkadang di dalam membuat sebuah aplikasi atau website, kita diharuskan untuk membuat form input yang hanya memperbolehkan untuk mengimput angka. Hal ini bertujuan unutk meminimalisir kesalahan disalam sebuah aplkasi yang kita buat. Untuk cara membuat validasi angka dengan javascript silahkan teman-teman perhatikan pada penjelasan berikut.

 Buatlah file html atau php terserah tema-teman. Disini saya menyediakan sebuah file dengan angka.html dimana di file ini akan kita buat validasi angka atau membuat validasi hanyah angka dengan javascript. Pertama kita akan membuat sebuah form dulu teman-teman.
angka.html
Coba teman-teman perhatikan pada contoh syntax membuat form input angka di atas.
Pertama kita buat dulu sebuah form biasa.
<input type="text" onkeypress="return hanyaAngka(event)">
Tapi di form ini kita memberikan event onkeypress"". Untuk membuat aksi pada saat form ini di ketikkan atau di inputkan. Jadi pada saat terjadi pengetikan pada form ini, maka di jalankan function hanya().
onkeypress="return hanyaAngka(event)"
Sekalian mereturn nilai dari fungsi ini.
Selanjutnya teman-teman perhatikan pada function hanya().
function hanyaAngka(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))

     return false;
    return true;
}
Disini kita melakukan pengecekan jika yang di input adalh angka, maka akan mengembalikan nilai true pada form.
if (charCode > 31 && (charCode < 48 || charCode > 57))
Sekarang coba jalankan pada browser.
hasil dari angka.html
 Hanya angka yang bisa di inputkan.

 Bagaimana Membuat Batas maksimal digit angka yang di masukkan ?

 Untuk Membuat maksimal angka yang di masukkan teman-teman tinggal menambahkan atribut maxlength pada element form tersbut. contohnya.
<input type="text" maxlength="2" onkeypress="return hanyaAngka(event)"/>

nah, Pada Contoh di atas berarti kita hanya membolehkan 2 digit angka yang di input.  Selanjutnya tidak akan bisa terketik lagi pada form.

 Kesimpulan
Oke teman-teman cukup sekian dulu tutorialnya , semoga bermanfaat bagi tema-teman, jika dapat kesulitan, kalian bisa bertanya dengan  mengisi di kolom komentar. 


 TUTORIAL BELAJAR JAVASCRIPT LAINNYA

By
Read More

Tuesday, April 25, 2017

JavaScript Chapter 7 - Mengenal Event Pada JavaScript

  Author : Nurroin's Blog     No comments
April 25, 2017


Nurroin's Blog - Halo teman-teman sekalian. Jumpa lagi di tutorial JavaScript dasar di Nurroin's Blog. Kali ini sesuai dengan judulnya, kita akan membahas tentang event pada JavaScript, langsung saja pada materi.

 PENGENALAN DAN PENGERTIAN JAVASCRIPT

Hallo sobat semua. Kali ini sesuai dengan judulnya kita akan membahas Event pada Javascript . Tahukah sobat apa itu Event ? Event adalah sesuatu yang dilakukan oleh pemakai yang memicu jalanya kode . Pasti sobat masih bingung dengan pengertian tadi. Akan saya jelaskan lagi dah, Misalnya kita memiliki sebuah tombol pada website atau aplikasi yang kita bangun. Dan kita ingin mmeberikan suatu aksi ketika tombol tersebut diklik. Jadi yang menjadi event diisni adalah "event". Misalnya ketika tombol diklik akan menampilkan sebuah kalimat. Jadi eventnya adalah klik. Adapun beberapa event yang terdapat pada javascript sebagai berikut

Macam - Macam Event Pada Javascript
  • onclick = Adalah event ketika sebuah element html diklik
  • onchange = Adalah event jika sebuah element html berubah
  • onmouseover = Adalah event jika jika sebuah element html diletakkan cursor mouse
  • onmouseout = Adalah event jika saat cursor mouse meninggalkan element html
  • onkeydown = Adalah event jika saat terjadi pengetika pada element HTML
  • onload = Adalah event jika saat element atau halaman dibuka
Baiklah akan kita bahas beberapa Event Javascript yang sudah dijelaskan diatas

CARA MEMBUAT EVENT JAVASCRIPT
Untuk membuat event dengan javascript, kita bisa menambahkan atribut dengan nama - nama event diatas, pada element html yang ingin kita berikan event contohnya

CONTOH EVENT PADA JAVASCRIPT
Untuk contohnya saya akan membuat event klik pada sebuah tombol. Jadi saya ingin menampilkan sebuah kalimat jika tombol tersebut diklik
index.html
Coba sobat perhatikan pada contoh diatas, terdapat sebuah tombol yang kita berikan ketika event diklik.
<button onclick="tampil_nama()">Klik Disini</button>
Pada saat tombol ini diklik maka akan dijalankan function tampilkan_nama(). Nah lalu kita buat function tampilkan_nama.
function tampil_nama(){dicument.getElementByid("hasil").innerHTML = "<h3>Nama Saya Dzun</h3>";}
 Isi dari function tampilkan_nama() ini adalah menampilkan kalimat "Nama saya adalah Yogi" pada element id hasil.

 Perhatikan gambar berikut.

hasil dari index.html
setelah tombol button di klik

Setelah di klik "button-nya" akan muncul dibawah button "Nama saya Dzun"

KESIMPULAN
Kesimpulanya ada 6 event pada javascript dan yang saya contoh diatas adalah event onclick. Jadi ketika tombol kita click maka isi dari function tersebut akan muncul kurang lebihnya seperti itu logikanya dan dapat sobat kembangkan sendiri sesuai kreatifitas sobat. Nah sampai sini artikel belajar Javascript ini Sekian Terima Kasih

 Referensi : script-kiddies.org  malasngoding
TUTORIAL BELAJAR JAVASCRIPT LAINNYA

By
Read More

JavaScript Chapter 6 - Membuat Function JavaScript

  Author : Nurroin's Blog     No comments
April 25, 2017



Nurroin's Blog - Di tutorial belajar javascript dasar Chapter 6 ini kita akan melanjutkan pembahasan kiita tentang tutorial dasar. Yang sebelumnya kita telah membahas tentang tutorial dasar javascript lainnya dari chapter 1 sampai chapter 5. ditutorial belajar javascript dasar chapter 6 ini kita akan membahas tentang "Membuat Function di JavaScript".

 Apa itu function ? mungkin sebagian teman-teman ada yang maasih belum mengetahui pengertian dari function, maka akan saya ulas sedikit tentang pengertian function

 PNGERTIAN FUNCTION DI JAVASCRIPT

 Function adalah fasilitas di setiap pemograman untuk membuat sesuatu perintah yang fungsinya dapat kita gunakan berulang kali tanpa batas. Selama halaman masih terhubung dengan function yang di maksud.

 MEMBUAT FUNCTION DI JAVASCRIPT
Untuk membuat function pada javascript ada beberapa hal yang harus dipahami terlebih dahulu. Yaitu tentang penulisan function pada javascript. Berikut adalah contoh format penulisan function pada javascript
<script> 
/membuat function di javascript 
function nama _function(){ 
// isi function nya dibuat disini 
} 
</script>

 Seperti yang telah kita lihat pada contoh diatas. Untuk membuat function penulisanya harus diawali oleh syntax function kemudian dilanjutkan dengan nama function yang akan dibuat. Dan isi dari function dituliskan dalam kurung kurawal " { } " . Berikut contoh sederhana penggunaan function javascript.
index.html

 Perhatikan contoh diatas
function tampilkan_nama(){ 
return "Nurroin's Blog"       }
Kita membuat function dengan nama "tampilkan_nama()" yang berisi perintah untuk mengembalikan string "Script Kiddies". Jadi ketika function tampilkan_nama() dipanggil maka hasilnya adalah ' Nurroin's Blog ' .
hasil dari index.html
KESIMPULAN
Itulah cara membuat function pada javascript yang intinya kita harus membuat terlebih dahulu function lalu nama function dan isi dari function tersebut terletak di dalam kurung kurawal () . Dan kita tinggal memanggil function tersebut dan pada contoh diatas saya print function tampilkan_nama menggunakan document.getElementById

 Referensi : Malas Ngoding

TUTORIAL BELAJAR JAVASCRIPT LAINNYA

By
Read More
Subscribe to: Posts ( Atom )