JamesPCSchool: JavaScript 1

1. JavaScript -Basic

a. Hello World

The basic method is to put the JavaScript code in an HTML file. It makes the file is too long and hard to read. Here is an example to show you how to separate them. The advantage is the code is much clear when you read HTML or JavaScript and easily maintain the code because front end code and back end code are saved at 2 different files.

Example:

Open the application "notepad" (you can right click on the windows icon --> run --> type "notepad" --> enter). Type the code below then save as "001.html" (select save as type to "all files", and select Encoding as UTF-8)
If you create an HTML file by using Dreamweaver, then skip the process above.

CODE:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>

Insert the code below between <head> and </head> tag. The attribute "src" is to tell HTML that the JavaScript source code is located at another file called "hello.js". The file "hello.js" must be at the same directory as 001.html is.

CODE:

Then write the code below in the "hello.js" file, and save it.

CODE:

document.write("Hello World");

Now you can read "Hello World" when you open 001.html.

b. Basic structure: Object-Oriented - Basic

Nowadays, nobody uses " document.myform.mytext " any more. We use document.getElementById('mytext').value

Example:

Type any text you want in the textbox, then click the button. What you input will be displayed on the pop up alert.

CODE:

<head>
<script>
functionpop-up()
{
alert(document.getElementById('mytext').value);
}
</script>
</head>

<body>
<form id="myform" name="myform" method="post" action="">
<label>
<input type="text" name="mytext" id="mytext" />
</label>
<input type="button" name="button" id="button" value="button" onclick="show()"/>
</form>
</body>

Result:

Bonus:
If add one line in the previous code, then we can change change the background colour to yellow once you click the button. (use "Attribute" of JavaScript)

CODE:

e. Object:check "Required Field"

Using JavaScript to check required field in this example is not the best way to do security check, just for practice.

CODE:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.star {
font-weight: bolder;
color: #F00;
}
</style>

<script>
function chk()
{
if (document.getElementById('username').value == '')
{
alert('please enter your account');
// alert('請輸入帳號');
return false;
}
else
return true;
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<p>User Account

<label>
<input type="text" name="username" id="username" />
</label>
<span class="star">
*</span></p>
<p>
<input type="submit" name="button" id="button" value="Submit" onclick="return chk()"/>
</p>
</form>
</body>

Result：if enter nothing on the textbox, it will pop up a notification window.

d. Variable: Array

CODE:

Result:

e. One function can be used by multiple buttons

Example 1：click on button will add one

CODE:

<head>
<script>
function add(s)
{
document.getElementById('button' +s).value = eval(document.getElementById('button' +s).value) + 1;
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<input type="button" name="button1" id="button1" value="0" onclick="add(1)"/>
<br/>
<input type="button" name="button2" id="button2" value="0" onclick="add(2)"/>
<br/>
<input type="button" name="button3" id="button3" value="0" onclick="add(3)"/>
<br/>
</form>
</body>

Result:

Example 2：change the example 1 by using "this"

The letter "s" in the function is to represent "this" object (the button). Thus s.value is to take the value from the button object, the value is 0 at the beginning.

CODE:

PS：Add one line in the code, the s.id represents the id of the button.

CODE:

Result:

JamesPCSchool

JavaScript 1

Previous

Next

No comments: