Dimensi TutupBotol: JavaScript

Showing posts with label JavaScript. Show all posts

Friday, May 24, 2019

Javascript Locale Date Format

This is just a simple example :

var date = new Date();
undefined

date.toLocaleDateString("id")
"24/5/2019"
date.toLocaleDateString("ja")
"2019/5/24"
date.toLocaleDateString("en")
"5/24/2019"

Friday, November 23, 2018

Nyiampin Development Environment Buat GruntJS

Okie sebelum membuat development environment GruntJs, pertama-tama kita udah harus punya nodejs dl. Soalnya GruntJS itu pake NPM. Daan untuk postingan ini dipakai nodejs dan npm version seperti terlihat dibawah :

Siips... setelah iut kita install grunt cli secara global. Caranya tinggal execute command "npm install grunt-cli -g"

Terus berikutnya kita ngebuat package.json dari npm init (yang default2 dl ajjah buat npm initnya)

Klu udah... berikutnya kita install grunt secara local. Jadi tinggal eksekusi " npm i grunt --save-dev"

Hasilnya seperti ini :

Jadi versi terbaru grunt saat ini adalah 1.0.3...

Siips... berikutnya kita buat Gruntfile.js dan isikan kode seperti ini

Seperti terlihat pada Gruntfile.js diatas, jadi pada dasarnya kita punya 3 biji komponent utama di grunt, yaitu configuration, load plugins dan register task. Ketiga kompoennt tersebut akan dibahas lebih jauh dipostingan berikutnya. Daan saat ini kita bisa ngetest Grunt Task kita dengan perintah
"grunt <nama task". Contohnya :

So, kita ngejalanin task "testajjah" dan didalam task tersebut ada console yang bakalan ngeprint "running test task from grunt" seperti terlihat pada kode dan command prompt screen diatas. yeeeii...

Berikutnya kita bikin 1 biji task di grunt buat ngerunning 2 biji task yang udah kita bikin diatas. Kodenya seperti ini :

Hasilnya :

Siipss... sampai disini... semoga bisa membantu ehehe... :-)

Thursday, August 30, 2018

Membuat Drag and Drop Angka di Javascript - I

Ookie disini kita setting awal projectnya dulu... Jadi silahkan cari list angka2 dari google, trs tempatin dalam suatu folder, ters buat index.hmtl, style.css, dan script.js... semuanya akan terlihat seperti ini :

Isi index.html seperti ini :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> Drag Drop Angka </title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

    
    <script src="script.js"></script>
    </body>
</html>

Seeepsss... berikutnya kita masukin semua angka-angka kita kedalam file html, contoh 1 biji kek gini propertinya...

1 2	<img draggable="true" id='angka_0a' src="_angka/0a.png" alt="angka_0a" style="position: absolute; left: 34px; top: 34px; z-index: 7;" />

Jadi klu dimasukin semua angkanya.. jadinya seperti ini :

    <body>
        <img draggable="true" id='angka_0a' src="_angka/0a.png" alt="angka_0a"
        style="position: absolute; left: 34px; top: 34px; z-index: 7;" />

        <img draggable="true" id='angka_1a' src="_angka/1a.png" alt="angka_1a"
        style="position: absolute; left: 44px; top: 34px; z-index: 7;" />

        <img draggable="true" id='angka_2a' src="_angka/2a.png" alt="angka_2a"
        style="position: absolute; left: 54px; top: 300px; z-index: 7;" />

        <img draggable="true" id='angka_3a' src="_angka/3a.png" alt="angka_3a"
        style="position: absolute; left: 664px; top: 234px; z-index: 7;" />

        <img draggable="true" id='angka_4a' src="_angka/4a.png" alt="angka_4a"
        style="position: absolute; left: 274px; top: 34px; z-index: 7;" />

        <img draggable="true" id='angka_5a' src="_angka/5a.png" alt="angka_5a"
        style="position: absolute; left: 40px; top: 534px; z-index: 7;" />

        <img draggable="true" id='angka_6a' src="_angka/6a.png" alt="angka_6a"
        style="position: absolute; left: 340px; top: 304px; z-index: 7;" />

        <img draggable="true" id='angka_7a' src="_angka/7a.png" alt="angka_7a"
        style="position: absolute; left: 734px; top: 34px; z-index: 7;" />

        <img draggable="true" id='angka_8a' src="_angka/8a.png" alt="angka_8a"
        style="position: absolute; left: 500px; top: 300px; z-index: 7;" />

        <img draggable="true" id='angka_9a' src="_angka/9a.png" alt="angka_9a"
        style="position: absolute; left: 600px; top: 550px; z-index: 7;" />
    
        <script src="script.js"></script>
    </body>

Kalu kita liad disitu ada draggable = "true", itu mskdnya biar tar bisa didrag...berikutnya kita taroin styling cursor move di css kyk gini :

Hasilnya :

(cursor movenya g' bisa diprint screent trnyata.. :D)

Siipsss.... sampai disini dl... berikutnya kita akan beralih kebagian javascriptnya... See yaa in the next post...

Wednesday, August 29, 2018

Membuat Video Sebagai Background Web

Pertama-tama kita buat foldernya terus ditaroin file html sama video yang ingin kita pake sebagai background kyk gambar dibawah :

Terus didalem mainfile.html kita tambain kode buat videobackgroundnya dl kek gini :

Klu udah nambain kyk kode diatas, trs kita buka mainfile.html, hasilnya seperti ini :

Jadi videonya udah running dibackground... yeeaaah..... Berikutnya kita tambain sesuatu diatas videonya kyk gini ajjah yg simpel...

<!DOCTYPE html>
<html>
    <head>
        <meta content="width=device-width, initial-scale=1">
        <style>
            #myvideobackground {
                position: fixed;
                right: 0;
                left: 0;
                bottom: 0;
                min-width: 100%;
                min-height: 100%;
            }
            .myContent {
                position: fixed;
                bottom: 0;
                padding: 20px;
                margin: 20px;
                background: #91f3b6;
                opacity: 0.80;
            }
            .myContent h2 {
                color: purple;
                font-size: 34px;
            }
            .myContent p {
                font-family: 'Times New Roman', Times, serif;
                font-style: oblique;
            }
            .myContent .div2 {
                width: 100%;
                text-align: center;
            }
            #videoBtn {
                background-color: cornflowerblue;
                width: 80px;
                transition: 1s;
            }
            #videoBtn:hover {
                background-color: rgb(0, 255, 98);
            }
        </style>
    </head>
    <body>
        <video autoplay muted loop id="myvideobackground">
            <source src="Pemandangan 1.mp4" type="video/mp4">
                Your browser does not support HTML5 video...
        </video>
        <div class="myContent">
            <h2> Ini adalah contoh video background </h2>
            <p> Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro</p>
            <div class="div2"><button id="videoBtn" onclick="playPause">Pause</button></div>
        </div>
    </body>
</html>

Hasilnya :

Terus berikutnya kita nambain handler buat button yg paling bawah buat ngepause dan ngeplay kembali videonya... So tambahkan script kyk gini :

        <script>
            var video = document.getElementById("myvideobackground");
            var vidBtn = document.getElementById("videoBtn");
            // vidBtn.addEventListener("click", playPause);
            function playPause () {
                console.log('here here here')
                if (video.paused) {
                    video.play();
                    vidBtn.innerHTML = "Pause";
                } else {
                    video.pause();
                    vidBtn.innerHTML = "Play";
                }
            }
        </script>

Naaah... dengan script itu kita bisa ngplay dan/atau ngepause videonya.... :D

Siipss... sekians dan terima kasih... semoga bermanfaaat... :-)

Source code lengkapnya :

<!DOCTYPE html>
<html>
    <head>
        <meta content="width=device-width, initial-scale=1">
        <style>
            #myvideobackground {
                position: fixed;
                right: 0;
                left: 0;
                bottom: 0;
                min-width: 100%;
                min-height: 100%;
            }
            .myContent {
                position: fixed;
                bottom: 0;
                padding: 20px;
                margin: 20px;
                background: #91f3b6;
                opacity: 0.80;
            }
            .myContent h2 {
                color: purple;
                font-size: 34px;
            }
            .myContent p {
                font-family: 'Times New Roman', Times, serif;
                font-style: oblique;
            }
            .myContent .div2 {
                width: 100%;
                text-align: center;
            }
            #videoBtn {
                background-color: cornflowerblue;
                width: 80px;
                transition: 1s;
            }
            #videoBtn:hover {
                background-color: rgb(0, 255, 98);
            }
        </style>
    </head>
    <body>
        <video autoplay muted loop id="myvideobackground">
            <source src="Pemandangan 1.mp4" type="video/mp4">
                Your browser does not support HTML5 video...
        </video>
        <div class="myContent">
            <h2> Ini adalah contoh video background </h2>
            <p> Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro</p>
            <div class="div2"><button id="videoBtn" onclick="playPause()">Pause</button></div>
        </div>
        <script>
            var video = document.getElementById("myvideobackground");
            var vidBtn = document.getElementById("videoBtn");
            // vidBtn.addEventListener("click", playPause);
            function playPause () {
                console.log('here here here')
                if (video.paused) {
                    video.play();
                    vidBtn.innerHTML = "Pause";
                } else {
                    video.pause();
                    vidBtn.innerHTML = "Play";
                }
            }
        </script>
    </body>
</html>

Tuesday, June 5, 2018

Get the Date of Previous Day in Javascript

Code :

print("Getting previous date")
var yourPrevDay = 5 // Your desired day 
var d = new Date(new Date().setDate(new Date().getDate()- yourPrevDay))
print(d)

Result :

Getting previous date
Thu May 31 2018 05:20:06 GMT+0200 (CEST)

Tuesday, April 3, 2018

Contoh Konversi Tanggal di Javascript

Sunday, January 28, 2018

Webpack untuk Pemula - Part II

Di part 1 kita udah belajar buat make webpack, Nah sekarang bakalan belajar yang webpack-dev-server. Sesuai namanya, webpack-dev-server ini ngebuat virtual server di local hardisk kita. Jadi pas akses htmlnya udah lewat server ataw protocol http, g' lewat file://bla blabla lagi kyk dipostingan sebelumnya.. :D
So pertama-tama mari kita install webpack-dev-servernya dengan perintah :
npm i webpack-dev-server --save-dev

Stlah di install kita jg bisa liad perubahannya di package.json kek gini :

Naah...terakhir kita ubah script poipo_buildnya biar make webpack kek gini :

So... tinggal jalanin perintah npm run poipo_build

Selese daaah.... mari kita buka http://localhost:8080/

Siiipsss.... cukup sekian untuk yang part II ini... ehehe... :D

Semoga bermanfaat... :)

Sampai jumpa di part III...

Friday, January 26, 2018

Webpack untuk Pemula

Di postingan sebelumnya kita udah maen javascript tanpa make webpack. Naah dipostingan ini kita bakalan naroin webpack. Jadi klu yg belum liad2 postingan sebelumnya... Silahkan lihat disini...

Github untuk postingan ini bisa dilihat disini....
Ok... pertama-tama sebelum install webpack, kita harus install nodejs dl... di sini Hisoka pake node js versi 6.11.1

Nah... setelah install nodejs, berikutnya kita inisialisasi projectnya dl... jalanin 'npm init' terus ikuti langkah2 yg terlihat diconsole...

Naah...tinggal ketik YES... dan enter... trs kita dapat file package.json yg isinya kek gini :

Terus berikutnya baru kita install webpacknya. Tinggal running command ini :
npm i webpack --save-dev

--save-dev itu nunjukin klu webpack syarat dipake buat development....

Nah stelah slese diinstall kita bisa liad perubahannya dengan penambahan folder node_modules sama di package.jsonnya...

Berikutnya kita kasih tau webpacknya buat ngebuild file app.js. So tambain gini di package.json :

Siipss... jadi webpacknya bakalan nyari file app.js ters hasil kompilasinya ditaro di folder dist/bundle.js... Ok next kita ubah kode javascript di app.js soalnya dia bakalan diload sm webpacknya pertama kali... so beralih ke app.js dan ubah jadi kek gini :

Siipss... cuma nambain import bla bla dari file poipo-dom-loader.js.. .Ters kita ubah juga poipo-dom loadernya kek gini biar bisa di import :

Siiipss... daaah deeeeh.... tinggal running webpacknya pake command :
npm run poipo_build
Hasilnya :

Setelah berhasil di build kita liad ada folder baru 'dist' yg isinya bundle.js.... naah bundle.js ini kita load ke file.htmlnya kek gini :

Daaan... Hasilnya...

Siipss... daaah....

Btw... 1 tambahan... buat ngekompile webpack, kita bisa pake minified version. Minified version itu biasanya buat production. Jadi bundle.js-nya lebih kecil file sizenya... Nah cara buat bikin kayak gitu kita tambain kode berikut di package.json...

So tinggal ditambain flag '-p' ajjah.. itu maksnya build buat production... Trs klu kita pengen build tinggal pake "npm run poipo_build_prod"... bundle.js-nya dikomparasi klu pake -p dan g' pake -p...

Naah.. tuh.. file sizenya cm skitar 1kB,,,beda klu g' pake -p yg sizenya sekitar 4kB... dan berikut komparasi isi bundle.js-nya...
Klu g' pake -p :

Klu pake -p :

Siiipsss... sekian dl untuk part ini... sampai jumpa di part berikutnya... :)

Wednesday, January 24, 2018

Iseng Javascript haha... :D

Berikut previewnya :

Berikut kodenya :
index.html :

<!doctype html>
<html lang="en">
<head>
  <title> Iseng Javascript </title>
</head>
<body>
  <h1> This is without using webpack </h1>
  <button id="poipo-button"> Show Paragraph </button>
  <p id="poipo-paragraph"> Hellow there... Please click the button... :) </p>
  
  <script src="js/poipo-dom-loader.js"></script>
  <script src="js/app.js"></script>
</body>
</html>

poipo-dom-loader.js :

1 2	var myButton = document.querySelector('#poipo-button'); var myParagraph = document.querySelector('#poipo-paragraph');

app.js :

var showParagraph = false;

myButton.addEventListener('click', toggleState);

function toggleState() {
  showParagraph = !showParagraph;
  updateParagraph();
  updateButton();
}

function updateParagraph() {
  if(showParagraph) {
    myButton.textContent = 'Hide Paragraph';
  } else {
    myButton.textContent = 'Show Paragraph';
  }
}

function updateButton() {
  if(showParagraph) {
    myParagraph.textContent = 'Hay hay hay hay... Thanks for clicking the button...:D';
  } else {
    myParagraph.textContent = 'Please click the button';
  }
}

Github :
https://github.com/HyosokaPoipo/isengjavascript

Lnjut ke Part II...

Wednesday, December 13, 2017

How to check object property in Node.js

Here's the way...

var my_obj = {
    name : "Hisoka",
    skills: "Bungejigum"
};

if(my_obj.hasOwnProperty('status')) {
    console.log(" my object has status property");
} else {
    console.log(" status is NOT in there");
}

if(my_obj.hasOwnProperty('skills')) {
    console.log(" my object has skills property");
} else {
    console.log(" skills is NOT in there");
}

/**
* Another way for checking property is using 'in'.
* but BE CAREFUL! The in operator matches all object keys,
* including those in the object's prototype chain.
* So it's preferred to use hasOwnProperty
*/
console.log("\n");
if('status' in my_obj) {
    console.log(" status is in there");
} else {
    console.log(" status is NOT in there");
}


if('skills' in my_obj) {
    console.log(" skills is in there");
} else {
    console.log(" skills is NOT in there");
}

Result :

Saturday, November 26, 2016

map di React

class RobotItems extends React.Component {
  render() {
    const topics = ["React", "JSX", "JavaScript", "Programming"];
    return (
      <div>
        <h3>Topics I am interested in</h3>
        <ul>
          {topics.map(top => <li>{top}</li>)}
        </ul>
      </div>
    );
  }
}

Monday, June 27, 2016

Date in Javascript

Here is the example code :

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Display Date</button>

<p id="demo"></p>

</body>
</html>