Scribd
Upload
60 views9 pages

Javascript I Want To Become An Expert 9page

The document is about becoming an expert in Javascript and provides examples of: 1. Displaying output using window.alert(), document.write(), innerHTML, and console.log. 2. Using dialog boxes and input boxes, including getting values, length, and substrings. 3. Creating functions with parameters that return values as numbers, strings, or using DOM manipulation. 4. Adding conditions inside and outside functions to return different values. 5. Counting values using functions with DOM events like onkeyup.

Uploaded by

Rendra Nur Salam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
60 views9 pages

Javascript I Want To Become An Expert 9page

The document is about becoming an expert in Javascript and provides examples of: 1. Displaying output using window.alert(), document.write(), innerHTML, and console.log. 2. Using dialog boxes and input boxes, including getting values, length, and substrings. 3. Creating functions with parameters that return values as numbers, strings, or using DOM manipulation. 4. Adding conditions inside and outside functions to return different values. 5. Counting values using functions with DOM events like onkeyup.

Uploaded by

Rendra Nur Salam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Javascript

I want to become an expert


From intermediate to advance

By : Ferryanto
[email protected]
array, function, object,
constructor, method, oop, DOM, ... Start 22 November 2015
Update

9 page
from 100 page

Support me (make 100 page) by donation :


Bank BCA : Ferryanto, 7920619864
Fasapay : FP97671
Webmoney : z185978071797
Content

How Javascript display output.....................................................................................................3


Dialog box and input box............................................................................................................4
Function with parameter..............................................................................................................5
Function with parameter return a value (number).......................................................................5
Function with parameter return a value (string)..........................................................................5
Function with parameter return a value (using DOM)................................................................6
Function return value with condition if outside function............................................................7
Function return value with condition if inside function..............................................................7
Count buy, pay, refund using function with DOM event onkeyup (technique 1)........................8
Count buy, pay, refund using function with DOM event onkeyup (technique 2)........................8
Count buy, pay, refund using function with DOM event onkeyup (technique 3)........................9

Javascript, I want to become an expert 2


How Javascript display output

1. Using window.alert()

<! DOCTYPE html>


<html>
<head><title>HOME</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>

<script>
window.alert(1+1);
</script>

</body> window.alert()
</html>

2. Using document.write()
1.document.write()
<script>
document.write(1+1);
</script>
2.document.write()
<script>
<button onclick="document.write(5 + 6)">Try it</button>
</script>

3. Using innerHTML
innerHTML
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

4. Using console (F12 at browser firefox)

<script>
console.log(5 + 6); console
</script>

Javascript, I want to become an expert 3


Dialog box and input box

Dialog box

A : <input type = "text" id = "a"><br/>


B : <input type = "text" id = "b">
<button type="button" onclick = "proccess()">Process</button>
<p id = "result"></p>

<script>
var proccess = function()
{
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
if (confirm("You want to count number ?"))
{
var c = Number(a) + Number(b); //+a + +b
document.getElementById("result").innerHTML = c;
}
}
</script>

Input Box : Using length and substring (built in method)

<script>
var a = prompt("Please, enter your name");

document.write("Length of character include space: ", a.length);


document.write("<br>");
document.write("5 first character :" , a.substring(0,5));
document.write("<br>");
document.write("Get 3 character start from second character : ", a.substring(1,4));
</script>

Length of character include space: 9


5 first character :spide
Get 3 character start from second character : pid

Javascript, I want to become an expert 4


Function with parameter

<script>
Function name : dividedByTree
var dividedByTree = function(number)
{ Parameter : number
var myNumber=number/3;
document.write(myNumber);
};
dividedByTree(6);
</script> Call function with new parameter : 6

Function with parameter return a value (number)

<script>
var dividedByTree = function(number)
{ Function name : dividedByTree
return number/3; Parameter : number
};

var myNumber = dividedByTree(6); Call function with new parameter : 6


document.write(myNumber); Include function in variable myNumber
</script> Then print variable myNumber

Function with parameter return a value (string)

<script>
var yourName = function(name)
{ Function name : yourName
return "Your name is " +" "+ name; Parameter : name
};

var printMyName = yourName("Wokki"); Call function with new parameter : Wokki


document.write(printMyName); Include function in variable printMyName
</script> Then print variable printMyName

Javascript, I want to become an expert 5


Function with parameter return a value (using DOM)

Number : <input type = "text" id = "a"> / <input type = "text" id = "b"><br/>


<button type="button" onclick = "processDivide()">Process</button> DOM
<p id = "result"></p>

<script>
var process = function(numberA, numberB)
{ Function process
return numberA / numberB; parameter numberA, numberB
};

var processDivide = function() Function processDivide


{ With no parameter
var A = document.getElementById("a").value;
var B = document.getElementById("b").value;
Call function : process
var resultDivide = process(A,B); New parameter A,B
document.getElementById("result").innerHTML = resultDivide;
}
</script>

DOM (Document Object Model)

Javascript, I want to become an expert 6


Function return value with condition if outside function

<script>
Function : div3
var div3 = function(number)
Parameter : number
{
return number/3;
};

var yourNumber = prompt("Your number ?");

if (div3(yourNumber) % 3 === 0)
{
document.write("result 0"); If number/3 then
} result divide(%) 3 again
else result === 0
Print result 0 Result 0
{
document.write(div3(yourNumber)); Else
} Print number/3
</script>

Function return value with condition if inside function

<script> Function : div3


var div3 = function(number) Parameter : number
{
var myNumber = number/3;
If number/3 then
if (myNumber % 3 === 0)
result divide(%) 3 again
{
result === 0
return "result 0";
Return result 0
}
Else
else
Return number/3
{
return myNumber;
}
};
DOM
var yourNumber = prompt("Your number ?");
var printDiv3 = div3(yourNumber);
document.write(printDiv3); Call function : div3
</script> New parameter : yourNumber
(connect with parameter : number)

Javascript, I want to become an expert 7


Count buy, pay, refund using function with DOM event onkeyup (technique 1)

<pre>
Total Buy : <input type="text" id="buy">
Pay : <input type="text" id="pay" onkeyup="count()">
Refund : <input type="text" id="refund" readonly>
</pre>
<script>
var count = function()
{
var youBuy = document.getElementById("buy").value;
var youPay = document.getElementById("pay").value;
var youRefund = youPay - youBuy;
document.getElementById("refund").value = youRefund;
};
</script>

Count buy, pay, refund using function with DOM event onkeyup (technique 2)

<pre>
Total Buy : <input type="text" id="buy">
Pay : <input type="text" id="pay" onkeyup="count()">
Refund : <input type="text" id="refund" readonly>
</pre>
<script>
var counting = function(youBuy, youPay)
{
var youRefund = youPay - youBuy;
return youRefund;
};
var count = function()
{
var youBuy = document.getElementById("buy").value;
var youPay = document.getElementById("pay").value;
var weCounting = counting(youBuy, youPay);
document.getElementById("refund").value = weCounting;
};
</script>

Javascript, I want to become an expert 8


Count buy, pay, refund using function with DOM event onkeyup (technique 3)

<pre>
Total Buy : <input type="text" id="buy">
Pay : <input type="text" id="pay" onkeyup="count()">
Refund : <input type="text" id="refund" readonly>
</pre>
<script>
var counting = function(youBuy, youPay)
{
var youRefund = youPay - youBuy;
document.getElementById("refund").value = youRefund;
};
var count = function()
{
var youBuy = document.getElementById("buy").value;
var youPay = document.getElementById("pay").value;
counting(youBuy, youPay);
};
</script>

for, if .. else, with operator &&, !=, ===

Continued ….....

Javascript, I want to become an expert 9

You might also like