JavaScript 的学习程序整理(…

<!-- // JavaScript Document -->

<!DOCUMENT html>

<html>


<head>

javascript可以写在这里 (头部 )。

</head>


<!-- οnlοad="" -->


<body  οnlοad="CheckCookies()">

<h1 οnclick="this.innerHTML='Come On !'"> Javascript Note :</h1>

<p>

脚本可位于 HTML 的  body  或  head  部分中,或者同时存在于两个部分中;<br>


"script" 和  "/script" 会告诉 JavaScript 在何处开始和结束!<br>


在 JavaScript 中,用分号来结束语句是可选的。<br>


JavaScript 语句通过代码块的形式进行组合。块由左花括号开始,由右花括号结束。块可使语句序列一起执行。<br>


JavaScript 对大小写是敏感的 ; 忽略多余的空格 <br>


Undefined 这个值表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。<br>


对象是数据(变量),拥有属性和方法。<br>


JavaScript 能够直接写入 HTML 输出流中,并且可以修改其内容和格式 ;<br>


能够对事件做出反应(比如对按钮的 click: );<br>


可以验证用户输入;<br>


onload 和 onunload 事件会在用户进入或离开页面时被触发。<br>


onchange 事件常结合对输入字段的验证来使用。<br>


onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。<br>


onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。<br>


onfocus当输入字段获得焦点时,改变其背景色。<br>


.length()可计算字符串的长度<br>?

.big .blink .bold  and so on 可以改变字符串的样式<br>

.indexof()可以定位字符串中某一个字符首次出现的位置<br>

.match()查找特定字符<br>




注://  的注释方法在Javascript Editor 中不起作用 "<!--  -->"

<em><br></em>是换行符 

</p>


<div οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" 

style="background-color:pink;

width:220px;

height:5px;

padding:40px;

color:#ffffff;">把鼠标移到上面</div><br>



<div οnmοuseοver="style.color='red'" οnmοuseοut="style.color='blue'">please put the mouse on it!</div><br>


<div id="txt"></div>


<div οnmοusedοwn="mDown(this)" οnmοuseup="mUp(this)" 

style="background-color:blue;

color:#ffffff;

width:180px;

height:20px;

padding:40px;

font-size:20px;">请点击这里 </div>



<p id="demo0">

JavaScript can change the content of HTML!

</p>



<p id="demo">

JavaScript can change the content of HTML!

</p>




<!-- Javascript 的开始标记 -->

<script> 

document.write("<h1>Title No 1</h1>");   //写入HTML元素

document.write("<h2>Title No 2</h2>");    //不同的head 字体大小不同

document.write("<h3>Title No 3</h3>");

document.write("<p>This is a paragraph.</p>");


document.write(Date()+"<br>");  //返回当前时间


var d=new Date();

document.write("从 1970/01/01 至今已过去 " + d.getTime() + " 毫秒"+"<br>");   //计算时间差


d.setFullYear(1992,10,3)      //设置具体时间

document.write(d+"<br>");


var weekday=new Array(7)

weekday[0]="星期日"

weekday[1]="星期一"

weekday[2]="星期二"

weekday[3]="星期三"

weekday[4]="星期四"

weekday[5]="星期五"

weekday[6]="星期六"

document.write("今天是" + weekday[d.getDay()]+"<br>")



//document.write(startTime()+"<br>");




// 注意要把  <p  id = "demo">....</p>先定义

document.getElementByIdx_x("demo").style.color="#ff0000";  //字体变为红色

document.getElementByIdx_x("demo0").style.color="blue";

document.getElementByIdx_x("demo0").style.frontSize="larger";

document.getElementByIdx_x("demo0").style.frontFamily="Arial";



var txt="Hello World!";


document.write("<p>Big: " + txt+ "</p>");

document.write("<p>Big: " + txt.big() + "</p>")

document.write("<p>Small: " + txt.small() + "</p>")


document.write("<p>Bold: " + txt.bold() + "</p>")

document.write("<p>Italic: " + txt.italics() + "</p>")


document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>")

document.write("<p>Fixed: " + txt.fixed() + "</p>")

document.write("<p>Strike: " + txt.strike() + "</p>")


document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>")

document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>")


document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>")

document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>")


document.write("<p>Subscript: " + txt.sub() + "</p>")

document.write("<p>Superscript: " + txt.sup() + "</p>")


document.write("<p>Link: " + txt.link("http://www.w3school.com.cn") + "</p>")


document.write("<p>tex字符串的长度是:"+txt.length+"</p>");


document.write("<p>查找串 World的首次出现位置:"+ txt.indexOf("World")+"</p>");

document.write("<p>查找串 world的首次出现位置:"+ txt.indexOf("world")+"</p>");//对大小写敏感


document.write("<p>匹配字符串 llo:"+ txt.match('llo')+"</p>");

document.write("<p>匹配字符串 world:"+ txt.match('world')+"</p>");


document.write("<p>用zhaodeng替换字符串 World:"+txt.replace(/World/, "zhaodeng")+"</p>");





<!-- 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。 -->

var para=document_createElement_x("p");

var node=document_createTextNode("这是新段落。");

para.a(node);

var element = document.getElementByIdx_x("demo0");

element.a(para);



<!-- 如需删除 HTML 元素,您必须首先获得该元素的父元素: -->

var parent=document.getElementByIdx_x("demo0");

var child=document.getElementByIdx_x("p");

parent.removeChild(child);







<!-- Javascript的变量、数组 -->

var i;

var x=      new Number;  <!--可用new 来声明变量的类型 变量的类型有 String\Number\Boolean\Array\Object (pay attention to the case(大小写) )-->

document.write(i + "<br>");

var i= null;

document.write(i + "<br>");

var person = new Array();

person[0]="Ruiping Zhang";

person[1]="Deng Zhao ";

for(i=0; i<person.length; i++)

{

document.write( person[i]+"<br>");

}




<!-- Javascript的对象 ,有点类似C++中的类(结构体 ) -->

{

var student={

StudentId : "1004101206",

studentName  : "赵登",

Major        :" Computer Science and technology",

scord        :3.46

};

<!-- 调用小写到大写的转换函数 toUpperCase() -->

document.write(student.StudentId + "<br />");

document.write(student["studentName"] + "的学号是" +student.StudentId +",专业是"+ student.Major.toUpperCase()+", 成绩是  "+student.scord+"<br />"); 

}






function changeHTML()

{

x=document.getElementByIdx_x("demo");

x.innerHTML="changed: Hello Javascript !";

}

<!-- 下行代码等价于changeHTMl()函数  -->

document.getElementByIdx_x("demo").innerHTML= "HTML 元素可以改变 !";



function IfNaN()

{

var x= document.getElementByIdx_x("id2").value;

if(  isNaN(x))  alert("Not Numeric !!!");

else if (x== "" ) alert ("please input the number !");

else   alert("  Correct Input!");

}




<!-- 带参函数 -->

function Welcome(hellowords , name)

{

alert(hellowords +  name );

}



<!-- 带有返回参数的函数 -->

function countAge(a)

{

 return a+1;

}




function CheckCookies()

{

 if (navigator.cookieEnabled==true) alert("已启用cookie!");

 else alert ("未启用 cookies!");

}




function OnChange()

{

  

  var z= document.getElementByIdx_x("id3")

  z.value= z.value.toUpperCase();

}



function OnFocus(x)

{

 x.style.background="yellow";

}



function mOver(obj)

{

obj.style.backgroundColor="orange";

obj.style.color="black";

obj.innerHTML="谢谢"

}



function mOut(obj)

{

obj.style.color="white";

obj.innerHTML="把鼠标移到上面"

}




function mDown(obj)

{

obj.style.backgroundColor="yellow";

obj.style.color="black";

obj.innerHTML="请释放鼠标按钮"

}



function mUp(obj)

{

obj.style.backgroundColor="green";

obj.innerHTML="请按下鼠标按钮"

}



function startTime()

{

var today=new Date()

var h=today.getHours()

var m=today.getMinutes()

var s=today.getSeconds()

// add a zero in front of numbers<10

m=checkTime(m)

s=checkTime(s)

document.getElementByIdx_x('txt').innerHTML=h+":"+m+":"+s

t=setTimeout('startTime()',500)

}


function checkTime(i)

{

if (i<10) 

  {i="0" + i}

  return i

}



function DOCUMENT()

{

 document.write("fuck , the  document disappeared!!");

}


</script>

<!-- Javascript 的结束 -->




<button type="button"  οnclick="alert('Welcome!')" >点击这里</button><br>  <!-- ( 弹窗 ) -->



<button type="button"  οnclick="changeHTML()" >点击改变HTML元素</button><br>  <!--  按钮点击调用函数 -->



<p>please input a number ,if the input is not a number ,there will be an alert !</p>

<input id = "id2" type="text">

<button type="button" onclick ="IfNaN()">点击验证是否是数字</button><br>




<button type = "button" οnclick="Welcome('How are you? ', '赵登')">点击问候 </button>


<button type = "button" οnclick="Welcome('What is the matter? ', '瓶子')">点击问候 </button><br>




<button type="button" οnclick="alert('I will be '+countAge(22)+' years old in the next year! ')">点击查看变化</button><br>



please input a English String :<input type ="text" id = "id3" onchange ="OnChange()" οnfοcus="OnFocus(this)"/>

<p>当您离开输入字段时,会触发将输入文本转换为大写的函数。</p>



<p id="id5">点击可隐藏的文本  </p>

<input type="button" value="点击可隐藏文本" οnclick="document.getElementByIdx_x('id5').style.visibility='hidden'" />

<input type="button" value="点击显示文本" οnclick="document.getElementByIdx_x('id5').style.visibility='visible'" /><br>



<!--  <button type="button" οnclick="startTime()">点击显示钟表时间</button>-->


<!-- 如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖: -->

<button  type = "button "  οnclick="DOCUMENT()"> DOCUMENT.WRITE TO THE WHOLE HTML page</button>



</body>



</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章