Javascript 4: Variable

12:50 PG 0 Comments A+ a-

Variable atau pemboleh ubah adalah satu value yang kita declare value tersebut untuk memberi nilai pada pemboleh ubah tersebut.
var myAge=27;

console.log(myAge);



// PAPARAN: 27


Kita declare myAge dengan memberi arahan var myAge, kemudian kita masukkan nilai dengan arahan =27; Untuk coding yang complex, kita perlu menyimpan value siap-siap kedalam variable dengan specific dan case sensitive nama yang senang diingati, dan kita akan panggil variable ini di masa yang mana perlu padanya.





Kita telah melihat bagaimana mencipta variable. Sekarnag bagaimana untuk menggunakannya? Ianya berguna ketika anda memasukkan sesuatu nilai kedalam variable dan variable tersebut digunakan untuk formula atau pengiraan berasaskan variable yang telah dimasukkan. For example:

var myName = "Encraption Team";

myName.substring(0,5)



Jika dilihat disini, myName sekarang adalah diwakili oleh value 'Encraption Team'.

myName.substring(0,5)



pada zahirnya kelihatan ianya myName, tetapi ianya sebenarnya memegang value seperti dibawah

"Encraption Team".substring(0,5) 



iaitu nilainya adalah Encraption Team. Contoh penggunaan Variable adalah memberi value pada variable myCountry sebagai value Malaysia dan melakukan operasi keatas variable tersebut

// Declare a variable on line 3 called
// myCountry and give it a string value.
var myCountry = "Malaysia";


// Use console.log to print out the length of the variable myCountry.
console.log( myCountry.length);

// Use console.log to print out the first three letters of myCountry.
console.log(myCountry.substring(0,3) );


Paparan: 8


Mal


// On line 2, declare a variable myName and give it your name.
var myName = "Mr Encraptor";
// On line 4, use console.log to print out the myName variable.
console.log (myName);
// On line 7, change the value of myName to be just the first 2 
// letters of your name.
var myName = "Mr";
// On line 9, use console.log to print out the myName variable.
console.log (myName);


Paparan:


Mr Encraptor


Mr


On line 1, create a variable myColor and give it a string value.


On line 2, print the length of myColor to the console.


var myColor = "Green";
console.log(myColor.length);


Paparan:


5


// Not sure where to begin? Check the Hint!
var myNumber=27;
if
    (myNumber === 27)
    {
        console.log("I finished my first course!");
    }
    else
    {
         console.log("I cant finished my first course!");
    }


Paparan:


I finished my first course!


// Check if the user is ready to play!
confirm("I am ready to play!");
var age = prompt("What's your age");
if (age<=13)
{
    console.log ( "You cant play this game");
}
else
{
console.log ("please play it safely");
}


var_retrive_dari_prompt


Jika user masukkan melebihi 13, mereka boleh bermain game ini, sebaliknya mereka tidak dibenarkan bermain game ini.





// Check if the user is ready to play!
confirm("I am ready to play!");
var age = prompt("What's your age");
if (age<=13)
{
    console.log ( "You cant play this game");
}
else
{
console.log ("please play it safely");
}
console.log ("You are at a Justin Bieber concert, and you hear this lyric 'Lace my shoes off, start racing.'");
console.log ("Suddenly, Bieber stops and says, 'Who wants to race me?'");
var userAnswer=prompt("Do you want to race Bieber on stage?");

if (userAnswer==="yes")
{
    console.log ( "You and Bieber start racing. It's neck and neck! You win by a shoelace!");
}
else
{
console.log ("Oh no! Bieber shakes his head and sings 'I set a pace, so I can race without pacing.'");
}
var feedback=prompt("Please rate our game");
if (feedback>=8) 
{
    console.log("Thank you! We should race at the next concert!");
}
else
{
    console.log("I'll keep practicing coding and racing.");

}


Paparan:

Javascript 3: Substring

4:20 PTG 0 Comments A+ a-

Pernah melihat bagaimana tajuk email gmail dikerat contentnya di muka depan gmail kerana isinya panjang?

substring1

Jika diklik pada tajuk email tersebut, perkataan promotion(baris 1) dan product (baris ke-2) akan keluar namun ianya di kerat di muka hadapan Gmail. Ianya menggunakan kaedah substring.

Kiraan perkataan diulakan dengan 0.
0 1 2 3 4
| | | | |
h e l l o


"hello". substring(0, 2);

Paparan : HE // Be careful with the substring's letter positions!

"wonderful day".substring(3,7); 

Paparan: "derf"


0 - w


1 - o


2 - n


3 - d (bermula disini)


4 - e


5 - r


6 - f (berakhir disini iaitu sebelum no ke 7)


7 - u





Latihan:

a. "Jan" in "January"
b. "Melbourne is" in "Melbourne is great" (note the space!)
c. "burgers" in "Hamburgers"

Jawapan:

console.log("January".substring(0,3));
console.log("Melbourne is great".substring(0,12));
console.log("Hamburgers".substring(3,10));
  

Javascript 2: Nota Asas Javascript Part 2 - Condition IF ELSE

7:03 PTG 0 Comments A+ a-

Penggunaan If Condition Disertakan kerangka ringkas If Else. Setiap kali ingin membuat If Else, gunakan template ini dan isi condition semasa dan action yang hendak dilaksanakan.
if (condition) 
{
// if condition is true
// do this code
}
else // "otherwise"
{
// do this code instead
}

Contoh:


// Remember, the order and punctuation matter.
// If you get an error, check carefully, line by line.
// If you're really stuck, click "Stuck? Get a hint!"

if (5>6)
{ console.log ("The condition is true")
}
else //otherwise
{ console.log ("The condition is false")
}

Computer Tidak Bijak Sangat Komputer tidaklah bijak sangat, Syntax perlu diletakkan betul-betul pada tempatnya dan tidak boleh ditafsir sendiri oleh komputer. Jadi, kita perlu memperlajari cara meletak syntax dengan betul supaya komputer boleh faham apa yang kita ingin lakukan. Kita kena biasakan diri dengan susunan syntax sebelum bermadah pujangga. contoh dibawah ialah terdapat kesilapan meletak syntax ; dan menukar = kepada ===. Mengapa? = adalah untuk assign sesuatu variable manakala === adalah untuk comparison. Dengan adanya ; dan = maka computer ini terus pening dan akan keluar error tidak dapat run. SCRIPT SALAH

if (10 = 10); {
console.log("You got a true!");
} else {
console.log("You got a false!");
}

Kita kena buang terlebih dahulu semi-colon ; serta menggantikan = kepada === seperti dibawah

if (10 === 10) {
console.log("You got a true!");
} else {
console.log("You got a false!");
}

Contoh:

if  ("Jon".length * 2 / (2+1) ===2 )
{
console.log("The answer makes sense!");
}
else
{
console.log("Error Error Error");
}

Paparan: The answer makes sense! MODULO Modulo adalah reminder dalam pembahagian. Digunakan didalam programming selain untuk kira, juga untuk mengesan nombor ganjil dan genap.

// Below is an example of printing the remainder of 18/4 using modulo:
// console.log(18 % 4);
console.log(14 % 3);
console.log(99 % 8);
console.log(11 % 3);

Paparan: 2 3 2


//An example of an if/else statement with modulo in the condition


if  ("Jon".length * 2 / (2+1) ===2 )
if(10 % 5 ===0 )
{
console.log("The first number is even");
} else {
console.log("The first number is odd");
}

Paparan: The first number is even

Javascript 1: Nota Asas Javascript

5:39 PG 0 Comments A+ a-


"nixk".length


// PAPARAN: 4




4+3

// PAPARAN: 7



6/2


// PAPARAN: 3


// This is a comment that the computer will ignore.
// It is for your eyes only!
"cake".length
// Ini adalah komen dan komputer akan ignore baris ini.


// PAPARAN: 4


confirm('This is an example of using JS to create some interaction on a website. Click OK to continue!');


// PAPARAN: Dialog confirm



confirm ("I feel awesome!");
confirm ("I'm ready to go.");


// PAPARAN: Ada 2 Dialog confirm


prompt ("Where are you come from?");


// PAPARAN: Ada 1 dialog pertanyaan, bila dijawab Kelantan, result akan papar Kelantan


alert('Hello nixk, welcome to Code Avengers')

// PAPARAN: Keluar dialog alert


Data Types I & II: Numbers & Strings

Data mempunyai pelbagai jenis. Kita baru menggunakan dua iaitu number dan strings.

a. Number: Kuantiti dan boleh lakukan math.

b. Strings: adalah aksara a-z,space dan mungkin juga number, biasanya string digunakan sebagai label, nama dan isi didalam program kita

c. Jika ingin menjadikan number sebagai number dan bukan string, taip tanpa quotes ". Contoh: 190.12334.

d. JIka ingin menjadikan string, gunakan quotes ".



Data Type III: Booleans

Booleans digunakan untuk membandingkan dua perkara untuk mendapat keputusan samada true atau false.

23 > 10 is true
5 < 4 is false


"I'm coding like a champ".length >10

// PAPARAN: true


Console.log

console.log( 2*5)
console.log( "Hello")

// PAPARAN:
10
Hello

Penggunaan console log adalah untuk mengetahui apa sebenarnya computer sedang lakukan. Juga dikenali sebagai printing out.



// Here is an example of using the greater than (>) operator.
console.log(15 > 4); // 15 > 4 evaluates to true, so true is printed.

// Fill in with >, <, === so that the following print out true:
console.log("Xiao Hui".length < 122);
console.log("Goody Donaldson".length > 8);
console.log(8*2 == 16);

// PAPARAN:
true
true
true
true


if (10 >=7 ) {
console.log("You have a long name!" );
}

// PAPARAN:You have a long name!



if ("left".length >10 )
{
console.log("Let's go down the first road!");
}
else
{
// What should we do if the condition is false? Fill in here:
console.log("Let's go down the second road!");

}

// PAPARAN: Let's go down the second road!

Mobile Apps 3 : Gunakan Pages Sebagai Dailog

10:03 PTG 0 Comments A+ a-

 


<!--
* Mari Belajar PHP
* @copyright (c) 2015, Encraptor Inc. All Right Reserved
* @author Encraptor@gmail.com

* @link http://encraption.blogspot.com
* @version 20151
* @desc Mobile Apps 3 : Gunakan Pages Sebagai Dailog
* Fail: 3_PagesSebagaiDailog.php

-->

<!-- Tag <!DOCTYPE html> merupakan tag HTML5 -->
<!DOCTYPE html>
<html>
<head>

<!-- meta name untuk device mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Kita perlu memanggil 3 perkara asas rujukan untuk mobile apps iaitu JQUERY, JQUERY MOBILE serta JQUERY MOBILE CSS-->

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>


<div data-role="page" id="pageone">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>

<div data-role="main" class="ui-content">
<p>Welcome!</p>
<a href="#pagetwo">Go to Dialog Page</a>
</div>

<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>

<!-- Untuk menjadikan sesuatu page itu menjadi dialog page, kita perlu set data-dialog="true" di page berkenaan -->

<div data-role="page" data-dialog="true" id="pagetwo">
<div data-role="header">
<h1>I'm A Dialog Box!</h1>
</div>

<div data-role="main" class="ui-content">
<p>The dialog box is different from a normal page, it is displayed on top of the current page and it will not span the entire width of the page. The dialog has also an icon of "X" in the header to close the box.</p>
<a href="#pageone">Go to Page One</a>
</div>

<div data-role="footer">
<h1>Footer Text In Dialog</h1>
</div>
</div>


</body>
</html>


 



3_PagesSebagaiDailog1



3_PagesSebagaiDailog2

Mobile Apps 2: Menambah Page Didalam Mobile Apps

9:53 PTG 0 Comments A+ a-

 


<!--
* Mari Belajar PHP
* @copyright (c) 2015, Encraptor Inc. All Right Reserved
* @author Encraptor@gmail.com

* @link http://encraption.blogspot.com
* @version 20151
* @desc Menambah Page Didalam Mobile Apps
* Fail: 2_tambahPageDanLink.php

-->

<!-- Tag <!DOCTYPE html> merupakan tag HTML5 -->


<!DOCTYPE html>
<html>
<head>
<!-- meta name untuk device mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Kita perlu memanggil 3 perkara asas rujukan untuk mobile apps iaitu JQUERY, JQUERY MOBILE serta JQUERY MOBILE CSS-->

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<!-- Setiap page perlu diset <div data-role="page"> dan mempunyai tiga data-role iaitu header,main dan footer
Oleh kerana terdapat beberapa page, maka kita perlu letakkan id di page tersebut.
Setiap ID Page ada Nama Yang Unik. Contoh: id="pageone" dan id="pagetwo".
Cara panggil adalah href="#pagetwo" dan href="#pageone".
-->


<!-- Page pertama bernama pageone, nama tersebut di letakkan di ID sebelah data-role="page" -->
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>

<div data-role="main" class="ui-content">
<p>Welcome! If you click on the link below, it will take you to Page Two.</p>
<a href="#pagetwo">Go to Page Two</a>
</div>

<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>

<!-- Page pertama bernama pagetwo, nama tersebut di letakkan di ID sebelah data-role="page" -->
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>

<div data-role="main" class="ui-content">


<!-- Cara memanggil page tersebut dengan meletakkan # disebelah nama yang diberikan pada id page.
contoh: <a href="#pageone"> -->
<p>This is Page Two. If you click on the link below, it will take you to Page One.</p>
<a href="#pageone">Go to Page One</a>
</div>

<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>

</body>
</html>


2_tambahPageDanLink1



2_tambahPageDanLink2

Mobile Apps 1 : Asas-asas dalam Page

9:29 PTG 0 Comments A+ a-

<!--
* Mari Belajar PHP
* @copyright (c) 2015, Encraptor Inc. All Right Reserved
* @author Encraptor@gmail.com

* @link http://encraption.blogspot.com
* @version 20151
* @desc Penenrangan Asas bagi Mobile Apps didalam HTML5
* Fail: 1_AsasPageMobile.php

-->

<!-- Tag <!DOCTYPE html> merupakan tag HTML5 -->
<!DOCTYPE html>



<html>
<head>

<!-- meta name untuk device mobile -->

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Kita perlu memanggil 3 perkara asas rujukan untuk mobile apps iaitu JQUERY, JQUERY MOBILE serta JQUERY MOBILE CSS-->

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<!-- Setiap page perlu diset <div data-role="page"> dan mempunyai tiga data-role iaitu header,main dan footer -->

<div data-role="page">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>

<div data-role="main" class="ui-content">
<p>I Am Now A Mobile Developer!!</p>
</div>

<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>

</body>
</html>


1_AsasPageMobile



 



Rujukan penting: W3Schools->JqueryMobile