今日学习成果：
学习了JS的简介、实现、输出、语句、注释、变量、基本数据类型、对象、函数和运算符，了解了css和html的基本语法，在学习的过程中也发现了一些问题。
学习网址：http://www.w3school.com.cn/js/
1、"=="与"==="
"=="等同，比较运算符，只要两个参数的值相等即为true。
"==="恒等，严格比较运算符，只有两个参数的类型和值都相等时才为true。
如果两个参数至少有一个是NaN，结果为false
125==“125”//true
125===“125”//false
NaN===NaN//flase2、用于数字和字符串的 + 运算符
两个数字使用"+"会进行简单的加运算。
两个字符串则会进行拼接。
数字和字符串使用"+"，数字会先被转化为字符串，然后进行拼接
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];
}
13万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
