xxx is not defined
表示xxx未定义 没有var var是定义声明
undefined
声明了但是没有赋值
检测数据的基本类型
#### typeof
console.log(typeof NaN) //number var a = []; var b = {}; var c = null; console.log(typeof c); //object console.log(typeof b); //object console.log(typeof a); //object
object.p rototype.tostring.call()
var a = []; var b = {}; var c = null; console.log(Object.prototype.toString.call(a)); //[object array] console.log(Object.prototype.toString.call(b)); //[object object] console.log(Object.prototype.toString.call(c)); //[object null]
运算符
#### 算数运算符
##### 双目运算符:运算的时候必须要有两个数据才能进行计算
+ - * / %
注:1.当两边的数据全是纯数字的时候全部双目运算符进行正常的运算
2.只要出现了一个数据是字符串则只有+会进行拼接,(例 ‘1’+ 1 == 11)其他的运算会把字符串转换成数字进行计算,例:(“1”- 1 == 0)
2》单目运算符:运算的时候只需有一个数据
++ --
1.var nu = 10;
var res = nu++; //先赋值再运算
console.log(nu); //11
console.log(res); //10
2.var nu = 10; var res = ++nu; //先运算再赋值 console.log(nu); //11 console.log(res); //11 关系运算符 == 和 ===的区别:但关系运算符是==的时候判断只判断数值,当是===的时候判断的时候是数值加数据类型 var a = "1"; var b = 1; if(a == b){ console.log(true); }else{ console.log(false); } //true var a = "1"; var b = 1; if(a === b){ console.log(true); }else{ console.log(false); } //false 数据类型的转换:强制类型转换最终都转成了纯数字,强制转换成数值型的时候不能将纯数字之外的字符转换,只要出现非纯数字则显示NaN,其他都可以 console.log(Number("112")); //112 console.log(Number("11a")); //NaN console.log(Number(111)); //111 console.log(parseInt("12.222")); //12 console.log(parseInt("12.22a")); //12 console.log(parseInt("12aaa")); //12 console.log(parseInt(12)); //12 console.log(parseFloat("12.222")); //12.222 console.log(parseFloat("12.22a")); //12.22 console.log(parseFloat("12aaa")); //12 console.log(parseFloat(12)); //12
函数
重复引用
选择性应用
影藏内部细节
函数定义的方法
function a (){
}
var a = function(){
}
构造函数的写法
var 函数名 = new Function("参数",“执行的代码”);
函数的特点
不能自执行需要调用 可以重复使用
函数的调用方法
事件驱动 :用事件调用这个函数
自调用 :自己调用一次
参数
形参
实参
function fn( x ,y){ //形参
document.write("<table>")
for(var i = 0;i < x;i++){
• document.write("<tr>");
• for(var j = 0;j < y;j++){
• document.write("<td></td>")
• }
• document.write("</tr>")
}
• document.write("</table>")
}
fn(2,4) //实参
// 1.形参和实参是一一对应的,当形参的数值多余实参,则对应到一一对应到最后,剩余的那个形参则会显示undefined
//2.当实参的数值多余形参,则一一对应,程序会运行,没有影响
函数的返回值
1,函数一般有一个返回值
2,return只能出现在函数中
3,有return则直接返回
4,当一个函数没有返回值得时候则为undefined
// 编写一个函数,生成4位数的验证码
function yanzh(){
• var str = "";
• for(var i = 0; i < 4;i++){
• str += parseInt(Math.random() * 10);
• }
• return str;
}
console.log(yanzh());
// 函数功能:求整数num从右边开始第k为的值,如果没有则返回0
function digit(num, k){
• for(i = 1;i<k;i++){
• num = num / 10;
• }
• if(parseInt(num) == 0){
• return 0;
• }else{
• num = parseInt (num % 10);
• return num;
• }
}
arguments
存放函数内部所有的参数
通过下标取出里面存放的数据
作用
1,可以取出很多个数字中 某个下标的数字
function fn(){
• return arguments[5];
}
2,可以计算出好几个数字的和
function fn(){
• var sum = 0;
• for(var i= 0;i < arguments.length;i++){
• sum +=arguments[i];
• }
• return sum;
}
console.log(fn(7,8,8,7,2,3,7,43,3))
作用域
起作用的一个范围,
函数的运行是从外到内的运行
var a = 10;
function fn(){
console.log(v);
}
console.log(a);
fn()
//浏览器会先打印出10然后再打印出v is not defined
function fn(){
var a = 10;
console.log(a);
}
console.log(a);
fn()
//浏览器直接打印 a is not defined
作用域链
函数内部访问函数外部的这种机制是当前作用域链,父级作用域链,全局作用链这个过程叫做作用域链。
数组
遍历数组中的所有值
1.for循环
var arr = [1,3,4,5,6,2,2,6,7];
for(var i = 0;i < arr.length;i++){
console.log(arr[i]);
}
2,一个简单的点名函数
var arr = ["原卫强","原卫强3","原卫强6","原卫强4","原卫强9","原卫强0"];
console.log( arr[parseInt(Math.random()*arr.length)] );
数组的api
1,push:在数组的最后面添加元素
var arr = [1,3,4,5,6,2,2,6,7];
arr.push(23,34,34)
console.log(arr);
2.pop:取出数组的最后一个元素
3.unshift:从数组的头部(下标为0的地方开始)添加元素
4.shift:取出数组第一个(下标为0的元素)元素
5,sort
1,当数组里面的元素都是个位没有十位的时候就可以直接用arr.sort()这种方法可以排序,但是出现十位的时候就必须得用函数的方法如2
var arr = [1,3,4,5,6,0,2,2,6,7];
arr.sort();
2.arr.sort(function(val1,val2){
val1-val2 //当前的顺序是从小到大
val2-val1 //当前的顺序的从大到小
})
6.reverse:数组可以反转
把你自己写的数组里面的元素全部反转过来
7.concat:数组的拼接
var arr1 = [],var arr2 = [
var3 = arr1.concat(arr2) //arr3得到的就是数组arr1和arr2的全部元素
8,join:把数组中的元素以自己想要的符号进行拼接
var arr = [11,3,4,5,6,10,2,2,6,7];
console.log(arr.join(-)); //11-3-4-5-6-10-2-2-6-7
9.arr.toString:把数组转换成字符串
var arr = [11,3,4,5,6,10,2,2,6,7];
console.log(arr.toString()) //11,3,4,5,6,10,2,2,6,7
10.arr.slice(start,end):从下标为start开始(不包括start)到end结束(包括end)把这之间的元素取出来放到一个新元素中,原数组不改变
11.arr.splice(start,delatecount,arr):把原数组里面的元素从start(包括start)开始删除delatecount个,然后把arr加入到删除的位置上
12.indexof():数组去重,当数组中没有找见想要的元素时输出-1,当找见时输出的是该元素的下标。查找元素是从前往后查。
13.lastIndexof():数组去重,当数组中没有找见时输出的是-1,找见元素输出的是下标,查找元素是从后往前查找。
数组的api,api后面接的是一个返回函数
14.forEach:数组循环遍历,没有返回值,改变的是原数组
arr.api(function(value,index,arr)){
}
15.map:映射,映射到一个新的数组里,不改变原素组,有返回值
arr.api(function(value,index,arr)){
}
16.reduce:累计器,有返回值,不改变原素组,进行一些加减乘除之间的运算
arr.reduce(function(acc,value,index,arr)){
return acc + value //元素全部的相加
return acc - value //元素之间全部相减
return acc * value //元素之间全部相乘
return acc / value //元素之间全部相除
}
17.filter:过滤,有返回值,返回新数组
arr.filter(function(value,index,arr)){
return value > 3 ;
}
es6新增数组
1.find:遍历循环,查找需要的元素,因为foreach没有返回值意思就是不能终止和跳转,find有返回值,可以终止和跳转。
2.findIndex:查找数组返回的是下标
3.some:查找数组中的元素,有一个为真则返回true
4.every:查找数组中的元素,元素都为真时则返回true,有一个为假则返回为假
字符串
1.charAt(下标):通过下标找到相应的元素。例如可以在一段数组中找出小写字母或者大写字母
var str = "xnfufheifhJOJDODJ"
// console.log(str.charAt(5));
• var dstr = '';
• for(var i = 0;i < str.length; i ++){
• if(str.charAt(i) >= "A" && str.charAt(i) <= "Z"){
• dstr = str.charAt(i);
• console.log(dstr);
}
}
2.str.indexof():字符串的去重
3.str.lastindexof()
4.str.substring(start,end):从start开始,包括start到end结束(不包括end),取出里面的元素发到一个新的字符串中,不影响原数组。
5.str.slice(start,end):和str.substring(start,end)用法一样,不一样的是slice可以为负数,当是负数的时候则元素从后往前查找。
6.str.substr(start,length):从start开始(包含start)length个元素。不影响原素组
7.str.split():把数组按一定的形式转换成数组
8.str.replice(old,new):字符串的替换,每次只能替换一次,不改变原字符串
对象
对象的遍历
var obj = {
name:"nijap",
age:20,
fom:"yaoshi"
}
for(val in obj){
console.log(val); //name age fom
console.log(obj[val]); //nijap 20 yaoshi
}
时间对象
getFullYear() 获取年
getMonth() 获取月
getDate() 获取号
getDay() 获取周
gethours() 获取时
getMinutes() 获取分
getSeconds() 获取秒
封装函数:显示当前的年月日时分秒
function print(d,sign){
sign == sign ? sign : "/";
return d.getFullYear() + sign + d.getMonth() + sign + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds() ;
}
document.write(print(date,"*"))
定时器 在设定的时间一直干这件事
setInterval(参数1,参数2) 参数1是一个回调函数
clearInterval() 清除定时器
延时器 延迟设定 的时间就干一次
setTimeout(function(){
过一段时间执行里面代码
},1000)
window对象
浏览器上面的方法,例如:alert.....
bom对象
bom是操作浏览器的方法
history对象
location对象
location.href 可以进行页面的跳转
location.reload() 进行页面的刷新
location.reload(true) 清除缓存之后进行刷新
navigator对象
navigator.userAgent 可以查出浏览器的版本,可以检测出是电脑还是手机
当你去搜索一个网址的时候经过哪些过程
1.首先进行dns解析
2.找到响应的服务器
3.tcp的三次握手
4.找到入口文件
5.解析文件
6.tcp的四次挥手
7.返回资源文件
window事件
window.onload = function(){
等待页面资源加载完之后在加载onload里面的代码
}
window.onscroll(){
当滚动条滚动的时候触发里面的代码
}
获取滚动条到顶部的高度
元素.scrolllTop
dom
获取元素
doument,getElementById()
doument.getElementByName() 获取的是节点的集合,获取的是一个伪数组
doument.getElementByTagName() 获取的是一个集合
doument.getElementsByclassName()
doument.queryselector() 取出一个
doument.querySelectAll() 取出全部
parenNode 返回父节点
节点的创建
doument.creatElement()
添加节点
appendChild(需要添加的节点)
复制节点
cloneNode(true) 当括号里面为true时为克隆
删除节点
父节点.removeChild(子节点)
节点.remove 自己删除节点
注
childNodes 包括元素节点,文本节点
children 只包括元素节点
输入想要的列数和行数,点击打印可以打印出,然后每行后面有删除按钮,点击可以删除本行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
tr,
td {
border: 1px solid red;
width: 50px;
height: 20px;
text-align: center;
}
button {
width: 50px;
height: 20px;
border: 1px solid olive;
}
</style>
</head>
<body>
<lable class="val">请输入行数</lable>
<input type="text" class="put1">
<lable class="val">请输入列数</lable>
<input type="text" class="put2">
<button class="btn">打印</button>
<script>
var
Iput1 = document.querySelector(".put1"),
Iput2 = document.querySelector(".put2"),
But = document.querySelector(".btn");
But.onclick = function () {
var val1 = Iput1.value;
var val2 = Iput2.value;
// console.log(val1,val2)
var Otable = document.createElement("table");
for (var i = 0; i < val1; i++) {
var Otr = document.createElement("tr");
var Obutton = document.createElement("button");
// 按钮里面加入删除的字样
Obutton.innerHTML = '删除';
Obutton.onclick = function () {
// 删除此行tr
this.parentNode.