JavaScript入门篇
请和我互动（常用互动方法）
JavaScript-输出内容（document.write）
document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。
第一种:输出内容用"“括起，直接输出”"号内的内容。
<script type="text/javascript">
document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。
</script>
第二种:通过变量，输出内容
<script type="text/javascript">
var mystr="hello world!";
document.write(mystr); //直接写变量名，输出变量存储的内容。
</script>
第三种:输出多项内容，内容之间用+号连接。
<script type="text/javascript">
var mystr="hello";
document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接
</script>
第四种:输出HTML标签，并起作用，标签使用""括起来。
<script type="text/javascript">
var mystr="hello";
document.write(mystr+"<br>");//输出hello后，输出一个换行符
document.write("JavaScript");
</script>
JavaScript-提问（prompt 消息对话框）
function rec(){
var score = prompt("你的姓名"); //score变量，用来存储用户输入的成绩值。
if(score == "张晨"){
alert("你好张晨")
}else{
alert("不认识")
}
}
JavaScript-打开新窗口（window.open）
open() 方法可以查找一个已经存在或者新建的浏览器窗口。
语法：
window.open([URL], [窗口名称], [参数字符串])
参数说明:
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_self"具有特殊意义的名称。
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
参数表:
例如:打开http://www.imooc.com网站，大小为300px * 200px，无菜单，无工具栏，无状态栏，有滚动条窗口：
<script type="text/javascript"> window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>
JavaScript-关闭窗口（window.close）
用法：
window.close(); //关闭本窗口
或
<窗口对象>.close(); //关闭指定的窗口
DOM操作
innerHTML 属性
innerHTML 属性用于获取或替换 HTML 元素的内容。
<p id="co">hello</p>
<script>
var v = document.getElementById("co");
document.write("原始内容:"+v.innerHTML+"<br>");
v.innerHTML = "你好";
document.write("修改后的:"+v.innerHTML)
</script>
改变 HTML 样式
注意:该表只是一小部分CSS样式属性，其它样式也可以通过该方法设置和修改。
看看下面的代码:
改变元素的样式，将颜色改为红色，字号改为20,背景颜色改为蓝：
<p id="pcon">Hello World!</p>
<script>
var mychar = document.getElementById("pcon");
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor ="blue";
</script>
显示和隐藏（display属性）
<script>
function show(){
document.getElementById("con").style.display = "none";
}
function ontShow(){
document.getElementById("con").style.display = "block"
}
</script>
<p id="con">hello</p>
<form>
<input type="button" value="不显示" onclick="show()"/>
<input type="button" value="显示" onclick="ontShow()" />
</form>
控制类名（className 属性）
className 属性设置或返回元素的class 属性。
语法：
object.className = classname
作用:
获取元素的class 属性
为网页内的某个元素指定一个css样式来更改该元素的外观
看看下面代码，获得 《p》 元素的 class 属性和改变className：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>prompt</title>
<style>
/* body{ font-size:16px;} */
.one{
border:1px solid #eee;
width:230px;
height:50px;
background:#ccc;
color:red;
}
.two{
border:1px solid #ccc;
width:230px;
height:50px;
background:#9CF;
color:blue;
}
</style>
</head>
<body>
<p id="p1" > JavaScript1</p>
<input type="button" value="添加样式" onclick="add()"/>
<p id="p2" class="one">JavaScript2</p>
<input type="button" value="更改外观" onclick="modify()"/>
<script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className = "one";
}
function modify(){
var p2 = document.getElementById("p2");
p2.className = "two";
}
</script>
</body>
</html>
结果：
你要懂的规则(JS基础语法）
给变量取个名字(变量命名)
我们为了区分盒子，可以用BOX1,BOX2等名称代表不同盒子，BOX1就是盒子的名字（也就是变量的名字）。
我们赶快给变量取个好名字吧!变量名字可以任意取，只不过取名字要遵循一些规则:
1.必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。如下:
正确:
mysum
_mychar
$numa1
错误:
6num //开头不能用数字
%sum //开头不能用除(_ $)外特殊符号,如(% + /等)
sum+num //开头中间不能使用除(_ $)外特殊符号，如(% + /等)
2.变量名区分大小写，如:A与a是两个不同变量。
3.不允许使用JavaScript关键字和保留字做变量名。
我与你同在(逻辑与操作符）
数学里面的“a>b”，在JavaScript中还表示为a>b；数学中的“b大于a，b小于c”是“a<b<c”，那么在JavaScript中可以用&&表示，如下：
b>a && b<c //“&&”是并且的意思, 读法"b大于a"并且" b小于c "
好比我们参加高考时,在进入考场前,必须出示准考证和身份证,两者缺一不可，否则不能参加考试，表示如下:
if(有准考证 &&有身份证)
{
进行考场考试
}
“&&”是逻辑与操作符，只有“&&”两边值同时满足(同时为真)，整个表达式值才为真。
逻辑与操作符值表:
// A code block
var foo = 'bar';
注意: 如果A为假，A && B为假，不会在执行B; 反之，如果A为真，要由 B 的值来决定 A && B 的值。
我或你都可以 (逻辑或操作符）
"||"逻辑或操作符，相当于生活中的“或者”，当两个条件中有任一个条件满足，“逻辑或”的运算结果就为“真”。
例如：本周我们计划出游,可是周一至周五工作,所以周六或者周日哪天去都可以。即两天中只要有一天有空，就可以出游了。
var a=3;
var b=5;
var c;
c=b>a ||a>b; //b>a是true，a>b是false，c是true
逻辑或操作符值表:
注意: 如果A为真，A || B为真，不会在执行B; 反之，如果A为假，要由 B 的值来决定 A || B 的值。
是非颠倒(逻辑非操作符）
"!"是逻辑非操作符，也就是"不是"的意思,非真即假，非假即真。好比小华今天买了一个杯子，小明说:“杯子是白色的”，小亮说:“杯子是红色的”，小华说：“小明说的不是真话，小亮说的不是假话”。猜猜小华买的什么颜色的杯子，答案：红色杯子。
逻辑非操作符值表:
看看下面代码，变量c的值是什么:
var a=3;
var b=5;
var c;
c=!(b>a); // b>a值是true,! (b>a）值是false
c=!(b<a); // b<a值是false, ! (b<a）值是true
保持先后顺序(操作符优先级）
我们都知道，除法、乘法等操作符的优先级比加法和减法高，例如：
var numa=3;
var numb=6
jq= numa + 30 / 2 - numb * 3; // 结果为0
如果我们要改变运算顺序，需添加括号的方法来改变优先级:
var numa=3;
var numb=6
jq= ((numa + 30) / (2 - numb)) * 3; //结果是-24.75
操作符之间的优先级（高到低）:
算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号
如果同级的运算是按从左到右次序进行,多层括号由里向外。
var numa=3;
var numb=6;
jq= numa + 30 >10 && numb * 3<2; //结果为false
一起组团（什么是数组）
我们知道变量用来存储数据，一个变量只能存储一个内容。假设你想存储10个人的姓名或者存储20个人的数学成绩，就需要10个或20个变量来存储，如果需要存储更多数据，那就会变的更麻烦。我们用数组解决问题，一个数组变量可以存放多个数据。好比一个团，团里有很多人，如下我们使用数组存储5个学生成绩。
数组是一个值的集合，每个值都有一个索引号，从0开始，每个索引都有一个相应的值，根据需要添加更多数值。
组团，并给团取个名（如何创建数组）
使用数组之前首先要创建，而且需要把数组本身赋至一个变量。好比我们出游，要组团，并给团定个名字“云南之旅”。
创建数组语法：
var myarray=new Array();
我们创建数组的同时，还可以为数组指定长度，长度可任意指定。
var myarray= new Array(8); //创建数组，存储8个数据。
注意：
1.创建的新数组是空数组，没有值，如输出，则显示undefined。
2.虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。
谁是团里成员（数组赋值）
数组创建好，接下来我们为数组赋值。我们把数组看似旅游团的大巴车，大巴车里有很多位置，每个位置都有一个号码，顾客要坐在哪个位置呢？
第一步：组个大巴车
第二步：按票对号入座
大巴车的1号座位是张三
大巴车的2号座位是李四
数组的表达方式：
第一步：创建数组var myarr=new Array();
第二步：给数组赋值
myarr[1]=" 张三";
myarr[2]=" 李四";
下面创建一个数组，用于存储5个人的数学成绩。
var myarray=new Array(); //创建一个新的空数组
myarray[0]=66; //存储第1个人的成绩
myarray[1]=80; //存储第2个人的成绩
myarray[2]=90; //存储第3个人的成绩
myarray[3]=77; //存储第4个人的成绩
myarray[4]=59; //存储第5个人的成绩
注意：数组每个值有一个索引号，从0开始。
我们还可以用简单的方法创建上面的数组和赋值：
第一种方法：
var myarray = new Array(66,80,90,77,59);//创建数组同时赋值
第二种方法：
var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）
注意：数组存储的数据可以是任何类型（数字、字符、布尔值等）
呼叫团里成员(使用数组元素)
我们知道数组中的每个值有一个索引号，从0开始，如下图， myarray变量存储6个人的成绩：
要得到一个数组元素的值，只需引用数组变量并提供一个索引，如：
第一个人的成绩表示方法：myarray[0]
第三个人的成绩表示方法: myarray[2]
了解成员数量(数组属性length)
如果我们想知道数组的大小，只需引用数组的一个属性length。Length属性表示数组的长度，即数组中元素的个数。
语法：
myarray.length; //获得数组myarray的长度
注意：因为数组的索引总是由0开始，所以一个数组的上下限分别是：0和length-1。如数组的长度是5，数组的上下限分别是0和4。
var arr=[55,32,5,90,60,98,
最低0.47元/天 解锁文章
2554
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
