<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!");
<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)
</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();
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;
}
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>
Copyright: Tài liệu đại học ©