Objektif
¡ Scripting Variable
¡ Scripting Arithmetic
¡ Scripting Comparison
¡ Scripting Branching
¡ Scripting PopUp
¡ Scripting Function
¡ Scripting Loops
¡ Scripting Event
¡ Scripting Error Handling
¡ Scripting Special Characters
What is Javascript
JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari.
• JavaScript was designed to add interactivity to HTML pages
• JavaScript is a scripting language
• A scripting language is a lightweight programming language
• JavaScript is usually embedded directly into HTML pages
• JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
• Everyone can use JavaScript without purchasing a license
Scripting Variable
Rules for JavaScript variable names:
• Variable names are case sensitive (y and Y are two different variables)
• Variable names must begin with a letter or the underscore character
Note: Because JavaScript is case-sensitive, variable names are case-sensitive.
Examples declaring variable in Javascript :
<html>
<body>
<script type="text/javascript">
<!--
var a = "Kelas Desain dan Pemrograman Web";
//-->
</script>
</body>
</html>
Beberapa variable in javascipt;
Var a = “teguh”; ->(string)
Var b = 123; ->(numerik)
Var c = 123.321; ->(float)
Convert nilai:
Var d = parseInt(123.321);
Var e = parseFloat(123.01);
Scritping Arithmetic
Arithmetic operators are used to perform arithmetic between variables and/or values.
Given that y=5, the table below explains the arithmetic operators:
| Operator | Decription | Examples | Result |
| + | Addition | x=y+2 | X=7 |
| - | Subtraction | x=y-2 | X=3 |
| * | Multiplication | x=y*2 | X=10 |
| / | Division | x=y/2 | X=2.5 |
| % | Modulus (division remainder) | x=y%2 | X=1 |
| ++ | Increment | x=++y | X=6 |
| -- | Decrement | x=--y | X=4 |
Scripting Comparison
Comparison operators are used in logical statements to determine equality or difference between variables or values.
Given that x=5, the table below explains the comparison operators:
| Operator | Description | Example |
| == | Is equal to | x==8 is false |
| === | is exactly equal to (value and type) | x===5 is true x==="5" is false |
| != | is not equal | x!=8 is true |
| > | is greater than | x>8 is false |
| < | is less than | x<8 is true |
| >= | is greater than or equal to | x>=8 is false |
| <= | is less than or equal to | x<=8 is true |
Logical Operator :
Logical operators are used to determine the logic between variables or values.
Given that x=6 and y=3, the table below explains the logical operators:
| Operator | Description | Example |
| && | and | (x < 10 && y > 1) is true |
| || | or | (x==5 || y==5) is false |
| ! | not | !(x==y) is true |
Scripting Branching
Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
if statement - use this statement to execute some code only if a specified condition is true
if...else statement - use this statement to execute some code if the condition is true and another code if the condition is false
if...else if....else statement - use this statement to select one of many blocks of code to be executed
switch statement - use this statement to select one of many blocks of code to be executed
Scripting PopUp
JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box.
Alert Box
An alert box is often used if you want to make sure information comes through to the user.
When an alert box pops up, the user will have to click "OK" to proceed.
Confirm Box
A confirm box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.
Prompt Box
A prompt box is often used if you want the user to input a value before entering a page.
When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.
If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.
Scripting Function
The return statement is used to specify the value that is returned from the function.
So, functions that are going to return a value must use the return statement.
<html>
<head>
<script type="text/javascript">
function product(a,b){
return a*b;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(4,3));
</script>
</body>
</html>
Scripting Loops
In JavaScript, there are two different kind of loops:
for - loops through a block of code a specified number of times
while - loops through a block of code while a specified condition is true
Sintax For
<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=5;i++){
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>
Sintax While
<html>
<body>
<script type="text/javascript">
var i=0;
while (i<=10){
document.write("The number is " + i);
document.write("<br />");
i++;
}
</script>
</body>
</html>
Scripting Event
Events
By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be detected by JavaScript.
Every element on a web page has certain events which can trigger a JavaScript. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags.
| Event | Fungsi |
| onLoad | Pertama kali di tampilkan |
| onClick | Button di Click |
| onMouseOver | Event pointer masuk ke daerah yang diblok |
| Dan lain-lain | |
Scripting Error Handling
When browsing Web pages on the internet, we all have seen a JavaScript alert box telling us there is a runtime error and asking "Do you wish to debug?". Error message like this may be useful for developers but not for users. When users see errors, they often leave the Web page.
The try...catch Statement
The try...catch statement allows you to test a block of code for errors. The try block contains the code to be run, and the catch block contains the code to be executed if an error occurs.
Scripting Special Character
In JavaScript you can add special characters to a text string by using the backslash sign.
| Code | Output |
| \’ | single quote |
| \” | double quote |
| \& | ampersand |
| \\ | backslash |
| \n | new line |
| \r | carriage return |
| \t | tab |
| \b | backspace |
| \f | form feed |
