03 JavaScript的学习笔记

一、js简介
   1.js是什么
       js是可以嵌入到html中，是基于对象和事件驱动的脚本语言
       特点：
           （1）交互性
           （2）安全性：js不能访问本地磁盘
           （3）跨平台：游览器中都具备js解析器

   2.js作用
       （1）js能动态修改html和css的代码
       （2）能动态的校验数据

   3.js的历史及组成
       ECMAScript BOM（游览器对象模型） DOM（文档对象模型）

   4.js被引入的方式
       （1）内嵌脚本
           <input type="button" value="button" οnclick="alert('xxx')">
       （2）内部脚本
           <script type="text/javascript">
               alert("xxx");
           </script>
       （3）外部脚本
           首先先创建一个js文件
           其次在html中引入
               <script type="text/javascript" src="js文件地址"></script>
       js代码发放在哪？
           放在哪都行？但是在不影响html功能的前提下，越晚加载越好

二、js基本语法
   1.变量
       (1)
       var x=5;
       var y="hello";
       var b=true;
       (2)
       x=5;

   2.原始数据类型
       (1)number:数字类型
       (2)string:字符串类型
       (3)boolean:布尔类型
       (4)null:空类型
       (5)underfind:未定义

       注意：number、boolean、string是伪对象
       类型的转换：
           number\boolean转成string
               toString();
           string\boolean转成number
               parseInt();
               parseFloat();
               boolean不能转
               string可以将数字字符串转换成number，如果“123a3sd5”转成123
           强制转换
               Boolean() 强转成布尔
                   数字强转成布尔非零就是true 零就是false
                   字符串强转成布尔非“”(空字符串)就是true 空字符串""就是false
               Number() 强转成数字
                   布尔转数字 true转成1 false转成0
                   字符串转数字不能强转

   3.引用数据类型
       java: Object obj=new Object();
       js:   var    obj=new Object();
   4.运算符
       （1）赋值运算符
           var x=5;
       （2）算数运算符
           +:遇到字符串变成连接
           -：先把字符串转成数字进行运算
           *：先把字符串转成数字进行运算
           /：先把字符串转成数字进行运算
       （3）逻辑运算符
           && ||
       （4）比较运算符
           < > >= <= ==
           ===:全等：类型与值都要相等
       （5）三元运算符
           3<2>"大于":"小于"
       （6）void运算符
           <a href="javascript:void(0);">xxx</a>
       （7）类型运算符
           typeof:判断数据类型，返回我的数据类型
           instanceof:判断数据类型，是否是某种类型
   5.逻辑语句
       （1）if-else
       （2）switch
       （3）for
       （4）for in
           <script type="text/javascript">
               var arr=[1,3,5,7,"js"];
               for(index in arr){
                   alert(arr[index]);
               }
           </script>
三、js內建对象
   1.Number
       创建方式：
           var myNum=new Number(value);
           var myNum=Number(value);
       属性和方法：
           toString()：转成字符串
           valueOf()：返回一个 Number 对象的基本数字值。
       程序代码：
       <script type="text/javascript">
           var num=new Number(5);
           //alert(typeof num);//object对象
           //alert(typeof num.toString());//string
           alert(typeof num.valueOf());//number
       </script>
   2.Boolean
       创建方式：
           var bool=new Boolean(value);
           var bool=Boolean(value);
       属性和方法：
           toString()：转成字符串
           valueOf()：返回一个Boolean对象的基本值boolean。
   3.String
       创建方式：
           var str=new String(s);
           var str=String(s);
       属性和方法：
           length:字符串的长度
           charAt():返回索引字符
           charCodeAt()：返回索引字符的unicode
           indexOf():返回字符的索引
           lastIndexOf():逆向返回字符的索引
           split():将字符串按照特殊字符切割成数组
           substr():从起始索引号提取字符串中指定数目的字符。
           substring()：提取字符串中两个指定的索引号之间的字符。
           toUpperCase():转大写。
       程序代码：
            <script type="text/javascript">
               // String
               var str=new String("a-b-cd-EFG");
               //alert(str.length);//10
               //alert(str.charAt(4));//c
               //alert(str.charCodeAt(4));//99
               //alert(str.indexOf("c"));//4
               //alert(str.lastIndexOf("E"));//7
               // var arr=str.split("-");
               // for(var i=0;i<arr.length;i++){
               //    alert(arr[i])
               // }
               //alert(str.substr(2,3)); //b-c
               //alert(str.substring(2,3));//b
               alert(str.toUpperCase());
           </script>
   4.Array
       创建方式：
           var arr=new Array();//空数组
           var arr=new Array(size);//创建一个指定长度的数组
           var arr=new Array(element0, element1, ..., elementn);//创建数组直接实例化元素
           var arr=[]://空数组
           var arr=[1,2，"java"]://创建数组直接实例化元素
       属性和方法：
           length:数组长度
           join():把数组的所有元素放入字符串，元素通过指定的分隔符进行分割。
           pop()：删除并返回最后一个元素
           push():向数组的末尾添加一个或多个元素，并返回新的长度
           reverse():反转数组
           sort():排序
       程序代码：
       <script type="text/javascript">
           // Array
           var arr=[3,7,1,"java",'js',true,4];
           //alert(arr.length);//7
           //alert(arr.join("-"));//3-7-1-java-js-true-4
           // alert(arr.pop());//4
           // alert(arr);//3,7,1,java,js,true
           // alert(arr.push("R"));//8
           // alert(arr);//3,7,1,java,js,true,4,R
           // alert(arr.reverse());//4,true,js,java,1,7,3
           // alert(arr.sort());//1,3,4,7,java,js,true
       </script>
   5.Date
       创建方式：
           var myDate=new Date();
           var myDate=new Date(毫秒值);//代表从1970-1-1到现在的一个毫秒值
       属性和方法：
           getFullYear():年
           getMonth():月 0-11
           getDate():日 1-31
           getDay():星期 0-6
           getTime():返回1970年1月1日午夜到指定日期的毫秒数
           toLocalString():获得本地时间格式的字符串
       程序代码：
       <script type="text/javascript">
           // Date
           var date=new Date();
           // alert(date.toString());//Fri Sep 08 2017 16:50:55 GMT+0800
           // alert(date.toLocaleString());//2017/9/8 下午4:51:41
           // alert("year:"+date.getFullYear());//2017
           // alert("month"+date.getMonth());//8
           // alert("date"+date.getDate());//8
           // alert("day"+date.getDay());//5
           // var time1=date.getTime();
           // var time2=1*24*60*60*1000;
           // alert(new Date(time1+time2).toLocaleString());
       </script>
   6.Math
       创建方式：
           注释：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，
           像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。
       属性和方法：
           PI:圆周率π
           abs():绝对值
           ceil():对数进行上舍入
           floor():对数进行下舍入
           pow(x,y):返回x的y次幂
           random():0-1之间的随机数
           round():四舍五入
       程序代码：
       <script type="text/javascript">
           // Math
           // var x="-897";
           // alert(Math.abs(x));
           //var x=12.34;
           // alert(Math.ceil(x));//13
           // alert(Math.floor(x));//12
           // alert(Math.round(x));//12
           var x=12.34;
           var y=2;
           var z=4;
           //alert(Math.pow(y,z));//16
           //alert(Math.random());
       </script>
   7.RegExp
       创建方式：
           var reg=new RegExp(pattern);
           var reg=/^正则规则$/;
       规则的写法：
           [0-9]    :查找任何从 0 至 9 的数字。
           [A-Z]    :查找任何从大写 A 到大写 Z 的字符。
           [a-z]    :查找任何从小写 a 到小写 z 的字符。
           [A-z]    :查找任何从大写 A 到小写 z 的字符。
           \d        :查找数字。
           \D       :查找非数字字符。
           \w       :查找单词字符。
           \W       :查找非单词字符。
           \s       :查找空白字符。
           \S       :查找非空白字符。
           n+       :出现至少一次
           n*       :出现0次或多次
           n?       :出现0次或1次
           {5}       :出现5次
           {2,8}     :出现2-8次
       方法：
           test(str):检索字符串中指定的值。返回 true 或 false。
       需求：
           校验邮箱：
           var email="sdustlcz@163.com";
           var reg=/^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
           reg.test(email);
四、js的函数
   1.js函数定义的方式
       （1）普通方式
           语法：function 函数名(参数列表){函数体}
           示例：
               <script type="text/javascript">
                   function method () {
                       alert("xxxx");
                   }
                   method();
               </script>
       （2）匿名函数
           语法：function(参数列表){函数体}
           示例：
               <script type="text/javascript">
                   var method=function(){
                       alert("yyy");
                   };
                   method();
               </script>
       （3）对象函数
           语法：
               new function(参数1,参数2,...,函数体);
           注意：参数名称必须使用字符串形式，最后一个默认是函数体且函数体需要字符串形式
           示例：
               <script type="text/javascript">
                   var fn=new Function("a","b","alert(a+b)");
                   fn(2,5);
               </script>

   2.函数的参数
       （1）形参没有var去修饰
       （2）形参和实参个数不一定匹配
       （3）arguments对象，是个数字，会将传递的实参进行封装
           <script type="text/javascript">
               function fn(a,b,c){
                   for(var i=0;i<arguments.length;i++){
                       alert(arguments[i]);
                   }
               }
               fn(1,2,4,8);
           </script>

   3.返回值
       （1）在定义函数的时候不必表明是否具有返回值
       （2）返回值仅仅通过return关键字就可以了
       <script type="text/javascript">
           function fn(a,b){
               return a+b;
           }
           alert(fn(2,3));
       </script>
   4.js的全局函数
       （1）编码和解码
           encodeURI() decodeURI()
           encodeURIComponet() decodeURIComponent()
           escape() unescape()
           三者区别：
               （1）进行编码的符号范围不同，实际开发中常使用第一种
       （2）强制转换
               Number()
               String()
               Boolean()
       （3）转成数字
           parseInt()
           parseFloat()
       （4）eval()方法
           将字符串当作脚本来解析运行
           <script type="text/javascript">
               // var str="var a=2;var b=3;alert(a+b)";
               // eval(str);
               function print(str){
                   eval(str);
               }
               print("自定义逻辑")
           </script>
五、js的事件
   事件
   事件源
   响应行为
   1.js的常用事件
       onclick：点击事件
       onchange：域内容被改变的事件
           需求：实现二级联动
           <body>
               <select id="city" >
                   <option value="bj">北京</option>
                   <option value="tj">天津</option>
                   <option value="sh">上海</option>
               </select>

<select id="area" >
                   <option >海淀</option>
                   <option >朝阳</option>
                   <option >东城</option>
               </select>
           </body>
           <script type="text/javascript">
               var select=document.getElementById("city");
               select.οnchange=function(){
                   var optionVal=select.value;
                   switch (optionVal) {
                       case 'bj':
                           var area=document.getElementById("area");
                           area.innerHTML="<option>海淀</option><option>朝阳</option><option>东城</option>"
                           break;
                       case 'tj':
                           var area=document.getElementById("area");
                           area.innerHTML="<option>南开</option><option>西青</option><option>河西</option>"
                           break;
                       case 'sh':
                           var area=document.getElementById("area");
                           area.innerHTML="<option>浦东</option><option>杨浦</option>"
                           break;
                       default:
                           // statements_def
                           alert("error");
                   }
               }
           </script>

       onfocus：获得焦点的事件
       onblur：失去焦点的事件
           需求：当输入框获得焦点的时候，提示输入的内容格式
                  当输入框失去焦点的时候，提示输入有误
           <body>
               <label for="txt">name</label>
               <input type="text" id="txt"><span id="action" ></span>
           </body>
           <script type="text/javascript">
               var tx=document.getElementById("txt");
               txt.οnfοcus=function(){
                   var span=document.getElementById("action");
                   span.innerHTML="用户名格式最小8位";
                   span.style.color="green";
               };
               txt.οnblur=function(){
                   var span=document.getElementById("action");
                   span.innerHTML="对不起格式不正确";
                   span.style.color="red";
               };
           </script>

onmouseover：鼠标悬浮的事件
       onmouseout：鼠标离开的事件
           需求：div元素鼠标移入变为绿色移出恢复
           <style type="text/css">
               #d1{
                   background-color: red;
                   width:200px;
                   height: 200px;
               }
           </style>
           <body>
               <div id="d1"></div>
           </body>
           <script type="text/javascript">
               var div=document.getElementById("d1");
               div.οnmοuseοver=function(){
                   this.style.backgroundColor ="green";
               };
               div.οnmοuseοut=function(){
                   this.style.backgroundColor ="red";
               };
           </script>
       onload：加载完毕的事件
       <span id="span"></span>
       <script type="text/javascript">
           window.οnlοad=function(){
               var span=document.getElementById("span");
                   alert(span);
                   span.innerHTML="hello js";
               }
       </script>
   2.事件的绑定方式
   ·（1）将事件和响应行为都内嵌在html标签中。
       <input type="button" value="button" οnclick="alert('xxx')" />
   （2）将事件内嵌到html中，而响应行为用函数进行封装
           <input type="button" value="button" οnclick="fn()" />
           <script type="text/javascript">
               function fn(){
                   alert("yyy");
               }
           <script>
   （3）将事件和响应行为与HTML标签完全分离
           <input id="btn" type="button" value="button" />
           <script type="text/javascript">
               var btn=document.getElementById("btn");
               btn.onclick = function(){
                   alert("zzz");
               };
           </script>

       ****this关键字
           this经过事件的函数进行传递的是html标签对象
           <input type="button" name="mybtn" value="button123" οnclick="fn(this)">
           <script type="text/javascript">
               function fn(obj){
                   alert(obj.name);
               };
           </script>
   3.阻止事件的默认行为
       IE：window.event.returnValue=false;
       W3c:传递过来的事件对象.preventDefault();
       <script type="text/javascript">
           function fn(e){
               if(e&&e.preventDefault){
                   alert("w3c");
                   e.preventDefault();
               }else{
                   alert("ie");
                   window.event.returnValue=false;
               }
           }
       </script>
   4.阻止事件的默认传播
       IE：window.event.canceBubble=true;
       W3c:传递过来的事件对象.stopPropagation();
六、js的bom
   （1）window对象
           弹框的方法
               提示框:alert();
               确定框:confirm("确认信息");
                   有返回值：如果点击确认返回true，点击取消返回false
                   var res=confrim("你确认要删除吗？");
                   alert(res);
               输入框：prompt("提示信息");
                   有返回值，如果点击确认返回输入框的文本，点击取消返回null
                   var res=prompt("请输入密码");
                   alert(res);
           open方法
               windowopen("url地址");
           定时器：
               setTimeout(函数,毫秒值);
                   <script type="text/javascript">
                       setTimeout(
                           function(){
                               alert("xxx");
                           },
                           3000
                           );
                   </script>
               clearTimeout(定时器的名称);
                   <body>
                       <input type="button" value="button" οnclick="closer()">
                   </body>
                   <script type="text/javascript">
                       var timer;
                       var fn=function(){
                           alert("x");
                           timer=setTimeout(fn,2000);
                       };
                       fn();
                       var closer=function close(){
                           clearTimeout(timer);
                       };
                   </script>
               setInterval(函数，毫秒值);
               clearInterval(定时器名称);
                   <body>
                       <input type="button" value="button" οnclick="closer()">
                   </body>
                   <script type="text/javascript">
                       var timer=setInterval(
                           function(){
                               alert("hello");
                           },
                           2000
                           );
                       var closer=function(){
                           clearInterval(timer);
                       }
                   </script>
               需求;注册成功后5秒钟跳转首页
               <body>
                   恭喜你注册成功，<span id="second" style="color:red;">5</span>秒后跳转到首页，如果不跳转，请<a href="#">点击这里</a>
               </body>
               <script type="text/javascript">
               var time=5;
               var timer;
               timer=setInterval(
                       function(){
                           var second=document.getElementById("second");
                           if(time>=1){
                               second.innerHTML=time;
                               time--;
                           }else{
                               clearInterval(timer);
                               location.href="#";
                           }
                       },
                       1000
                   );
               </script>
   （2）location
       location.href="url地址";
   （3）history
       back();
       forward();
       go();

七、js的dom
   1.理解一下文档对象模型
       html文件加载到内存之后会形成一棵dom树，根据这些节点对象可以进行脚本代码的修改
   2.dom的方法

03 JavaScript的学习笔记相关推荐

JavaScript闭包学习笔记
闭包(closure)是JavaScript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 下面就是我的学习笔记,对于JavaScript初学者应该是很有用的. 一.变量的作用域要理解 ...
javaweb（03） jQuery学习笔记
javaweb(03) jQuery学习笔记 jQuery介绍什么是jQuery jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 ...
Javascript入门学习笔记
JS入门学习笔记目录 1.JS简介 2.组成部分 3.特点 4.作用 5.JS三种添加方式 6.变量 7.数据类型 8.检测数据类型 9.逗号运算符 10.算术运算符 11.关系运算符 12.逻辑运算 ...
Java Web--HTML、CSS、JavaScript详细学习笔记（内含丰富示例代码）
** Java Web–HTML.CSS.JavaScript学习笔记 ** HTML(Hyper Text Markup Language超文本标记语言):控制的是页面的内容,是由标签组成的语言,能 ...
javascript面向对象学习笔记（一）——继承
最近在学习html5,玩了下canvas,发现js中很多的东西都不太记得了.翻了下笔记后发现还是去图书馆逛逛把,到借阅区找了我一直想看的<javascript design patterns&g ...
javascript深入浅出——学习笔记(六种数据类型和隐式转换)
在慕课之前学过JS深入浅出,最近发现很多东西都记不太清楚了,再复习一遍好了,感觉这个课程真的超级棒的,做做笔记,再添加一些学习内容?随时补充课程大纲 1.数据类型 2.表达式和运算符 3.语句 4. ...
JavaScript Reflect 学习笔记
今天我们来学习JavaScript中的反射和ES6的Reflect对象. 什么是反射? 反射机制是指在程序运行期间能够获取自身的信息,比如一个对象能够在运行时就知道自己有哪些属性和方法. 在ES6之前 ...
前端JavaScript的学习笔记
前端知识体系想要成为真正的"互联网Java全栈工程师"还有很长的一段路要走,其中前端是绕不开的一门必修课.本阶段课程的主要目的就是带领Java后台程序员认识前端.了解前端.掌握前 ...
JavaScript DOM 学习笔记（四）
2019独角兽企业重金招聘Python工程师标准>>> 案例:将整个图片库的浏览连接几种安排在图片库主页里,在用户点击某个图片链接时才把相应的图片传送出来. 图片素材: 将图片素材 ...

03 JavaScript的学习笔记

03 JavaScript的学习笔记相关推荐

最新文章

热门文章