学习JavaScript基础

JavaScript 是一门脚本语言，和java没啥关系

引入的两种方式

在html的head标签内写<script>写js代码<script> // 弹窗 <script> alert("123"); </script> 通过创建js文件外部引入，<script src=“js文件的地址”></script>

基本语法入门

定义变量 var 变量名; / 也可以给初始值 var 变量名 = 初始值 ;数据类型： - number ： 数字，小数和整数都是一样的类型 NaN : 不是一个数字 Infinity:表示无限大 - 字符串 ： “aaa” ‘aaa’ - 布尔值 ： true false - 逻辑运算 ： && || ! - 比较运算符：两个等于（类型不一样，值一样，也为true 1==“1”），=== 表示绝对等于（类型和值都一样，才为true） - NaN 与任何数据都不等，包括他自己 NaN ===NaN false 需用 isNaN(NaN) 判断 - Math.abs(1/3-(1-2/3))<0.000001 来判断是否相等 1/3 === (1-2/3) 直接这样为false - null 空 undefined 未定义 - 数组 [] 没有类型限制 [1,1.1,“aa”,null] - 对象{key1:value1,key2:value2} -建议使用严格检查模式 ‘use strict’ – ES6 语法建议使用let 定义局部变量 var 定义全局变量

字符串

多行字符串 字符串模板字符串 aaa, ${变量名} 例： asd ${num} sad${a}字符串长度 str.length字符串不可变截取字符串 str.substring(1,4) 包括下标1不包括下标4

数组

数组长度是可变的 可以给arr.length赋值可以通过arr[0] 赋值和取值长度 arr.length通过元素获得下标索引 arr.index0f(元素)截取数组 arr.slice(1,6) [1,6)包括下标1不包括下标6可以通过push()/unshift() pop()/shift() 赋值取值 push 压入到尾部 unshift压入头部 pop 从尾部弹出 shift 头部弹出排序 sort() 升序反转 reverse()打印拼接数组使用特定字符串连接 str.join("-")

对象

键都是字符串，值是任意数据类型定义对象，都是键值对 var person={firstname:“John”, lastname:“Doe”, id:5566};可以动态的删除对象的属性 delete person.id;动态的添加：直接给新的属性赋值 person.age = 18;判断属性是否存在 “age” in person; true则存在 “toString” in person 也为true 还包括从继承的判断自身拥有的属性 person.hasOwnProperty(“age”)

Map

定义map，也是键值对 ：var map = new Map([[“tom”,20],[“lucy”,30]])取出map的某个值 var age = map.get(“lucy”);设置map的值 map.set(key,value) 如果key存在则添加，否则覆盖删除某个键 map.delete(key)

Set

Set 为不重复的值的集合var set = new Set([1,2,3,4,5,1,2,3,1,2,3]) 结果为[1,2,3,4,5]添加 set.add(5);删除 set.delete(2)是否包含 set.has(3)

遍历

for(let x of map/set/arr){ x }

流程控制

if 判断while 循环for 循环for … in 循环foreach 需要传入函数

函数

定义 function 函数名(参数){。。。} 或者 var 函数名 = function(参数){。。。}JavaScript使用时不限定传入参数个数，函数中可用arguments获取所有参数还可以通过 …rest 获取其余参数 function aa(a,b,…rest){…}

变量作用域

1. 在函数体内var 声明一个变量，函数外不能使用 2. 函数中可以使用函数外的变量，如果在函数中定义了与函数外一样的变量，则屏蔽函数外的变量使用函数内的变量 3. JavaScript会自动提升变量到开头，但不会进行赋值 var a = 1 + y; var y = 2; alter(a); // 不会报错，只是undefine ==============相当于 var y; var a = 1+y; y=2; alter(a); 全局对象 window 所有全局变量都在全局对象中，重名会冲突 window.a建议自己定义一个全局对象 var myAll = {}使用let 定义局部变量 for(var i=0;i<10;i++){} alter(i) // 10 for(let i=0;i<10;i++){} alter(i) // 报错 ReferenceError 常量使用const 定义 const PI = 3.14;

方法

定义在对象中的函数就是方法所有的函数都有apply，也可以实现方法调用 var peo = { name:"xxx", age:14; now:function(){ // 这就是方法 return new Date(); } } pro.now(); // 使用方法 ================= 方式2 function getNow(){ return new Date(); } var peo = { name:"xxx", age:14, now:getNow // } peo.now(); // 使用方法1 getNow.apply(peo,[]) // 使用方法2 函数名(对象名，参数) Date对象： 创建 var date = new Date();JSON对象 1. 创建json JSON.stringfy(需要转化为json格式的对象) 2. 解析JSON.parse() var peo = { name:"xxx", age:14} JSON.stringify(peo) // '{"name":"xxx","age":14}' var bb = JSON.stringify(peo) // '{"name":"xxx","age":14}' JSON.parse(bb) // {name: "xxx", age: 14}

面向对象编程

JavaScript 有原型链的概念 来实现继承 var M = function (name) { this.name = name; } var m1 = new M(); //创建对象 var m2 = new M(); m1.__proto__ // M的原型 // 使得m1和m2都可以共有的方法 添加共有方法 m1.__proto__.add = function () { alter("fly"); } // 或者 M.prototype.add = function () { alter("fly"); } m1.add() m2.add() // 都有结果 M.prototype === m.__proto__ // true 都指向了原型对象

2. ES6 可以使用class来定义 使用extends来继承

class Stu{ constructor(name){ this.name = name; } dt(){alert("1")} } // 继承 class nextStu extends Stu{ constructor(name,age){ super(name); this.age=age; } nt(){alert("2")} }

操作BOM对象

BOM：浏览器对象模型window对象 ： 代表浏览器窗口 有很多方法 window.innerHeight window.innerWidthnavigator 对象 ： 封装浏览器的信息screen对象 ： 屏幕信息 screen.height screen.widthlocation对象： 代表当前页面的URL信息 //刷新网页 location.reload(); // 设置新的地址 location.assign("URL地址"); document ： 代表当前页面 // 获取具体的文档树 var d = document.getElementById('d'); // 获取cookie document.cookie; history ： 浏览器的历史记录 history.back()/forward() 后退/前进

操作DOM对象

DOM：文档对象模型浏览器网页就是一个Dom树，可以更新，删除，遍历（得到），添加 Dom节点获得节点 var id1 = document.getElementById('id1'); // 根据id获取 DOM节点 document.getElementsByClassName();// 根据class获取 DOM节点 document.getElementsByTagName();// 根据标签获取 DOM节点 father.children[index] // 根据索引获取子节点 更新节点 id1.innertext = "1234"; // 修改文本内容 id1.innerHTML = '<em>1234</em>'; //可以解析html代码，进行展示 id1.style.color = 'blue'; // 修改样式 删除节点 ： 先获取父节点再通过父节点删除自己 // 获取父亲节点 var h1 = document.getElementsByTagName('h1'); var father = h1.parentElement(); father.removeChild(h1); 插入节点 // 追加 list.appendChild(js); // 将已有的js节点加到list节点中 // 添加新的节点 var np = document.createElement('p'); // 新建一个p标签的节点 np.id = 'np'; // 设置id为np // 通用设置值 np.setAttribute("属性","值"); np.innertext = '123'; // 添加文本内容 // 获取body 标签 是一个数组 要取下标0 var body = document.getElementsByTagName("body")[0];

操作表单

得到和修改输入框的值 var user = document.getElementById('user'); user.value; // 得到值 user.value = "abc"; // 修改值 // 单选框，多选框 固定value的值需要通过checked判断 sex_boy.checked // 选中为true 否则weifalse // 使用MD5进行加密 https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js // 可以使用隐藏域提交

JQuery库

里面有大量javascript函数引入 1. 下载jquery包，使用script引入 2. 使用线上的cdn，使用script引入使用方式 $("选择器").action(function()); // 选择器和css的写法一样 action 表示事件 function()表示函数 事件： 鼠标事件 mouseXXX()， 键盘事件 ， 其他事件 // 当页面加载完之后写 $(document).ready(function(){ // 写内容 }); // 简写 $(function(){ // 写内容 });

还需要学习更多。。。