JavaScarpt大整合

JavaScript课程笔记
一、JavaScript简介

1. 什么是JavaScript？
   JavaScript简称JS，由网景公司开发的 客户端 脚本语言，不需要编译，可以直接执行
   补充：
   机器语言(0,1代码)—>汇编语言(助记符)—>高级语言(①解释，②编译)
   高级语言—>编译 .obj 目标程序文件—>连接 link.exe 可执行性文件
   解释
   WEB前端三层：
   结构层HTML，定义页面的结构
   样式层CSS，定义页面的样式
   行为层JavaScript，用来实现交互，提升用户体验
2. JavaScript作用
   在客户端动态的操作页面
   在客户端可以做数据的校验
   在客户端发送异步要求
   二、引用方式
3. 内联方式
   在页面中使用script标签，在script标签的标签体重编写JS代码
4. 行内方式
   在普通标签中编写JS代码，一般需要结合 事件 属性，如onclick、onmouseover等
   对象：客观存在的，并且可以相互区别的事物---->如：各种标签
   eg：对象：
   外观—>宽度、高度、背景色—>CSS
   事件—> 多态性 同一个事件发生的对象不同，所引发的反应也不相同
5. 外部方式

我会神奇的魔法，带你周游世界 我又出来了

使用单独的 .js 文件定义，然后在页面中使用script标签引入外部脚本文件
注意：如果某个script标签用于引入外部的 .js 文件，则该script标签的标签体中不能再写js代码
三、基本用法

1. 变量
   js是一门弱类型的语言，声明变量时使用var关键字，不需要指定变量的类型
   语法： var 变量名=常量或表达式;
   注意：变量名的命名规则
2. 由字母，数字，汉字，下划线组成
3. 由字母，汉字，下划线开头
4. 不能和保留字同名
5. 大小写敏感
   回忆：
   数据类型：常量和变量
   常量：具体的量，不变的量—>常数项
   变量：变化的量，存放常量的量—>容器

第一个JavaScript程序

---

我会神奇的魔法，带你周游世界 我又出来了

在ECMAScript 6 规范中新增let关键字，也用于声明变量
使用let声明的变量支持模块级作用域，而是用var声明的变量不支持模块级作用域
住：在IDEA中配置EX版本settings—>Language&FrameWorks—>JavaScropt—> JavaScropt Version
2. 输入和输出
输出：
alert()弹出警告框
console.log()输出到浏览器的控制台
int a,b,c;//变量在使用前必须强制进行定义获声明 a = 10;//讲整形常量10放到整形变量a中 b = 20; c = a + b;//将a+b的和去赋值个整形变量c print(“c-%d”,c);
document.write()输出到页面
输入：
prompt()弹出输入框，获取用户输入的数据
使用 typeof 变量名 判断变量的类型
使用 Number(变量名) 将字符串转换为数值
3. 转义字符
常用转义字符：
\n 换行
\t 制表位，缩进
" 双引号
’ 单引号
\a 响铃，警告
4. 注释

单行注释： //
多行注释： /* */
5. 编码规范
代码区分大小写
每条语句以分号结尾
代码缩进
四、核心语法

1. 数据类型
   常量：具体的值 eg:‘abc’ ‘abc’ 3.14 100
   变量：存放常量的量—>容器
   基本数据类型：
   string 字符串
   number 数值(NaN表示非数字NOT a Number，其自身是number类型，表示数值是不正常状态)
   boolean 布尔
   null 空类型
   undefined 未定义类型
   数据类型转换：
   转换为number
   使用Numner(); ParsInt(); parseFloat();
   转换为string
   拼接空字符串
   转换为布尔
   使用Boolean()；
   注意：0、空字符串、undefined、null 、NaN会被转换为逻辑假false，其他类型在转化为布尔
   时，转换为true

// var date = new Date(); var arr = new Array(); var sex;//只定义了变量，但是未赋值； // console.log(typeof name); // console.log(typeof age); // console.log(typeof height); // console.log(‘hello’ -5);//显示NaN // console.log(typeof flag); // console.log(typeof hobby);//如果数据是null、date、array、等返回值是object // console.log(typeof date); // console.log(typeof arr); // console.log(typeof sex);//返回undefined /* 类型转换 / //1.转换数值 // var a = ‘12’; // console.log(a,typeof a); //方式1：使用Number(); //a = Number(a);//=号左边的A代表的是容器本身 右边的A代表容器中的值 // a = Number(‘12.5’); // a = Number(‘12abc’);//不同类型 // a = Number(‘ab12’); // console.log(a,typeof a); //方式2：使用ParsInt(); // a = parseInt(a); // a = parseInt(‘12.5’); // a = parseInt(‘12abc’);//按照字符顺序解析 // a = parseInt(‘abc12’);//因为开头不是数字 //方式3：使用parseFloat(); // a = parseFloat(a); // a = parseFloat(‘12.5’); // a = parseFloat(‘12abc’); // a = parseFloat(‘abc12’);//因为开头不是数字 //将布尔值转换为数值 // a = Number(true);//JS中true用1或者非0表示 // a = Number(false);//false用0表示 // console.log(a,typeof a,typeof true); //将数值转换为字符串 // var a = 12; // console.log(a,typeof a); // a = a + ‘’;// 后接一个空字符串 左边a是变量本身 右边a是值 // console.log(a,typeof a); //将数值、字符串转换为布尔 // var a = Boolean(0); // var a = Boolean(’’); // var a = Boolean(null); // var a = Boolean(undefined); // var a = Boolean(NaN); // var a = Boolean(4);
2. 运算符
算数运算符：+、-、、/、%、、++、–
比较运算符：>、>=、<、<=、、=、!=
赋值运算符：=、+=、.=、*=、/=、%=、=、
逻辑运算符：&&并且、||或、|与
条件运算符：条件？表达式1:表达式2 // var a = Boolean(‘abc’); // console.log(a,typeof a); var name=‘tom’; if(name) { console.log(name); } var arr = new Array(); var arr = new Arrar(值1，值2，…); var arr = [值1，值2，…];

function 函数名(参数1,参数2,...) { 函数体; }

块级作用域
使用let关键字声明变量,只能在声明它的代码块内访问

6.2 回调函数
不会立即执行函数调用，满足一定条件时才会执行或者由别的代码调用执行，称为回调函数 callback
调用时只写函数名，没有小括号()和参数
应用：
作为事件绑定的函数
作为另一个函数的参数

6.3 匿名函数
没有名字的函数，称为匿名函数，一般用于回调
应用场景：
用于函数的回调
用于一次性执行的函数，会自动执行，称为自执行函数----用于定义一个插件
// else // return 0; }// arr.sort(comapreFn); // console.log(arr); // for(var index = 0;index<arr.length;index++) // console.log(index,arr[index]); function show(value,index){ console.log(index,value) }arr.forEach(show); window.οnclick=function () { console.log(111); };(function () { console.log(333); })()

1. string
   1.1 定义方式
   语法：
   使用length属性获取字符串的长度
   1.2 常用方法
   // var a=function (x,y) { // var sum = x + y; // return sum; // return x + y; // }; // var a = (x,y)=>{ // var sum = x + y; // return sum; // }; // console.log(a(12,34)); // var a = function (x) { // console.log(x); // }; var a = x => console.log(x); a(5); console.log(a(5)); //应用场景： var arr = [12,4,23,6,26,86]; arr.forEach((value,index)=>{ console.log(index,value); }); window.οnclick=()=>{ console.log(111); }; var str = ‘welcome’;//基本数据类型string var str = new String(‘welcome’)//引用数据类型String
   方法 描述
   charAt() 返回在指定索引位置的字符，也可以使用 [索引] 的方式
   indexOf() 返回某个指定的字符串在原字符串中首次出现的位置
   lastindexOf() 返回某个指定的字符串在原字符串中后出现的位置
   toLowerCase() 将字符串转换为小写字母
   toUpperCase() 将字符串转换为大写字母
   subString() 提取字符串两个指定的索引号之间的字符
   replace() 将指定的字符串替换为新的字符串
   split() 将字符串分隔为字符串数组
   trim() 去除字符串前后两端的空格

方法名 说明
getFullyear() 以四位数字返回年份
getMonth() 返回月份[0,11]，0表示1月
getDate() 返回一个月中某一天（1-31)
getHours() 返回小时(0,23)
getMinutes() 返回分钟(0,59)
getSeconds() 返回秒数(0,59)
getMillseconds() 返回毫秒(0-999)
getDay() 返回一周中的某一天(0-6)，0表示周日
getTime() 返回从1970-1-1 0:0:0至今相差的毫秒数
2.1 定义方式
语法：
2.2 常用方法
setXxx方法与getXxx方法类似，用于设置对应的值
var date = new Date();//定义一个日期对象，表示当前时间 var date = new Date(teat,month,day,hour,minute,second);;//参数 为指定的年,月,日,时， 分，秒 var date = new Date(millSeconds);//参数为当前时间与1970-1-10:0:0相差的毫秒数 //新创建的对象没有属性和方法 var 对象名 = new Object(); //为对象添加属性 对象名.属性名 = 属性值； //为对象添加方法 对象名.方法名 = function{ 方法体； }；//调用属性和方法 对象名.属性名 或 对象名[‘属性名’] 对象名.方法名
function 构造函数名（形象1，形象2…）（//为了区别与普通函数，构造函数名建议首字母大 写）this.属性名 = 形象1; this.属性名 = 形象2; this.属性名 = function(){ 方法体； };
使用JSON格式定义对象，一般只在JSON对象中定义属性
var JSON对象 ={ 属性名：属性值，//属性名和方法名可不用加引号 属性名：属性值， … }

1. DOM操作
   Dccument Object Model文档对象模型
   浏览器加载html文档时，会将html文档解析为一个树形结构，称为DOM树
   HTML文档和DOM树中节点是一一对应的关系
   当DOM树被改变时，与之对应的HTML文档会随之改变
   当需要对HTML中的内容进行动态改变时，可以使用DOM来进行操作
   DOM提供了一组用来操作HTML文档的API，即提供了一套 属性，方法和事件
   树上的每个节点都是一个DOM对象，树的顶层document 对象 ，表示整个文档
   console.log(“我叫”+this.username+“正在学习…”+“年 龄:”+this.age+“性别：”+this.sex); };this.show = function () { console.log(“正在学习…”); }; }//Student(‘tom’,20,‘male’); var syudent = new Student(‘tom’,20,‘male’); //console.log(student.username,student.age,syudent.sex); //student.show(); //student.study(); /* 3.使用JSON对象 */ var student = { name:“tom”, age:19, sex:“male”, study:function () { console.log(“正在学习…”); } };console.log(student.name); console.log(student[‘age’]); student.study();

   ---

   hello
   hello

   welcome

   爱好：吃饭 睡觉 打豆豆
   • tom
   • jack
   • alice
   • mike
   
   方法和属性 含义
   document.getElementByld(“id值”)
   根据id属性来查询节点，返回匹配的第一个节
   点
   document.getElementsByName(“name属性
   值”)
   根据name属性来查询，返回所有匹配的节点
   集合
   document.getElementsByTagName(“标签
   名”)
   根据标签名来查询，返回所有匹配的节点集合
   document.guerySelector(“选择器”) 根据css选择器来查询，返回匹配的第一个节点
   document.querySelectorAll(“选择器”)
   根据css选择器来查询，返回所有匹配的节点集
   合
   parentNode属性 查询当前节点的父节点
   previousSibling属性 查询当前节点的上一个节点
   nextSibling属性 查询当前节点的下一个节点
   firstChild属性 查询当前节点的第一个节点
   lastChild属性 查询当前节点的最后一节点
2. 访问操作
   3.1访问属性
   即获取/设置DOM对象的属性
   DOM对象的属性和HTML标签的属性几乎是一样的，一般情况下DOM对象都会存在一个对应的HTML标
   签同名的属性
   用法： DOM对象.属性
   3.2访问内容
   即获取/设置标签中的内容
   使用innnerHTML
   用法： DOM对象，innertHTML 将内容解析为HTML
   使用innertTEXT
   用法： DOM对象.innerTEXT 将内容作为纯文本
   3.3访问CSS
   即可获取/设置CSS样式
   两种方式：
   使用style属性
   用法： DOM对象.style.样式属性
   如果CSS属性中有短横线-.需要在访问时去掉短横线，然后将其后的单词首字改为大写
   使用className属性
   用法： DOM对象.className

点我 用户名：
性 别：男 女

---

hello world

百度 搜狗 360

方法 含义
document.createElement(“标签名”) 创建一个元素节点，即标签
document.createTextNode(“文本内
容”)
创建一个文本节点,即标签中的文本内容
node.appendChild(newNode) 将一个新的节点newNode添加到指定的节点 node中
子节点的末尾
node.insertBefore(newNode,refNode) 将一个新的节点newNode添加到node节点中 子节点
refNode之前
node.replaceChild(newNode,refNode) 用一个新的节点newNode替换原有的node节 点中的
子节点refNode
方法 含义
node.remove() 删除当前节点
node.removeChild(refNode) 删除当前节点中指定的节点
4. 添加操作
5. 删除操作

1. 简介
   事件：发生在HTML元素上的事情，可以是用户的行为，也可以是浏览器的行为，如：
   用户点击了某个HTML元素
   用户将鼠标移动到某个HTML元素上
   用户输入数据时光标离开
   页面加载完成
   事件源：事件触发的源头，即触发事件的元素，如按钮，输入框，超链接等
   事件对象：当一个事件发生时，这个事件相关的详细信息会保存在一个对象中，称为event对象
   事件监听：监听事件的发生，绑定事件函数，当事件被触发后执行该事件的函数，即回调函数
2. 绑定事件
   两种方式：
   静态绑定，通过标签事件属性绑定
   
   动态绑定，通过JS代码绑定事件
   注意：
   可以通过事件回调函数的第一个参数获取事件对象event
   }function doDelete() { // document.getElementById(“first”).remove(); var ul = document.getElementById(“myul”); // ul.removeChild(document.getElementById(“first”)); ul.removeChild(ul.lastChild); }
   • tom
   • jack
   • mike
   
   在事件回调函数中，this表示事件源，即发生事件的元素

爱好：吃饭 睡觉

打豆豆

3. 常用事件
3.1 鼠标事件

全选	姓名	年龄	性别	电话	操作

tom 20 male 110 jack 22 male 119 alice 20 female 120 姓名:
年龄:
性别：男 女
电话：

---

事件名 描述 onclick 鼠标单击 ondblclick 鼠标双击 onmouseover 鼠标移动某元素之上 onmouseout 鼠标从某元素上移开 onmousedown 鼠标按钮被按下 onmouseup 鼠标按键被松开 onmousemove 鼠标被移动 事件名 描述 onkeydown 某个键盘的键被按下去 onkeyup 某个键的盘被松开 onkeypress 某个键盘的键被按下去且松开 事件名 描述 onfocus 元素获得焦点 onblur 元素失去焦点 onchange 域的内容发生改变，一般用于文件选择器和下拉列表 onselect 文本内容被选中 onsubmit 表单提交前触发，回调函数返回true表示允许表单提交，返回false表示阻止表单提 交 3.2 键盘事件 3.3 表单事件

用户注册

用户名：
密码：
确认密码：
出生日期：
手机号：
邮箱：