来来来，JavaScript核心基础语句送给你们
学JS你不会DOM算真的学会了吗？
对JavaScript中的 事件 进行疯狂 处理
用BOM来实现轮播图效果
我们来实现创建JavaScript中的自定义对象
JS中构造函数的原型prototype
还不明白JS中的内置对象吗？ 快来这里！
JavaScript中数据如何存储在客户端？带你看看Cookie和WebStorage
一、JS的两种引入方法
1.1 内部引入
直接在<head>标签中引入<script>标签后即可书写JS代码。
<script type = "text/javascript">
//内部引入
</script>
1.2 外部引入
使用外部引入时，创建一个新的JS文件，并在html文件中的<head>标签中写入
<script type="text/javascript" src="main.js" charset="utf-8"></script>
//src属性中写入JS的文件名
二、JS的注释
2.1 单行注释
<script type = "text/javascript">
//打印一句话
document.write("科比老大")
</script>
快捷键：ctrl+?
2.2 多行注释
<script type = "text/javascript">
/*
打印一句话
科比respect
*/
document.write("科比老大")
</script>
快捷键：ctrl+shift+?
三、JS的变量
3.1 首先定义变量
var x; //定义一个标量，名字为x
var是JS中定义的一个关键字
3.2 赋值
x = 20; //为定义的x变量赋值为20
变量的赋值也可以在定义的时刻完成 var x = 20;
3.3 使用
x = x + 24;
如果想要查看结果，可以在浏览器中的控制台中以日志的形式输出查看
console.log(x);
在JS中，定义变量与其他语言不同，只有var一个关键字用来定义变量。
四、变量的数据类型
JS中变量的数据类型分为以下几种：
- 字符串（String）
- 数字（Number）
- 布尔（Boolean）
- 数组（Array）
- 对象（Object）
- 空（Null）
- 未定义（Undefined）
数组、对象被称之为复合类型：数组由字符串、数字、布尔类型组成，而对象由字符串、数字、布尔和数组类型组成。
当定义字符串、数字、布尔类型的变量未赋初值时，如果打印就会显示未定义（Undefined），当定义出的变量是数组或对象类型时未赋初值就会显示空（Null）。
4.1 字符串类型变量
如果我们想定义一个字符串类型的变量，我们需要在赋值时对字符串加上引号。
var a = "科比"
如果在多重引号嵌套的情况下需要保持引号的配对。
var words = "kobe said 'Mamba Out!'."
字符串可以通过+来进行拼接（定义过的变量也可以进行拼接）
var x = "你好"+"科比"
4.2 数字类型变量
JS数字类型变量只能用来保存数字。
var x = 24;
极大或极小的数字可以通过科学计数法来书写
var y = 123e5; //12300000
var z = 123e-5; //0.00123;
4.3 布尔类型变量
布尔（逻辑）只能有两个值：true或false
var x = true;
var y = false;
布尔类型常用于判断或者设置状态（当一种情况有两种状态时可以使用布尔类型）
五、运算符
5.1 算数运算符
当我们要分辨a++和++a时，我们只需要看这一句执行前 和执行后的情况。
a++; //执行前 = a, 执行后 = a+1
++a; //执行前 = a+1, 执行后 = a+1
我们来进行两个判断：
var a = 8;
console.log(a++); //结果是8，因为这条语句还没有执行完
var a = 8;
console.log(a++); //结果是9，因为它之后还有语句，说明本条语句已经执行完毕
console.log(++a); //9
5.2 赋值运算符
没什么好说的，运用简写形式确实能提高开发效率。
5.3 比较运算符
注意两个等号与三个等号的区别。
5.4 逻辑运算符
var a = 24;
var b = true;
var res = (a >= 18 && b == true); //当使用&&时，所有条件必须全部为真，有一个为假就是假。
var res = (a >= 18 || b == true); //当使用||运算符时，所有条件有一个为真就是真，全部为假才是假
var res = (a >= 18 )
var a = 24;
console.log(!a); //0
var b = "kobe";
console.log(b); //kobe
console.log(!b); //false
5.5 条件运算符
var iablename = (condition) ? value1 : value2;
例子：判断是否登陆成功
var username = "kobe";
var password = '24';
(username == "kobe" && password == '24') ?
console.log("登陆成功") : console.log("登录失败");
5.6 运算符优先级
大家可以在网站中自行查看
运算符优先级
六、函数
6.1 初始函数
（1）方法的定义
函数就是包裹在花括号中的代码块，使用了关键字 function：并且必须小写。
function functionname(){
执行代码块;
}
(2)方法的调用
通过 方法名+括号 来使用方法
functionname();
上面这句代码就是使用方法名为functionname的方法，必须加上括号，括号时方法的标志，不可不写。
方法最简单的功能就是将一部分代码放到一起，组成一个代码块，在需要的时候直接执行。因此，方法在写好后时不会自动执行的，除非常规使用，方法里面的代码才会执行。
6.2 将html与JS进行连接
可以在HTML元素的点击事件中使用方法，HTML的点击事件是onlick属性。
//在JS文件中编写
function addition(){
var a = 8;
var b = 24;
console.log(a+b);
}
//在html文件中编写
<body>
<!--在onclick属性中使用方法-->
<button onclick="addition()">点击计算8与24的和</button>
</body>
而如果想要对自己输入的值进行操作可以采用以下方法（取值操作）
//在JS文件中编写函数
function addition(){
var a = num1.value; //得到的是字符串
var b = num2.value;
console.log(a*1+b*1);
}
//在HTML中编写
<body>
<input type="number" id="num1" value="123"/>
<input type="number" id="num2" value="456"/>
<button onclick="addition()">点击计算两个数的和</button>
</body>
<!--外部引入-->
<script type="text/javascript" src="main.js"></script>
注意函数中得到的值是以字符串形式出现的，如果想进行加法运算要将字符串转换为数字。
如果想要完成JS的设置值操作,可以使用.innerText和.innerHTML方法
function addition(){
var a = num1.value; //得到的是字符串
var b = num2.value;
res.innerText += a*1+b*1;
res.innerHTML += a*1+b*1+"<hr>";
//它们的区别就是如果是在.innerHTML中加入一些标签，会按照html的语法规则进行输出；而.innerText则会输出纯文本。
}
<body>
<div id="res">结果：</div>
</body>
我们来做一个练习：
点击添加后将上卖弄输入框的文字追加到下面的文本域中
//html
<body>
<input type="text" id="input">
<button onclick="add()">添加</button><br>
<textarea rows="10" cols="30" id="output"></textarea>
</body>
//JS
function add(){
//获取单行输入框中的值
var a = input.value；;
//把获取到的值添加到多行输入框（文本域）中
output.innerText += a;
}
七、JavaScript条件语句
这里只简单复习一下条件判断语句，相信大家把这些只是都已经铭记于心了。
- if语句 — 只有指定条件为true时，使用该语句来执行。
- if…else语句 — 当条件为true时执行代码，当条件为false时执行其他代码。
- if…else if…else语句 — 使用该语句来选择多个代码之一来执行。
- swith语句 — 使用该语句来选择多个代码之一来执行。
八、JavaScript获取和设置HTML元素
//使用“.value”来设置或者获得HTML输入框元素（单行输入框、下拉框、单选、复选、按钮）的值
<input type='text' name='' id='user' value='110' />
var a = user.value;
console.log(a);
//其他双标签
<div class='divv'>科比</div>
//与上面进行相同的写法
user.innerText; //纯文本
user.innerHTML; //可以识别标签
-
通过ID属性获取HTML元素，只能获取第一个。
document.getElementById('id的属性名'); -
通过CLASS属性获取HTML元素，可以获取多个，用item(n)来获取第n个。
document.getElementsByClassName('class的属性名').item(0); -
通过标签名获取HTML元素，可以获取多个，用item(n)来获取第n个。
document.getElementsByTagName('标签名').item(0);
我们使用JS完成获取值和设置值
//在html中编写
<div class='divv'>科比</div>
//在JS文件中
var m = document.getElementsByTagName('div').item(0);
//获取值
var x = m.innerText;
console.log(x);
//设置值
x.innerText = "乔丹";
九、JavaScript 常用事件
-
文档加载事件
window.onload = function(){ //代码 }文档加载事件的作用是在html文件中的代码执行完毕之后再执行JS中的文件，解决了
<script>标签不能放在头部的问题。 -
元素点击事件
document.getElementById('name').onclick = function(){ //代码 } -
表单输入元素获取焦点时的事件
document.getElementById('name').onfocus = function(){ //代码 } -
表单输入元素失去焦点时的事件
document.getElementById('name').onblur = function(){ //代码 }
十、JS循环
1. JavaScript while循环
先判断条件，只要指定条件为true，循环就可以一直执行代码块。
while(条件) {
//代码
}
生成100行*10列的表格
<body>
<h4自动生成100行*10列的表格</h4>
<table id='t' border='1'></table>
</body>
window.onload = function(){
//获取表格table
var table = document.getElementById('t');
var i = 1;
//生成表格
while(i<=100)
{
table.innerHTML += '<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';
i++;
}
}
2. do-while循环
先执行一次代码，然后判断条件，如果条件为真就会重复这个循环直到结束。
do {
//代码
} while(条件)；
3. for循环
常用于已知循环次数的情况。
for(语句1;语句2;语句3) {
//代码
}
语句1：在循环开始执行之前做的依次操作
语句2：判断循环条件是否满足，true：执行循环；false：不执行
语句3：每次循环结束后，下一次循环开始前，执行的操作
将while循环转换为for循环
var i = a*1;
while(i <= b)
{
if(i%c == 0 || i%10 == c)
{
sum += i;
}
i++; //单词循环的最后一句，下一次循环的开始前一句
}
for(var i=a*1;i<=b;i++)
{
if(i%c==0 || i%10==c)
sum += i;
}
十一、数组
1. 什么是数组
数组对象是使用单独的变量名来存储一系列的值。
2. 创建数组
创建一个数组有两种方法：
- 使用new Array()创建数组
<script type="text/javascript">
var user = new Array("科比"，"24");
//或者
var user = new Array();
user[0] = "科比"；
user[1] = "24";
</script>
- 使用方括号var user = []创建数组
<script type = "text/javascript">
var user = ["科比","24"];
</script>
3. 循环数组并显示到表格中
<body>
<table id="table" border="1">
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</table>
</body>
var student = ['001','张三'，'男'，'18'];
var table += document.getElementsById('table');
var trs = '<tr>';
for(var i=1;i<=student.length;i++)
{
trs += '<td>'+students[i]+'</td>'
}
trs += '<tr>';
table.innerHTML = trs;
console.log(trs);
4. 数组开头添加值
（1）在数组开头添加一个数据
var b = [1,23,456,777];
for(var i=0;i<b.length;i++){
b[i] = b[i-1]; //每个数据向后移动一位
}
b[0] = 0; /给第一个值赋值
console.log(b);
（2） 在数组末尾添加一个数据
b[b.length] = 24;
（3）在数组中间的任意位置插入一个数据
//在第五个位置添加一个数据
for(var i=4;i<b.length;i++){
b[i] = b[i-1]; //每个数据向后移动一位
}
b[4] = 24;
5. 在数组任意位置删除一个数据
var n = 3; //删除第3个数据
var b = [1,23,456,777];
for(var i=0;i<b.length;i++){
b[i-1] = b[i]; //每个数据向前移动一位
}
b.length--;
console.log(b);
6. 数组常用函数
（1）concat()连接两个或多个数组
array1.concat(array2,array3);
（2）fill() 用一个固定值替换数组的元素
array.fill(value,start,end)
- value表示需要替换的值
- start表示开始替换的位置
- end表示结束替换的位置
（3）toStrig() 数组变换成字符串
array.toString();
（4）push()向数组末尾添加一个或多个元素，并返回新的长度
var x = array.push(item1,item2);
console.log(x);//输出长度
（5）pop() 删除数组的最后一个元素并返回删除的元素
array.pop();
（6）unshift() 向数组的开头添加一个或多个元素，并返回新的长度
array.unshift();
（7）shift() 删除数组的开头一个元素并返回删除的元素
array.shift();
（8）reverse() 反转数组的元素顺序
array.reverse();
7. 函数参数
<body>
<script type="text/javascript">
//实际参数
reverse_value(a);
</script>
</body>
//第一个JS文件
var a = [1,2,3,4,5,6];
//第二个JS文件
//定义交换数组元素的函数
function reverse_value(x){
for(var i=0;i<x.length;i++){
var temp;
temp = s[i];
s[i] = s[x.length-i-1];
s[x.length-i-1] = temp;
}
console.log(x);
}
8.多维数组
数组里的元素同样还是数组：
var nums = [
[12,55,4,34,6],
[432,56,87,23,545,98],
[54,654,32,877,87]
];
202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
