<!-- // 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>