JS学习笔记1
今日学习成果：
学习了JS的简介、实现、输出、语句、注释、变量、基本数据类型、对象、函数和运算符，了解了css和html的基本语法，在学习的过程中也发现了一些问题。
学习网址：http://www.w3school.com.cn/js/
1、"=="与"==="
"=="等同，比较运算符，只要两个参数的值相等即为true。
"==="恒等，严格比较运算符，只有两个参数的类型和值都相等时才为true。
如果两个参数至少有一个是NaN，结果为false
125==“125”//true 125===“125”//false NaN===NaN//flase
2、用于数字和字符串的 + 运算符
两个数字使用"+"会进行简单的加运算。
两个字符串则会进行拼接。
数字和字符串使用"+"，数字会先被转化为字符串，然后进行拼接
x=5+5; document.write(x); //x=10 x="Hello "+"World"; document.write(x); //x="Hello World" x=5+" dollars"; document.write(x); //x="5 dollars"
3、页面绘制先后顺序
<script> document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph</p>"); </script>
如果写文本的语句像上面一样写在<head>或者<body>里面，会在已有页面的基础上继续绘制页面，不过如果像下面这种，点击按钮后再执行写文本的语句，会先清除所有内容再写文本。
<button type="button" onclick="isNumber()"> 点我提交框框内容 </button>
以下是今天的练习成果：
//test.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script src="test.js"></script> <link rel="stylesheet" href="test.css" /> <title>我的第一个网页</title> </head> <body> <!----> <h1>请输入数字，不听话我可要骂你了</h1> <input type="text" id="demo"> <button type="button" onclick="isNumber()"> 点我提交框框内容 </button> <br/> <h3>测试数组初始化与操作</h3> <table id="carName" width="120px" border="100px"> <tr> <td>No</td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>CarName</td> <td id="first">4</td> <td id="second">5</td> <td id="third">6</td> </tr> </table> <h3>测试对象初始化与操作</h3> <table id="personDe" width="00px" border="100px"> <tr> <td>Name</td> <td id="nameOne">2</td> <td id="nameTwo">3</td> <td id="nameThree">4</td> </tr> <tr> <td>Age</td> <td id="ageOne">5</td> <td id="ageTwo">6</td> <td id="ageThree">7</td> </table> <h1 id="head1">This is a head1.</h1> <h2 id="head2">This is a head2</h2> <button type="button" onclick="changeInner()"> Click me to change the head1's inner. </button> <button type="button" onclick="chagngeColor()"> Click me to change the head2's color plz. </button> <button type="button" onclick="alert('I\'m a alert')"> Cilick me to see alert. </button> <p id="para_head" align="center">This is a paragraph head. </p> <p class="pp1">This is the first paragraph.</p> <p>This is the second paragraph.</p> <h2>This is the br+b</h2> <b>This is a blod.</b> <br/> <h2>This is the br+i</h2> <i>This is a </i> <h2>THis is the nobr</h2> <nobr>Yet today I consider myself the luckiest man on the face of the earth. I have been in ballparks for seventeen years and have never received anything but kindness and encouragement from you fans.</nobr> <h2>This is the div+br/</h2> <div>today I consider myself the luckiest man on the face of the earth. <br/> </div> <div>I have been in ballparks for seventeen years and have never received anything <br/> but kindness and encouragement from you fans. <br/> </div> <h2>This is the pre</h2> <pre>Yet today I consider myself the luckiest man on the face of the earth. I have been in ballparks for seventeen years and have never received anything but kindness and encouragement from you fans.</pre> <h2>This is the font</h2> <font size="4" color="red" face="">Yet today I consider myself the luckiest man on the face of the earth. I have been in ballparks for seventeen years and have never received anything but kindness and encouragement from you fans.</font> <p style="font-size: 23px;color:limegreen;"> Yet today I consider myself the luckiest man on the face of the earth. I have been in ballparks for seventeen years and have never received anything but kindness and encouragement from you fans. </p> <h4 class="one"> Yet today I consider myself the luckiest man on the face of the earth. I have been in ballparks for seventeen years and have never received anything but kindness and encouragement from you fans. </h4> <img id="img1" src="1.jpg"> <script> //熟悉数组操作 var cars = new Array() cars[0] = "Aodi" cars[1] = "Benchi" cars[2] = "BYD" cars=new Array("Aodi","Benchi","BYD") cars=["Aodi","Benchi","BYD"] document.getElementById("first").innerHTML = cars[0] document.getElementById("second").innerHTML = cars[1] document.getElementById("third").innerHTML = cars[2] //熟悉对象操作 var person_1={ name:"胡文轩", age:20 } var person_2={ name:"刘博谦", age:21 } var person_3={ name:"江雁开", age:21 } document.getElementById("nameOne").innerHTML=person_1.name; document.getElementById("nameTwo").innerHTML=person_2.name; document.getElementById("nameThree").innerHTML=person_3.name; document.getElementById("ageOne").innerHTML=person_1.age; document.getElementById("ageTwo").innerHTML=person_2.age; document.getElementById("ageThree").innerHTML=person_3.age; </script> </body> </html>
//test.css td { font-size: 23px; color: linen; background-color: mediumvioletred; } p { font-size: 30px; color: blue; } .one{ font-size: 20px; color: blue; background-color: blanchedalmond; } #pp1{ font-size: 30px; color: red; background-color: peru; } *{ border: 2px chocolate solid; margin: 4px red solid; padding: 9px blue solid; }
//test.js function isNumber() { var x = document.getElementById("demo").value if (x == "" || isNaN(x)) { alert("你个小猪，请输入数字好吗？") //字符串拼接测试 var x = "Hello,", y = "World!", z = x + y; //alert(z); } else { alert("这才对嘛，要做个听话的小猪") } //document.getElementById("head1").innerHTML = "This is a new head1." //document.getElementById("head2").style.color = "#ff0000" } //通过id修改标签内容 function changeInner() { x = document.getElementById("head1") var string = "This is a new head1." x.innerHTML = string } //通过id修改标签颜色 function chagngeColor() { y = document.getElementById("head2") var string_1 = "#ff0000" y.style.color = string_1 } function setTable() { var cars = new Array() cars[0] = "Aodi" cars[1] = "Benchi" cars[2] = "BYD" document.getElementById("first").innerHTML = cars[0]; document.getElementById("second").innerHTML = cars[1]; document.getElementById("third").innerHTML = cars[2]; }
