JS_01_入門する
21594 ワード
01:jsファイルを作成する:JavaScript_01.js
02:htmlコードを作成する:
// JavaScript Document
//1、 JavaScript
<script type="text/javascript">
<!--
document.write("02:External text output text!");
//-->
</script>02:htmlコードを作成する:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tentative JavaScript</title>
</head>
<body>
1、Use JavaScript to output text !
<script type="text/javascript">
<!--
document.write("out put text");
//-->
</script>
<br />
2、Import external js to use !
<script src="JavaScript_01.js"></script>
<br />
3‘if / else / alert
<script type="text/javascript">
var hob="football";
var hob02="js";
if(hob02=="js"){
alert("Good for you !");
}else if(hob=="football"){
alert("Bad for you !");
}
</script>
<br />
4、Use js in form !
<script type="text/javascript">
</script>
<form>
<p><input type="radio" name="input" onclick="hobs(this.value)" value="js" id="js"/><label for="js">JavaScript</label></p>
<p><input type="radio" nam="input" onclick="hobs(this.value)" value="football" id="js"/><label>Football</label></p>
</form>
5、Use js switcth() method in html ! Use parseInt transform other to int !
<script type="text/javascript">
var score=65;
switch(parseInt(score/10)){
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
alert("bad digree");
break;
case 6:
case 7:
alert("just so so !");
break;
case 8:
case 9:
alert("good for you");
break;
}
</script>
<br />
6、Get value by id
<script type="test/javascript">
function judge(){
var score_01;
var degree_01;
score_01=document.getElementsById("score_01").value;
if(score_01>100){
degree_01="do not need me !";
}else{
degree_01="good for you";
}
}
document.write(degree_01);
</script>
<form action="#" method="post">
<label for="score_01">
Degree[0-100]
</label>
<input name="score_01" id="score_01" type="text"/>
<button onclick="judge()">ClickToSubmit</button>
</form>
<br />
7、Prompt
<script type="text/javascript">
var score_07;
var degree_07;
score_07=prompt("Input your degree !");
if(score_07>100){
degree_07="Are you kiding";
}else{
switch(parseInt(score_07/10)){
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
case 6:
degree_07="bad degree";
judge_07();
break;
case 7:
degree_07="7 degree";
judge_07();
case 8:
case 9:
degree_07="8-9 degree";
judge_07();
}
}
function judge_07(){
document.write("<br/>"+degree_07);
alert(degree_07);
}
</script>
<br />
8、confirm
<script type="text/javascript">
function isCainiao(){
var isC=confirm("are you cainiao?");
if(isC==true){
alert("CaiNiao");
}else{
alert("DaShen");
}
}
isCainiao();
</script>
<form action="#" method="post">
<button value="confirm" onclick="isCainiao()">Submit</button>
</form>
9、for in loop / Array
<br />
<script type="text/javascript">
var x;
var hobbies_09=new Array();
hobbies_09[0]="java";
hobbies_09[1]="script";
hobbies_09[2]="javascript";
for(x in hobbies_09){
document.write(hobbies_09[x]+"<br/>");
}
</script>
10、incident
<br />
<script type="text/javascript">
function incident_09(){
document.write("mouseOn");
}
</script>
<button onmouseout="incident_09()">incidentOn</button>
<br />
11、try catch finally
<script type="text/javascript">
var i_11=0;
var j_11=0;
try{
i/i;
}catch(e){
alert("error");
}finally{
alert("finally");
}
</script>
<br />
</body>
</html>