1.JS概述
1)概念
js全程:JavaScript(一门客户端脚本语言)
a.js可以直接嵌入在html页面中,由浏览器解释执行,不进行预编译
b.用于向页面添加动态交互行为
c.具有与java语言类似的语法,一种网页编程语言

操作方向:
—操作DOM元素(html元素)
—操作BOM元素(浏览器对象)

2)js特点:
1.解释执行:不需要预编译,逐行执行
2.基于对象:内置了大量的现成对象

3)作用
a.实现客户端数据简单计算
b.客户端表单合法性验证
c.添加浏览器事件的突发
d.网页特殊显示效果的制作
e.实现服务器的异步数据提交

4)遵循es规范(es6)
a.严格区分大小写
b.数字、字母、下划线、$组成,不能用数字开头
c.驼峰命名法

5)写法
a.行内式(定义事件)
在事件中定义操作,直接写js代码
alert(); 弹出警告框
事件:
onclick 鼠标点击
ondblclick 鼠标双击
onmouseover 鼠标移入
onmouseout 鼠标移出
onkeydown 键盘按下
onkeyup 键盘抬起
onblur 失去焦点
onfocus 获取焦点
写法:
οnclick=“函数()”; 事件=“事件触发的函数”;

b.内部式(嵌入式)
嵌入在页面的

c.外部式(文件调用)
js代码位于单独的.js文件中(注意保存的编码)
写法:
step1:在js文件中写js代码(定义行数)
step2:将.js文件引入到当前页面中

step3:在html行内添加事件,调用函数

js注释
单行://注释文字
多行:/注释文字/

js控制台:
不需要页面也可以直接在控制台(console)写js代码
F12(右击检查)---->打开控制台
Enter回车键:执行
Shift+Enter:换行

console.log(内容);//将内容打印到控制台

2.js组成
1)变量(var let const 无)
js是弱类型语言,使用var关键字声明变量
刑如:
var a = 1;
var s = “李四”;

拆:
var a;//a没有类型
var a=1;//初始化a才会有类型,a为number类型
a=“李四”;//a为String类型

typeof 变量名;//用来验证变量名

注意:
1.js是弱类型语言,不同的变量类型会根据数值自动给定类型
2.变量没有类型,统一用关键字var声明,变量值是有类型的
3.使用“=”进行赋值,没有初始化的变量自动取值为undefined
4.js存在变量声明提升(js会根据不同的值自动转换为对应的数据类型)

js数据类型
a.基本类型number、string,boolean
number:不区分整数和小数
string:一对引号包裹的字符串(单双引都可以) ----单双引号只能交替引用,特殊字符需要转义 \n \t \s 常用函数:
str.indexof("",from[int index]); 返回指定字符串在str中第一次出现的位置(从from开始第一次出现的位置)
str.replace("",""); 将指定字符串替换为指定字符串,只替换第一个,属于不完全替换 boolean:仅有两个值,true、false
可以参与运算,自动作为数值,true值为1,false为0
b.特殊类型undefined、null
undefined
变量声明未初始化,该变量的值和类型均为undefined
null
代表"无值"或者"无对象",可以通过一个变量赋值null来清空变量内容

c.对象类型object
内置对象 外部对象 自定义对象

数据类型转换:
a.自动转换(直接转换属于默认规则)
number+string=string
boolean+string=string
boolean+number=number
boolean+boolean=number

b.强制转换(利用类型转换函数)
toString();任何类型转换成string类型

parseInt();强转为整数,全局函数,具有截取功能

parseFloat();强转为小数,全局函数,具有截取功能

NaN:Not a Number(不是数字,不能转换成数字)

isNaN();全局函数,判断是否为非数字(true表示非数字,false表示数字)

案例1:
验证用户输入的是否位数字,若是数字则求平方,若不是数字则给出提示。

运算符
a.数学运算符 + - * / % ++ –
+:表示数学加法,或者字符串连接运输
-、*:若字符串参与,将数值字符串以数字参与运算
/:java中7/2=3,js中7/2=3.5
b.关系运算 > >= < <= == != ==:只比较值,不比较类型 ===:比较类型和值 c.逻辑运算符&&(与) ||(或) !(非)
短路逻辑:结果为boolean类型,true或者false 非短路逻辑:结果为number类型(1或者0) d.三元运算符(三目)
语法:判断表达式?表达式1:表达式2; 注意:js中出现的判断表达式或者调解表达式可以为任意表达式,可以为任何类型 转换规则:
非0数字、非空字符串、{}、对象----->true 0、null、“”、undefined、NaN------->false
案例2:
用户在页面输入一个值,判断是否为50,要求提升用户输入大,小,对?

js的流程控制
a.分支流程if-else ,switch-case
b.循环流程 for,while,do-while
案例3:
统计输入框重点敏感字(gun)出现的次数,将敏感字替换为"***"

调错方式:
1.在js代码中添加console.log()或者alert()
2.检查浏览器缓存的js文件,看错误信息
3.浏览器自带的断点debugger调试

内置对象:
简单内置对象:Number String
组合内置对象:Math Date Array
复杂内置对象:Funtion RegExp
1.Number:对象 var age=10; var salary=new Number(10);//不常用 常用函数: num.toFixed(n);
将数值转成为字符串,并通过四舍五入保留小数点后n位,如果位数不够补0 2.String:对象 var str1="abc"; var str2=new
String("abc"); //不常用 常用属性与函数: length;返回字符串长度 toUpperCase();小转大
toLowerCase();大转小 charAt(index);返回指定位置的字符串
indexOf(findStr,[fromIndex]);从指定下标位置查找字符串第一次出现的位置
lastIndexOf(findStr);返回一个指定字符串最后一次出现的位置
substring(start,[end]);截取指定下标位置的字符串(前包括后不包括)
split(byStr,[howmany]);将字符串进行拆分,得到字符串数组(几个) replace(findStr,toStr);字符串替换(不完全替换)
组合内置对象:Math Date Array
复杂内置对象:Funtion RegExp

3.Math对象
常用函数:
Math.sqrt(a);//返回数字a的平方根
pow(a,b);//返回a的b次幂(方)
random();//返回0-1之间的随机数
round(x);//返回数字x四舍五入最接近的整数
max(x,y,z…);//找出其中最大值
min(x,y,z…);//找出其中最小值
abs(x);//返回x的绝对值
floor();//向下取整
ceil();//向上取整

4.Date对象
var date=new Date();//当前系统时间
var date1=new Date(“2009/02/05”);//指定日期时间

常用函数:
getTime();//获取当前时间的毫秒值
getDate();//获取当前日期
getDay();//获取当前一周的第几天
getFullYear();//获取当前的年份
toLocalString();//转换成字符串数据(当前时间)
setDate();//修改日期本身的值

5.Array对象(数组的数据类型可以不一致)
var arr1=[10,“张三”,30,true];//常用
var arr2=new Array(10,“张三”,30,true);
var arr3=new Array();
var arr4=new Array(5);//指定数组长度

注意:数组长度是可变的,由内部元素撑开大小

常用属性和函数:
length;获取数组长度
reverse();翻转数组
sort([函数名]);数组排序,默认规则:数组的数据首个字母排序;自定义规则:根据传的函数名排序。

6.Function对象
js中函数就是Function对象,函数名就是指向Function对象的引用,
可以直接使用函数名访问函数对象,函数名()是调用函数。
函数定义: 方式一,使用function关键字声明一个函数 function 函数名([参数]){ 函数体; return 返回值; }
函数的返回值默认返回undefined,可以使用return返回具体的值 方式二,匿名函数 var 函数名=function([参数]){ 函数体;
return 返回值; } 方式三,创建一个Function对象 var 函数名=new Function("参数1","参数2","函数体;");
ps:小括号里面前面是函数的参数,后面是函数体 补充: 方式四,箭头函数(c6以后) var 函数名=([参数])=>{函数体;}
注意:在js中没有类似于java的重载,如果方法名相同,则以最后一个为准 js如果需要实现类似于java的重载效果,可以使用arguments对象实现
arguments代表当前方法被传入的所有参数形成的参数数组 arguments.length:函数的参数个数 arguments[i]:取第i个下标的元素
补充:变量的作用域(var 无 let const) 1.var声明的变量,可以修改,不初始化输出undefined,有作用域
定义在函数内部--->私有变量--->整个函数体 定义在函数外部--->全局变量--->整个js(存在变量提升)
2.let是块级作用域,函数内部使用let定义后,对函数外部无影响 3.const定义的变量初始化以后不可以修改--->类似于java常量
4.没有任何关键字声明的变量--->全局变量
全局函数:所有js对象都可以使用
parseInt(); parseFloat(); isNaN();
eval(“js代码”);-----执行函数
只接受合法的表达式和语句/只接受原始的字符串

7.RegExp正则对象
var reg=/正则表达式/tag;
var reg=new RegExp(“正则表达式”,“tag”);

tag标识:
g(globel):设定当前匹配为全局匹配
i(ignore):忽略匹配中的大小写检查

正则表达式的常用组成部分:
() 普通
[] 枚举,范围 [12345]/[1-5]
{} 次数,个数

/a/:不完全匹配
/^a/:以a开头
/a / : 以 a 结 尾 / a /:以a结尾 /^a /:以a结尾/a/:完全匹配

常用函数:
正则对象.text(字符串);
判断一个字符串是否匹配该正则表达式,符合返回true,不符合返回false

String对象中适用正则的函数:
str.replace(reg,toStr);//替换
str.match(reg);//返回匹配字符串匹配正则的内容,形成数组
str.search(reg);//返回字符串第一次匹配正则的下标

外部对象:
BOM(Broswer Object Model):浏览器对象模型
用来访问和操作浏览器窗口,是js有能力和浏览器对话,
执行操作不与页面内容发生直接关系,没有相关标准,但被广泛支持和使用

DOM(Document Object Model):文档对象模型(html文档)
用来操作文档,定义了访问和操作html文档的标准方法,应用程序通过DOM操作,
来实现对html文档数据的操作,当页面被加载时,浏览器会创建页面的文档对象模型(DOM树),
通过可编程的对象模型,js能够创建动态的html(元素、属性、样式、事件)。
DOM常用操作:读取节点的信息、修改节点的信息、创建新节点、删除节点

1.BOM对象
window是前台最大的对象,用来表示浏览器窗口。全部的js都是全局变量、全局对象和全局函数。
比如:alert(111);等价于window.alert(111);

5个属性:
document:窗口中显示的html文档
history:浏览器窗口的历史记录
location:窗口文件地址
screen:浏览器当前屏幕
navigator:浏览器相关信息

5个对象:
Document:
History:
length:返回访问的地址个数
back();返回上一个地址
forward();进入下一个地址
go(index:index<0 回退,index>0 前进)
Location:
href:当前窗口正在浏览的网页地址
reload();重新载入当前页面
Screen:
width;实际的屏幕宽度
height;实际屏幕的高度
availWidth;可用的屏幕宽度
availHeight;可用的屏幕高度
Navigator:
userAgent;获取浏览器相关信息的属性

全局函数:
对话框:
window.alert(msg);//提示对话框(警告框)
window.confirm(msg);//确认对话框
window.prompt();//文本输入框
打开新窗口: window.open(url);//打开新窗口 定时器: a.一次性定时器 在一个设定的事件间隔后执行代码,不是函数被调用之后立即执行
var t=window.setTimeout(执行语句|函数名,time); t表示返回已经启动的定时器对象 time表示时间间隔,单位毫秒
停止定时器:clearTimeout(t); b.周期性定时器 以一定的时间间隔循环执行代码 var
t=setInterval(执行语句|函数名,time); 停止计时器:clearInterval(t); 案例: 显示时间按钮,启动时间按钮,停止时间按钮
DOM对象(DOM树)在页面加载时候由浏览器生成的整个html文档,
操作文档中任何内容,都需要通过document
js可以创建动态的html(元素(节点)、属性、样式、事件) js对DOM操作:查找、读取、修改、新增、删除
查找(节点):
1.通过id查找
document.getElementById(“id名”);
如果id值错误,则返回null
2.通过标签名查找 document.getElementsByTagName("标签名"); 根据指定标签名返回全部元素组成数组,
如果标签名错误,返回长度为0的节点数组,根据下标定位具体的节点 3.通过添加name属性查找
document.getElementsByName("name属性"); 根据指定的name返回全部的元素组成数组 4.通过层次查找节点
ele.parentNode 遵循文档的上下层次结构,查找单个父节点 ele.childNodes 遵循文档的上下层次结构,查找多个子节点
5.根据选择器查找节点 document.querySelector("选择器"); 选择符合选择器的第一个节点
document.querySelectorAll("选择器"); 选择符合选择器的所有节点 6.根据class属性查找
document.getElementsByClassName("选择器"); 根据指定的class返回全部的元素组成的数组
读取、修改(文本、属性、样式…)
innerHTML属性:
设置或者获取位于对象起始和结束标签内的文本
不解析html文本,将文本内容当成字符串打印

innerText属性:
设置或者获取位于对象起始和结束标签内的文本
只能获取解析之后的文本内容
读取:ele.innerHTML ele.innerText 修改:ele.innerHTML=值 ele.innerText=值
读取、修改样式
读取:ele.style
修改:ele.style=“样式:样式值”;
ele.style.样式属性=“样式”;
注意:样式属性的写法 font-size改成fontSize(驼峰写法)
读取、修改属性
读取:ele.属性;
修改:ele.属性=值;
读取:ele.getAttribute(属性名); 修改:ele.setAttribute(属性名,属性值);
获取、修改节点class(推荐)
ele.className
ele.className=值;

案例:
图片的显示和隐藏

轮播图

新增节点:
1.通过innerHTML属性给页面添加节点
ele.innerHTML=“html代码”;

2.通过函数给页面添加节点
a.创建节点
document.createElement(“节点名称”);
b.添加新节点到指定位置 追加:新节点作为父节点的最后一个子节点添加 父节点.appendChild(新节点); 旧节点为参考点,新节点位于此节点之前添加
父节点.insertBefore(新节点,旧节点);
删除节点:
父节点.removeChild(删除的指定节点);

js的事件:
事件是指页面元素状态改变,用户在操作鼠标或者键盘时触发的动作

鼠标事件:
onclick; 鼠标单机
ondblclick; 鼠标双击
onmouseover; 鼠标移入
onmouseout; 鼠标移出
onmousedown; 鼠标按下
onmouseup; 鼠标抬起

键盘事件: e.keyCode 键盘键码值
onkeydown 键盘按键按下
onkeyup 键盘按键抬起

状态事件:
onfocus 获取焦点
onblur 失去焦点
onchange 选择(下拉框、单选框、复选框)
onsubmit 表单提交
onload 加载

事件的定义:
方式一,在元素上添加对应的事件
如:

方式二,在js中直接给元素节点添加事件
元素节点.事件名=function(){}

方式三,元素节点.事件名=函数名;

event对象
任何事件触发之后都会产生一个event对象

事件冒泡:
若子节点和父节点有相同的事件,子节点会向上触发父节点的同名事件

取消事件冒泡:e.cancelBubble=true;

**
js自定义对象
自定义对象是一种特殊的数据类型,有属性和方法封装而成

属性:指与对象有关的值,访问方式:对象名.属性名
方法:指对象可以执行的行为或者可以完成的功能
访问方式:对象名.方法名

创建自定义对象的三种方式:
方式一:直接创建对象(直接创建Object对象)
var user=new Object();

方式二:"构造器"创建对象

方式三:JSON创建对象(JSON是一个轻量级数据交换格式)
JSON使用属性名:属性值的方式定义,所有的名称都要用双引号引起来,多个属性直接用逗号隔开

技术
©2019-2020 Toolsou All rights reserved,
JVM概述VUE+Canvas 实现桌面弹球消砖块小游戏javascript事件(零基础详解)Pikachu漏洞练习平台明解c/c++程序的内存模型--内存四区python实现vlookup_干货一:怎么在python里面实现vlookupswift 5.0 创建一个获取验证码的按钮,实现倒计时效果首期500亿,成立新部门,腾讯准备做什么?关于蓝桥杯大赛,你应该了解的那些事!解决Selenium ActionChains拖动元素无效