JavaScrip脚本语言:
特性:松散(对于开发者的要求低)
如:定义变量严禁语言: int a=30;
松散语言:var a= 30;
永远不会认为开发者写代码有问题
分类:ECMAScript:计算机协会统一标准 只包含了基础语法部分版本区别{ECMASrcipt5(包含5)之前ECMASrcipt6(ECMASrcipt2015 简称 ES6)包含了所有语言}TypeScript(简称TS)微软出的js语言>js的超级ECMASrcipt(语言基础)
DOM、BOM操作:DOM:操作页面中的元素对象(标签){批量创建逻辑交互}
BOM:浏览器的操作{上一页下一页历史记录刷新}webapl{webSocket(及时通讯)音频播放器游戏(canvas)webVR}
游戏引擎:coco 白鹭 微信小游戏
ECMASrcipt语言基础
1.基础语法:预备知识:(1)语句:通常一行代码如添加一分号为一条语句使用英文分号分隔
(2)变量:目的通过一个名字来表示一个可以改变的值定义方式:var空格 变量名=值 不赋值 var空格 变量名 war:为关键字
变量名:开发这起的一个名字变量名的命名规则:不能使用关键字定义变量名不能以数字开头不能以特殊符号开头定义变量名要有意义:驼峰命名法:第一个首字母小写其他首字母大写下划线命名法关键字(是由语言本事提供的名字,有固定意义的。如var就是定义变量的):var for while if static let等意义:
变量名:开发者起的名字 外号 标记值(具体内容):数字 文字(字符串)数组 对象
(3)2.opp(面向对象)JS的引入方式1.<script>var a=30;<script>2.<script src="js文件位置"> <script>注释:单行:Ctrl+/多行:ctrl+shift+/运算符:算数运算:+ - * / %(取余)
必须数字与数字之间运算数据类型:
Number:数字类型包含浮点和整数
String:字符串类型只要是使用双引号或单引号包裹的
boolean:波尔类型;true(对)false(错)
Array :数组
Object:对象
Function:函数数据类型的转换:字符串转数字:转数字:parseLnt()转浮点:parseFloat如果使用小数精度丢失
war:为关键字变量名:开发这起的一个名字变量名的命名规则:不能使用关键字定义变量名不能以数字开头不能以特殊符号开头定义变量名要有意义:
驼峰命名法:第一个首字母小写其他首字母大写下划线命名法关键字(是由语言本事提供的名字,有固定意义的。如var就是定义变量的):var for while if static let等意义:
变量名:开发者起的名字 外号 标记值(具体内容):数字 文字(字符串)数组 对象(3)2.opp(面向对象)
JS的引入方式
1.<script>var a=30;<script>
2.<script src="js文件位置"> <script>注释:单行:Ctrl+/多行:ctrl+shift+/运算符:算数运算:+ - * / %(取余)必须数字与数字之间运算数据类型:Number:数字类型包含浮点和整数 String:字符串类型只要是使用双引号或单引号包裹的boolean:波尔类型;true(对)false(错)Array :数组Object:对象Function:函数数据类型的转换:字符串转数字:转数字:parseLnt()转浮点:parseFloat如果使用小数精度丢失{不要直接使用小数一定要使用:
1.乘以100倍精准的级别}prompr()输入内容:使用代码输出变量没实际意义知识在控制台输出一下变量console.log(a)日志console.warn(a)警告console.info(a)详细详细信息调试方法:
1.console.log(a);日志
2.断点调试:在程序中打点组织继续执行首先根据经验定位到大概错误位置然后打开浏览器中的Sources点击要调试的js文件在怀疑有错误的地方点个点(打断点)程序重新运行会在断点位置停止->鼠标移动到断点上面的变量->就会显示变量的值如果继续拍错可以打多个断点通过播放键跳到下一个断点通过下一步执行下一步代码复合运算符:+= :var a=10; var b=20; a = a+=b;-=:var a=10; var b=20; a = a-=b;*=:var a=10; var b=20; a = a*=b;/= :var a=10; var b=20; a = a/=b;%=:var a=10; var b=20; a = a%=b;++:自己给自己增加一个1加加减减在前先做自增减在做其他运算加加减减在后先做其他运算(或别的操作)在做自增减 --:自己给自己减少一个1对比运算符:
结果为Boolean类型的值分别为true和false。(> < >= <= ==(忽略数据的类型如:1=“1”) === (严格查看数据类型的必须类型与值都相同的如:1与“1”为不相同)!=(不等于不区分数据类型如:1与“1为相同”)!==(区分数剧类型如1与1“1”为不相同))案例:d分支结构:if(条件){当条件满足执行此内容}if(条件){}else{}if(条件){}else if(条件){}else{}三元运算(三目运算):经常会代替if else语句常用代码:if(睡觉){ 做梦 }else{掌握三元运算 }三元运算:条件?满足执行,不满足不执行//随机数//Math 数学函数//random 随机函数var num3=Math.random();console.log(num3); 逻辑运算:与(&&):所欲条件都必须满足才算真的;或(||):两个条件中只要有一个条件满足就为真;非(!):黑白颠倒,对的就是错的,错的就是对的。表示为真* true* 1* 由内容的字符串“xx”* 有值的对象* 表示为假的* 0* false* null* nudefineded* NAN* 空字符串“”switch:选择其中的某一个点子(case)switch(变量){case值1:break;case值2:break;default:}break:不是强制添加如果不添加break程序会继续执行下面的条件。循环结构:1、知道循环次数(for)for(var i=0; i<5; 1++){}var i=0;初始化变量;i<5;循环的条件;i++;更改变量的值for循环的执行流程continue:从continue的开始部分跳出循环continue前的不会跳过道循环次数(while)while:while(条件){循环体};do while:不管条件漫步满足先执行一次循环(计入总循环次数)公式:do { }while ()例: var index=0; do {document.write("1212");document.write("<br>");index++;if (index>10)break; }while (1)函数具备某些工能的工具四种类型:有返回值:带参数不带参数无返回值:带参数不带参数function hanShuMing(函数名)( ) { alert("函数")}调用函数hanShuMing():2.var xx=function ( ) { 函数体 console.log("xxxxxx") }调用函数体—>函数体的代码才会执行 xx( );内置函数{console.log()alert()Math.radom()prompt()}参数:形式参数:形参没有实际意义代表着即将传进来的实参。实际参数:实参是个实实在在的一个值作用域:概念 ——》变量起作用的范围局部变量:作用域只在定义的函数体里面,在函数外面是不可以使用的。全局变量:自执行函数:自执行函数 解决作用域的问题(防止多个js文件间变量的互相影响)(function () {var num=20;})()返回值:带返回值的函数是是什么?返回值是什么函数就表示的是什么function x(){return}return(值):放到函数中:return有值时:有返回值的函数return没值时:跳出函数 数组概念:有序排列的集合标识数组中元素位置的叫做下标或索引;下标;可以通过下标找到数组中的元素,可以通过下标改变这个位置的值;数组中下标是从0开始的;创建数组:字面量的方式var a=[ ]; var b=[ "悟空 ",“八戒”,“和尚” ]通过类名创建数组:var arr= new Array( )获取数字中的元素:数组名[ 下标 ];var a=["王八","乌龟","甲鱼","鳖"];var b=a[1];a[0]="健权";替换(修改)数组中的元素:数组名[下标]=新值;遍历数组(把数组中的元素逐个读取出来):for循环,forEach;数组1.属性:长度:(数组名:length):数组中有多少个元素->数字是多少2.方法在数组中最后一个位置插入(删除)数据:1.插入数据:数组名+点+push2.删除数组中最后一个;数组名+点+pop;在数组中第一个位置插入(删除)数据:1.插入输入unshift2.删除数据shift翻转数组(把数组中的元素顺序颠倒):reverse:会返回一个新的数组如:var ss=[22,33,77] var ww=ss.reverse( );document.write(ww)document.write("<br>");合并数字;(concat)把两个或多个数组合并成一个新的数组数组排序:(sort)数组+点+函数(a,b,){return a>b;}数组转字符串:1.toString(万能法)2.join(“”)在数组中插入一个元素:splice:公式:数组名+点splice(插入位置(下标),删除元素数量,插入的元素(数据是什么))删除元素:splice公式:数组名+点 splice(删除元素位置,删除元素数量)->返回的数组为删除的那些元素截取数组:slice:公式:数组名+点+slice(开始下标,结束的下标) 字符串属性:长度(lenght)方法:1.字符串转数组:split:2.替换字符串:replace(查询的字符串,替换的字符串)->会得到一个新的变量3.查询字符串:search:(查询的内容)正数和0为查询到第一个数的位置-1为没有查询到4.toLowerCase(转小写):5.toUpperCase(转大写):6.查询某个字符在源字符串的位置(indexOf)7.查询某个位置的字符(charAt)8.截取(slice)9.查询字符串:(match)可用正则正则表达式:input:value:输入框的输入值DOM:获取DOM(html)元素:document.querySelector(点+选择器的名字)DOM获取DOM元素1.document.querySelector("选择器的名字")2.3.4.创建DOM元素删除DOM清空DOM插入文本插入HTML添加事件:鼠标事件.键盘事件.拖拽事件
日期日期对象Date:创建日期对象:获取当前日期;var data=new Date( )new:是通过类名创建的对象Date:是个日期类通过日期类创建一个当前的日期笔记截图获取周日:周日为0;周一为1。。。。。 定时器(单位毫秒)不可以重复使用多个定时器否则定时器的时间会叠加用完要删除定时器删除延迟定时器clearTimeOut(标记)1.延迟执行:var 标记 = setTimeout(执行函数,延迟时间)var bg=document.querySelector(".bg") var setu=setTimeout(function () { bg.style.background="yellow" 清除定时器 clearTimeout(setu);},1000*2);2.重复执行js的引入方式;1.在head中引入(还未在HTML标签就在js中查-》查不到)2.在body结束标签上面引入(可以避免查找不到HTML) DOM1.查询DOM元素:(1)document.querySelector(“选择器的名字”)特点:查找的是第一个元素(2)document.querySelectorAll(“选择器”)特点:查找伪数组(3)ID选择器不需要加#document.getElementById特点:查找ID类选择器(4)通过类选择器 getElementsByClassName("")(5)document.getElementsByTagName("div")特点-伪类数组2.创件DOM的方法(1)document.createElement( "标签的名字")3.DOM的操作(1)把DOM放到父元素里面,公式:父元素+点+appendChild( 2 )删除元素( 3 )替换元素 ( 4 ) 复制元素:cloneNode( )4设置DOM的样式:1.获取编译完成的样式(css里面的样式)getComputedStyle(dom)公式DOM.style5.设置元素的属性(1)dom元素点属性名=属性值查询:dom元素点属性名(2)dom元素点setAttribute(属性名)查询DOM元素点getAttribute(" ")设置属性:setAttribute·读取属性:getAttribute//设置类选择器的名字.className="ttt" 事件1.鼠标事件(1)点击事假:onClickdom.onClick=function(事件对象){}(2)移动事件:onmousemove:鼠标的时间对象pageX:光标在页面X轴的位置pageY: 光标在页面y轴的位置(3)鼠标移入事件onmouseover:先调用onmouseenter:后调用(4)移除的事件onmouseseleave:先调用onmouseout:后调用2.键盘事件(1)onkeydown:(按下键盘触发的事件)dom.onkeydown=function(){}(2)onkeyup:键盘按下抬起时触发(3)onkeypress:按键盘就触发当键盘事件触发的时候会获得一个事件对象(Event)code:区分按下的是哪个键keycode:区分按下的是哪个键3.状态事件input的状态:光标闪烁的状态(onfocus),失去光标的时候(onblue),里面文字发生改变的时候(onchange,)只要用户输入就会改变(oninput)JSON对象:(json是一种数据格式,没有语言限制)数据格式:{"键":值,(由逗号分隔开)"键":[1,2,3,4,],}js里面的JSON对象{由 键:值, 键:值 }XML:(数据格式没有语言限制)很类似与HTML格式 事件监听1.添加监听事件:dom点addEventListener(“事件名”,函数)2.移除监听事件:dom点remoerEventListener("事件名",函数)事件技巧:1.阻止元素的默认行为event.preventDefault()例:去掉a标签刷新页面(跳转)页面的功能表单标签里面的<input type="submit"><input type="rest">2.事件冒泡或捕获事件冒泡:是从内向外触发(默认行为为事件冒泡)事件捕获:从外向内触发Event所有事件的先祖MouseEventkeyboardEventfunction f1(a,b) { //arguments是传入进去的全部参数(参数列表)->数组 console.log(arguments[0]) console.log(a) } f1(3,6,9,10) f1(83,6,9,10,77) f1(13,6,9,10,77,3,77,98)