如何学"JavaScript"以及真正掌握姿势

JavaScript 专栏收录该内容
0 篇文章 0 订阅

JavaScript个人学习笔记

一, JS基础

1. JS概念

(1) JS作用:

  • HTML与用户没有交互的功能,网页只能看,不能操作。. JavaScript用来制作web页面交互效果,提升用户体验。
    web前端三层来说:
    结构层 HTML : 从语义的角度,描述页面结构
    样式层 CSS : 从审美的角度,美化页面
    行为层 JavaScript : 从交互的角度,提升用户体验
  • HTML当做毛坯房, CSS当做装修, JS当做智能家居

(2) JS组成部分

  • ECMAScript核心: js基本语法,数据类型,语句,函数(方法)…
  • BOM:定义了一组和浏览器相关的方法和接口. 就是控制浏览器的
  • DOM:定义了一组操作文档(HTML)的方法和接口. 操作HTML

2. JS和HTMl的整合方式

(1)方式一

  • 内嵌式 : 通过script标签即可,可以放在html任意位置.
     <!---->
      <script>
      	alert("hello");
      </script>

(2) 方式二

  • 外联式 : 定义一个js文件,扩展名是js , 通过script标签引入
    //js代码
    alert("hello...");

    <!--1. 把js代码定义在一个.js文件里面  
        2. 通过script引入; src属性; js文件路径
       [注意] 如果通过该外联式引入的js,这时script里面的js代码不再执行. 
    	如果定义另一个script会从上往下执行 -->
    <script src=".js文件路径">
    </script>

3. JS常用小功能

  • alert( ) : 弹出警示框
  • console.log( ) : 向控制台打印日志
  • console.warn( ) : 控制台警示框
  • console.error( ) : 控制台错误提示
  • document.writte(); 文档打印. 向页面输出内容. 这个语句 主要就是给用户看的

4. JS基本语法

(1) 变量

  • JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定。 定义变量需要用关键字 ‘var’
    var 变量名 = 值;
      注意:
      	1.var可以省略不写,建议保留
      	2.最后一个分号可以省略,建议保留
      	3.同时定义多个变量可以用","隔开,公用一个‘var’关键字. var c = 45,d='qwe',f='68';

(2) 数据类型

[1] 五种原始原始数据类型
  • number : 整数型, 浮点型
  • boolean : 布尔型
  • String : 字符,字符串
  • Object : 对象类型 如 Date
  • unefined : 未定义类型; 即变量没赋值的状态
[2] typeof操作符
  • 作用: 用来判断变量是什么类型
  • 写法:typeof(变量名) 或 typeof 变量名
  • null与undefined的区别:
    null: 对象类型,已经知道了数据类型,但对象为空。
    undefined:未定义的类型,并不知道是什么数据类型。
[3] 代码实现
  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script type="text/javascript">
        var i = 5;   //整数
        var f = 3.14;  //浮点
        var b = true;  //布尔
        var c = 'a';  //字符串
        var str = "abc";   //字符串
        var d = new Date();  //日期
        var u;   //未定义类型
        var n = null; //空
        document.write("整数:" + typeof(i) + "<br/>");
        document.write("浮点 :" + typeof(f) + "<br/>");
        document.write("布尔:" + typeof(b) + "<br/>");
        document.write("字符:" + typeof(c) + "<br/>");
        document.write("字符串:" + typeof(str) + "<br/>");
        document.write("日期:" + typeof(d) + "<br/>");
        document.write("未定义的类型:" + typeof(u) + "<br/>");
        document.write("null:" + typeof(n) + "<br/>");
    </script>
    </body>
    </html>
[4] 字符串转换成数字类型
  • 全局函数 : 可以在JS任意位置直接使用的函数,不用导入对象,不属于任何对象
  • 转换函数:
    • parseInt( ) : 将一个字符串转成整数,如果一个字符串包含非数字,name就从首数字开始取数字字符,一旦发现非数字字符,马上停止获取内容.如果转换失败,则返回NaN=Not a Number,不是一个数
    • parseFloat( ) : 将一个字符串转成小数,原理同上.
    • isNaN( ) : 转换前判断被转换的字符串是否是一个数字.返回值为boolean.

(3) 运算符

  • 关系运算符 > , < , >= , <=
  • number类型和字符串做 " * “, " - " ,” / "的时候,字符串自动的进行类型转换,前提是 字符串的内容要满足number类型
  • 做除法时, 保留小数
     var i = 2;
      var j = 5; 
      alert(j/i);
  • " == "比较数值, " === "比较数值和类型

      var i = 2;
      var j = "2"; 
      alert(i==j); // ==比较的仅仅是数值, true
      alert(i===j); // ===比较的是数值和类型.false

(4) 语句

  • 基本跟Java一致
  • 不同点 :
[1] 特殊:

if( ),while( )等语句,如果( )里面是 0, null, “”, undefined,( )里面是false.
获取方式如下 :

<script>	
    //0  "" null undefined  ==>  flase
          if(0){
          	//如果 0 是true,
              console.log("true"); //如果 0 是true,其它3个同样处理.
          }else{
         		//如果 0 是false
              console.log("false"); 
          }
  [2] 如果获得具体的数据类型 
  使用常规方法array拿到的是Object, 推荐使用方法如下:
      //js数据类型的获取
          var arry = ["a","b","c"];  //json格式 
          var obj = {"a":"AAA","b":"BBB","c":"CCC"};  //json格式
          var i = 5;
          var str = "测试";
          var date = new Date();
          var flag = true;
          console.log("=========准确获取如下============");
          console.log(getType(arry)); //[object Array]
          console.log(Object.prototype.toString.call(arry));
          console.log(getType(obj));
          console.log(getType(i));
          console.log(getType(str));
          console.log(getType(date)); //[object Date]
          console.log(getType(flag));
  </script>

5. 在浏览器中调试

  • IE,firefox,Google 按 " F12 " 或" ctrl + F12"进行调试

二,盘点数据校验涉及到的知识

1. 函数

  • 有函数名的函数格式
    语法:
      function 函数名(参数列表){
        函数体
      }
      
      注意:
      	1.不管有没有返回值,函数格式是一样的 function 函数名(参数列表){函数体}
      	2.如果有参数,参数不需要加var关键字(不需要加类型)
      	3. JS中函数是没有重载的,后面的会把前面给覆盖掉
  • 匿名函数
 //匿名函数(JQ中大量使用,也可以用常量接收,通常和事件绑定一起用)
      var sum = function(a,b) {
        return a+b;
      }
      console.log(sum(10,20));

2. 获取元素(标签)方法

  • 通过id : document.getElementById(“id”) : 通过id属性找到唯一的元素,如果页面有多个同名id,则得到第1个元素, 一般不写同名id;
  • 通过name属性 : document.getElementsByName(“name”) : 通过name属性得到一组标签,返回一个数组;
  • 通过标签名称 : document.getElementsByTagName(“标签名”) : 通过标签名得到一组标签,返回一个数组. 如 : input;
  • 通过类名 :document.getElementsByClassName(“类名”) : 通过类名得到一组标签,返回一个数组.

3. 点击事件

(1) 方式一 [常用]:

  • 通过标签的事件属性绑定

(2)方式二 :

  • 派发事件(注意:页面加载成功之后才可以派发)
    元素对象.οnclick=function(){}; 元素对象可以通过:document.getElementById(“id值”)来获得;

三,JS事件 [ 重点 ]

1. 重点掌握事件

其它事件查询 w3cschool.

  • onclick : 点击
  • onsubmit : 表单提交
  • onfocus : 获得焦点; onblur( ) : 失去焦点
  • onload : 等页面加载完成 (可以不使用, 直接把script写在下面)
  • onchange : 内容改变

2. 掌握的事件

(1) 和鼠标相关的的事件

  • onmousedown : 某个鼠标按键被按下
  • onmousemove : 鼠标移动
  • onmouseout : 鼠标从某元素移开
  • onmouseover : 鼠标被移到某元素上
  • onmouseup : 某个鼠标按键被松开

(2)和键盘相关的事件

  • onkeydown : 某个键盘的键被按下
  • onkeypress : 某个键盘的键被按下或按住
  • onkeyup : 某个键盘的键被松开

四, JS完成轮播图所涉及的知识点

1. 定时任务

  • setInterval(code,time) 按照指定的周期(以毫秒计)来调用函数或计算表达式
    参数说明: code即执行的代码;
    方式一: 函数名 setInterval(show,3000);
    方式二:函数字符串 setInterval(“show()”,3000);
    time:时间,单位毫秒
    eg: setInterval(“sayHello()”,3000);
    setInterval(sayHello,3000);
  • 示例代码
  <script>
          //每隔1s向控制台打印hello...
      
          //1. 创建定时任务
          setInterval("sayHello()",1000);
      
          //2. 创建打印hello...的函数
          function  sayHello() {
              console.log("hello...");
          }
          
      </script>

2. 操作图片

  • 改变src的值
  • 步骤 :
    1. 获得标签
    2. 通过标签拿到src(路径)进行改变
        //1. 获得img标签对象
              var imgEle =  document.getElementById("imgId");
              //2. 改变src值
              imgEle.src = "../img/banner_1.jpg"; //改变后的路径

五,BOM总结

1. 概述:

  • Browser Object Model,为了便于对浏览器的操作,JavaScript封装了对浏览器中各个对象,使得开发者可以方便的操作浏览器中的各个对象
    在这里插入图片描述

2. BOM的5个对象

2.1 window : 窗体对象

在这里插入图片描述

2.2 navigator : 浏览器对象

在这里插入图片描述

2.3 screen : 屏幕对象

在这里插入图片描述

2.4 history : 历史对象

在这里插入图片描述

2.5 location :当前路径信息

在这里插入图片描述

location.href; 获得路径

location.href = “http://www.baidu.com”; 设置路径,跳转到百度页面

六,盘点表单校验知识

1. JS正则表达式

(1) 概述:

正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑。

说白了: 正则表达式用来校验字符串是否满足一定的规则的.

(2) 表达式的创建

[1] 方式一 :
    var reg = new RegExp("正则表达式");
    //说明:正则表达式在JS中是一个对象。Regular Expression
[2] 方式二 :
  var reg = /正则表达式/;
    //说明:以/开头,以/结尾,中间是正则表达式
[3] 两种方式区别 :
  1. 在js中,正则表达式的两种声明方式对于“\d、\D”之类的匹配模式中,前者需要转义,而后者无需转义
  2. 前者支持字符串拼接,支持变量,更加灵活;后者对于固定的表达式,书写起来方便快捷、更加直观。

(3) 匹配模式

  • 默认情况下, 正则表达式不忽略大小写的. 可以通过 i 改成忽略大小写模式

(4) 正则表达式中常用的方法

  • boolean test(“字符串”)
    • 如果正则表达式匹配字符串,返回true,否则返回false

(5) 常见正则表达式规则

在这里插入图片描述

  • 代码实现:
  // 手机号码: 以1开头, 第二位是3,4,5,6,7,8,9的11位数字
          //var reg  =/^1[3456789]\d{9}$/i; //忽略大小写的
          var reg  =/^1[3456789]\d{9}$/; //不忽略大小写的
          var str = "188245899";
          alert(reg.test(str));

2. innerHTML : 向一块标签区域插入html

  • 支持html标签;
  • 会把之前的内容覆盖
 <body>
    
        <span id="spanId">世界</span>
        <br/>
        <input type="button" value="innerHTML" onclick="writteIn()"/>
    
    </body>
    <script>
        //向span标签里面插入hello...
        // 标签对象.innerHTMl = "html字符串";
        //1. 支持标签的(解析标签)
        //2. 会把之前的内容给覆盖
        function writteIn() {
            //1.获得span标签对象
            var spanEle = document.getElementById("spanId");
            //2. 调用innerHTMl属性
            spanEle.innerHTML = "<font color='red'>hello...</font><img src='img/tu.png'/>";
        }
    </script>
  • 思路分析:
    1. 给输入框设置onfocus事件 : onfocus = “函数名1( )”
    2. 创建函数1给出提示
    3. 给输入框设置失去焦点事件 : onblur = “函数名2( )”
    4. 创建函数2检验数据
    5. 函数2逻辑 :
      • 获取输入框的值
      • 使用正则表达式进行校验
      • 不符合给出警告框

七,盘点JS控制复选框的全选和全不选知识

1. DOM

(1) 概念 :

  • 文档对象模型(Document Object Model,简称DOM),可以让用户对网页中的元素(标签)进行操作.
    说白了就是使用dom里面封装了API操作HTML的标签.

(2) JS里面的DOM编程

  • 每个HTML页面在被浏览器解析的时候都会在内存中创建一棵DOM树,我们通过编写JS代码就可以访问这棵树上任何一个节点,并且对节点进行操作。通过 DOM模型,可以访问所有的 HTML 元素,连同它们所包含的文本和属性。可以对其中的内容进行修改和删除,同时也可以创建新的元素。新创建的元素对象,要挂到DOM树上才可以在网页上显示出来。

在这里插入图片描述
整个文档是一个文档节点
每个 HTML 元素(标签)是元素(标签)节点
HTML 元素内的文本是文本节点
每个 属性是属性节点
注释是注释节点

  • 一切皆节点,一切皆对象

(3) dom定义的方法

在这里插入图片描述

(4) 查找节点的方法

  • document.getElementById(“id”) : 通过id属性找到唯一的元素,如果页面有多个同名id,则得到第1个元素, 一般不写同名id;
  • document.getElementsByName(“name”) : 通过name属性得到一组标签,返回一个数组;
  • document.getElementsByTagName(“标签名”) : 通过标签名得到一组标签,返回一个数组. 如 : input;
  • document.getElementsByClassName(“类名”) : 通过类名得到一组标签,返回一个数组.
  • 示例代码 :
     <script>
          //1. 根据id来获得标签节点(对象)
          var inputEle =  document.getElementById("inputId");
      
          //2. 根据标签名获得标签节点数组
          var inputEles =  document.getElementsByTagName("input");
          //console.log("input标签的数量="+inputEles.length);
          for(var i = 0; i < inputEles.length;i++){
              inputEles[i];
          }
      
          //3.根据类名来获得标签节点数组
          var inputEles2  = document.getElementsByClassName("inputClass");
          console.log(inputEles2.length);
      
      </script>

(5) 创建和修改元素的方法

  • document.createElement(“标签名”) : 在文档上创建一个元素对象
  • 元素对象.setAttribute(“属性名”,“属性值”) : 给元素添加一个属性名和属性值如果属性名不存在则是添加属性,存在则修改属性值
  • document.createTextNode(“文本内容”) : 在文档上创建一个文本节点

(6) 挂在dom树的方法

  • 父元素.appendChild(子元素) : 将元素追加成父元素的最胡一个元素
  • 父元素.removeChild(子元素) : 通过父元素删除一个子元素
  • 元素.remove( ) : 元素删除本身

2. 思路分析

  • 创建页面
  • 给 全选 的复选框设置点击事件
  • 创建 全选函数( ) 响应这个事件
  • 全选函数( ) 逻辑:
    1. 获得其他复选框(除全选框) 元素数组
    2. 遍历元素数组,
    3. 获得全选框元素的选择状态,
    4. 将遍历到的数组元素状态变成全选框元素的选择状态

八,JS控制表格的隔行换色

1. 使用JS操作CSS样式

(1) 操作CSS属性名上的区别

在这里插入图片描述

(2) 操作CSS样式

  • 方式一
    标签对象.style.样式名 = “样式值”
    注: 每条语句只能修改一个样式
  • 方式二
    元素对象.className = “样式类名”
    注:每条语句修改一批样式

(3) 代码实现:

   <script>
        //1. 获得所有的行标签数组
        var trELes =  document.getElementsByTagName("tr");
    
        //2. 遍历行标签数组,
        for(var i  = 0; i < trELes.length; i++){
            //判断是奇数行还是偶数行,
            if (i % 2 == 0){
                // 给奇数行设置一个背景色,
                trELes[i].style.backgroundColor = "#4F81BD";
            }else{
                // 给偶数行也设置一个另外背景色
                trELes[i].style.backgroundColor = "#FFB6C1";
            }
        }
    
    </script>

九,JS控制二级联动

1. JS内置对象之数组 [重点]

(1) 创建数组的格式

  • new Array( ) : 说明0个长度的数组
  • new Array(5) : 创建5个长度的数组
  • new Array(2,4,10,6,41) : 指定每个元素创建数组
  • [4,3,20,6] : 使用中括号指定每个元素

(2) Js数组特点

  1. 数组里面可以存放不同的类型的值(和Java不一样)
  2. 数组长度可变
  3. 数组中是有方法的
    • concat( ) : 连接两个或更多数组,并返回结果
    • reverse( ) : 将数组进行反转
    • join(separtor) : 与split功能相反,将数组通过分隔符,拼接成一个字符串

代码实现:

  <script>
        /**
         * 数组的特点:
         * 1. 数组里面可以存放不同类型的数据
         * 2. 数组没有越界概念的, 长度可变的
         * 3. 数组是有方法的
         */
    
        //定义了一个长度为5的数组, 并且赋值了
    
        var array = [1,2,3,4,"哈哈哈"];
    
        console.log(array.length); //5
    
       // console.log(array[0]); //1
       // console.log(array[4]); //哈哈哈
    
        array[8] = 8888; // var array = [1,2,3,4,"哈哈哈",undefined,undefined,undefined,8888]
    
        console.log(array.length);// 9
    
        //console.log(array[8]);//在java里面数组越界, 在js里面undefined
    
        /*for(var i = 0; i <  array.length;i++){
            console.log("array["+i+"]="+array[i]);
        }*/
    
    </script>

4.二维数组

<script>
        //定义了一个长度为3的数组
        var citys = new Array(3);
    
        citys[0] = ["深圳","惠州","东莞","广州"];
        citys[1] = ["武汉","黄冈","鄂州","黄石"];
        citys[2] = ["济南","青岛","威海","日照","烟台"];
    
    
        //遍历
        for(var i = 0; i < citys.length;i++){
            var cityArray =  citys[i];
            console.log("cityArray="+cityArray);
    
            for(var j = 0; j  < cityArray.length;j++){
                console.log("city="+cityArray[j]);
            }
    
        }
    
        var citys02 = [["深圳","惠州","东莞","广州"],["武汉","黄冈","鄂州","黄石"],["济南","青岛","威海","日照","烟台"]];
    
    </script>

2. JS内置对象之date

(1) 日期对象的创建

 var 变量名 =new Date();  // Date 对象会自动把当前日期和时间保存为其初始值。

(2) 日期对象常见的方法

  • getFullYear() : 从Date对象以4位数字返回年份;
  • getMonth() : 从Date对象返回月份(0~11)
  • getDate() : 从Date对象返回一个月中的某一天(1~31)
  • getDay() : 从Date对象返回一周中的某一天(0~6). 其中: 0表示周日 1~6表示周一到周六
  • getHours() : 返回Date对象的小时(0~23)
  • getMinutes() : 返回Date对象的分钟(0~59)
  • getSeconds() : 返回Date对象的秒数(0~59)
  • getMilliseconds() : 返回Date对象的毫秒(0~999)
  • getTime() : 返回从1970年1月1日至今的毫秒数. 类似于Java中的System.currentTimeMills()
  • tolocaleString() : 根据本地时间格式, 把Date对象转化成字符串

3. 思路分析

  1. 创建页面, 初始化数据
   var cityArray = new Array(3);
    cityArray[0] = ["深圳", "广州", "惠州", "东莞"];
    cityArray[1] = ["武汉", "鄂州", "黄冈", "黄石", "荆州"];
    cityArray[2] = ["济南", "青岛", "日照"];
  1. 给省份的select设置onchange事件
    <select onchange="refreshCity()"></select>
  1. 创建refreshCity()函数
    function refreshCity(){
      	//1. 获得省份的值
      	//2. 根据省份的值来获得当前省份下的城市数据  ["深圳", "广州", "惠州", "东莞"]
      	//3. 遍历城市数据     ["深圳", "广州", "惠州", "东莞"]
      	//4. 把每一个城市创建成 <option>深圳</option>
      	//5. 把创建好的option添加到城市的select里面
    }

  1. 代码实现
 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        籍贯: <select id="provinceId" onchange="refreshCity(this)">
                    <option value="-1">-请选择-</option>
                    <option value="0">广东</option>
                    <option value="1">湖北</option>
                    <option value="2">山东</option>
              </select>
              <select id="cityId">
                  <option>-请选择-</option>
              </select>
    </body>
    
    <script>
        //初始化数据
        var citys = new Array(3);
        citys[0] = ["深圳","惠州","东莞","广州"];
        citys[1] = ["武汉","黄冈","鄂州","黄石"];
        citys[2] = ["济南","青岛","威海","日照","烟台"];
    
        //创建refreshCity()的函数响应省份的slect内容改变事件
        function refreshCity(obj) {
            //0 获得城市的select
            var citySelect =  document.getElementById("cityId");
    
            // 清空城市的select里面之前的option innerHTML;
            citySelect.innerHTML  = "<option>-请选择-</option>";
    
            //1. 获得选择的省份的值
            var pValue =  obj.value;
            //2. 根据省份的值 获得当前省份下面的城市的数据  ["深圳","惠州","东莞","广州"]
            if (pValue > -1){ //eg: 如果选择的是广东, pValue = 0
               var cityArray =   citys[pValue];//["深圳","惠州","东莞","广州"]
                //3. 遍历城市的数据(数组)
                for(var i = 0; i < cityArray.length;i++){
                    //4. 把每一个城市, 创建成 <option>深圳</option>
                    var cityValue =  cityArray[i]; //获得每一个城市的数据 eg: 深圳
                    //a . 创建option节点 <option></option>
                     var opEle =   document.createElement("option");
                     //b 创建文本节点  深圳
                     var textNode =   document.createTextNode(cityValue);
                     //c. 把文本节点添加到option节点  <option>深圳</option>
                    opEle.appendChild(textNode);
                    //5. 把创建好的option添加到城市的select里面
                    citySelect.appendChild(opEle);
    
                }
            }
        }
    
    </script>
    </html>
    

十,电子时钟

1. 知识点

(1) 定时任务

    setInterval(code, time);

(2) 日期对象

(3) innerHTML

2. 代码实现

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <span id="spanId"></span>
    </body>
    <script>
        var SpanEle = document.getElementById("spanId");
        //1.设置定时任务
        setInterval("printSystemTime()",1000);
        //
    
        function  printSystemTime(){
            //1.获得当前时间
            //2.把时间字符串插入到span里面
            var mydate = new Date();
            SpanEle.innerHTML=mydate.toLocaleString();
            //SpanEle.innerHTML=mydate.toTimeString()
        }
    </script>
    </html>



  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值