Javascript:ベース(コンテンツの出力/編集、プロパティの編集、イベント応答、入力検証)
3352 ワード
Javascriptは現在最も流行しているサーバスクリプト言語であり、Javascriptを使用すると、Webページに豊富な論理とより複雑なダイナミック効果を追加することができます.
コード整理はw 3 schoolから:http://www.w3school.com.cn
効果図:
サンプルコード:
コード整理はw 3 schoolから:http://www.w3school.com.cn
効果図:
サンプルコード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>Javascript </title>
<head type="text/css">
<style>
body {background-color:#e0e0e0}
p.nowrap {display:inline;padding-left:10px}
</style>
</head>
<body>
<h3>（ ） HTML </h3>
<script>
document.write("<h2>This is a h2-line.</h2>");
document.write("<p>This is a paragraph.</p>");
</script>
<h3>（ ） </h3>
<p>JavaScript 。 ：</p>
<button type="button" onclick="alert('Welcome!')"> </button>
<h3>（ ） HTML </h3>
<p id="test_content"> </p>
<script>
function changeHtmlContent(){
x = document.getElementById("test_content");
x.innerHTML = "Hello Javascript!";
}
</script>
<button type="button" onclick="changeHtmlContent()"> ， </button>
<h3>（ ） HTML </h3>
<p> ， ：</p>
<img id="light" src="images/eg_bulboff.gif" width="80px" height="120px" onclick="changeImage()">
<script>
function changeImage(){
element = document.getElementById("light");
if (element.src.match("bulbon")){
element.src="images/eg_bulboff.gif";
}else{
element.src="images/eg_bulbon.gif"
}
}
</script>
<p id="text_to_changeColor"> ， <p>
<button type="button" onclick="changeColor()"> </button>
<script>
function changeColor(){
element = document.getElementById("text_to_changeColor");
element.style.color="#FF0000"
}
</script>
<h3>（ ） </h3>
<input id="numberText" type="text"/>
<input type="submit" value=" " onclick="testInput()"/><p class="nowrap" id="isOK"></p>
<script>
function testInput(){
var x = document.getElementById("numberText").value;
if (x==""){
alert(" ")
}else if(isNaN(x)){
alert(" ！")
}else{
document.getElementById("isOK").innerHTML=" ";
}
}
</script>
</body>
</html>