Thực hành Java Script
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (260.74 KB, 20 trang )
<html>
<body>
<script type="text/javascript">
{
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
}
</script>
</body>
</html>
JavaScript Popup Boxes
<html>
<head>
<script type="text/javascript">
function show_alert()
{
alert("I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="show_alert()" value="Show alert box" />
</body>
</html>
<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("Hello again! This is how we" + '\n' + "add line breaks to an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="disp_alert()" value="Display alert box" />
</body>
</html>
1
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button");
if (r==true)
{
document.write("You pressed OK!");
}
else
{
document.write("You pressed Cancel!");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show a confirm box" />
</body>
</html>
Function
<html>
<head>
<script type="text/javascript">
function myfunction(txt)
{
alert(txt);
}
</script>
</head>
<body>
<form action= “dia chi trang web”method= “GET”>
<input type="button"
onclick="myfunction('Good Morning!')"
value="In the Morning">
<input type="button"
onclick="myfunction('Good Evening!')"
value="In the Evening">
</form>
<p>
When you click on one of the buttons, a function will be called. The function will alert
the argument that is passed to it.
</p>
</body>
</html>
2
Event Object
Which mouse button was clicked?
<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
if (event.button==2)
{
alert("You clicked the right mouse button!");
}
else
{
alert("You clicked the left mouse button!");
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>Click in the document. An alert box will alert which mouse button you clicked.</p>
</body>
</html>
What is the keycode of the key pressed?
<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
alert(event.keyCode);
}
</script>
</head>
<body onkeyup="whichButton(event)">
<p><b>Note:</b> Make sure the right frame has focus when trying this example!</p>
<p>Press a key on your keyboard. An alert box will alert the keycode of the key.</p>
</body>
</html>
What are the coordinates of the cursor?
<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX;
y=event.clientY;
3
alert("X coords: " + x + ", Y coords: " + y);
}
</script>
</head>
<body onmousedown="show_coords(event)">
<p>Click in the document. An alert box will alert the x and y coordinates of the mouse
pointer.</p>
</body>
</html>
View and change the action URL of a form
<html>
<head>
<script type="text/javascript">
function changeAction()
{
var x=document.getElementById("myForm");
alert("Original action: " + x.action);
x.action="default.asp";
alert("New action: " + x.action);
x.submit();
}
</script>
</head>
<body>
<form id="myForm" action="js_examples.asp">
Name: <input type="text" name=”t1” value="Mickey Mouse" />
<input type="button" onclick="changeAction()"
value="Change action attribute and submit form" />
</form>
</body>
</html>
View the method that is to be used when sending form data
<html>
4
<head>
<script type="text/javascript">
function showMethod()
{
var x=document.getElementById("myForm");
alert(x.method);
}
</script>
</head>
<body>
<form id="myForm" method="post">
Name: <input type="text" size="20" value="Mickey Mouse" />
<input type="button" onclick="showMethod()" value="Show method" />
</form>
</body>
</html>
Alert id, type, and value of a Button object + disable button
<html>
<head>
<script type="text/javascript">
function alertId()
{
var txt="Id: " + document.getElementById("myButton").id;
txt=txt + ", type: " + document.getElementById("myButton").type;
txt=txt + ", value: " + document.getElementById("myButton").value;
alert(txt);
document.getElementById("myButton").disabled=true;
}
</script>
</head>
<body>
<form name=“f1”>
<input type="button" value="Click me!" id="myButton" onclick="alertId()" />
</form>
</body>
</html>
Check and uncheck a checkbox
<html>
<head>
5
<script type="text/javascript">
function check()
{
//document.getElementById("myCheck").checked=true;
document.f1.uncheck.checked=true;
}
function uncheck()
{
//document.getElementById("myCheck").checked=false;
document.f1.check.checked=false;
}
</script>
</head>
<body>
<form name= “f1”>
<input type="checkbox" id="myCheck" />
<input type="button" onclick="check()" value="Check Checkbox" name= “check”/>
<input type="button" onclick="uncheck()" value="Uncheck Checkbox" name= “uncheck”/>
</form>
</body>
</html>
Checkboxes in a form
<html>
<head>
<script type="text/javascript">
function createOrder()
{
coffee=document.forms[0].coffee;
txt="";
for (i=0;i<coffee.length;++ i)
{
if (coffee[i].checked!=0)
{
txt=txt + coffee[i].value + " ";
}
}
document.getElementById("order").value="You ordered a coffee with " + txt;
}
</script>
</head>
<body>
<p>How would you like your coffee?</p>
<form>
<input type="checkbox" name="coffee" value="cream">With cream<br />
<input type="checkbox" name="coffee" value="sugar">With sugar<br />
6
<br />
<input type="button" onclick="createOrder()" value="Send order">
<br /><br />
<input type="text" id="order" size="50">
</form>
</body>
</html>
Checkbox
<html>
<head>
<script type="text/javascript">
function convertToUcase()
{
document.getElementById("fname").value=document.getElementById("fname").value.toUpperC
ase();
document.getElementById("lname").value=document.getElementById("lname").value.toUpperC
ase();
}
</script>
</head>
<body>
<form name="form1">
First name: <input type="text" id="fname" size="20" />
<br /><br />
Last name: <input type="text" id="lname" size="20" />
<br /><br />
Convert to upper case
<input type="checkBox" onclick="if (this.checked) {convertToUcase()}">
</form>
</body>
</html>
Radio buttons
<html>
<head>
<script type="text/javascript">
function check(browser)
{
document.getElementById("answer").value=browser;
}
</script>
</head>
<body>
<p>What's your favorite browser?</p>
<form>
7
