JavaScript专题

JavaScript
JavaScript
发布日期:   2020-04-05
更新日期:   2020-06-18
文章字数:   3.6k
阅读时长:   14 分
阅读次数:  

前端三要素

  • HLML(结构)：超文本标记语言(Hyper Text Markup Language)，决定网页的结构和内容。
  • CSS(表现)：层叠样式表(Cascading Style Sheets)，设定网页的表现形式。
  • JavaScript(行为)：是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行，用于控制网页的行为。

Native原生JS开发

原生JS开发，也就是让我们按照【ECMAScript】标准的开发方式，简称是ES，特点是所有浏览器都支持，截止到当前博客发布时间，ES标准已发布如下版本：

  • ES3
  • ES4(内容，未正式发布)
  • ES5(全浏览器支持)
  • ES6(常用，当前主流版本：webpack打包成为ES5支持)
  • ES7
  • ES8
  • ES9(草案阶段)
    区别就是逐步增加新特性

TypeScript微软的标准

TypeScript是一种由微软开发的自由和开源的编程语言，它是javaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和

基于类的面向对象编程。由安德斯·海尔斯伯格(C#、Delphi、TypeScript之父；NET创立者)主导。

该语言的特点就是除了具备ES的特性之外还纳入了许多不在标准范围内的新特性，所以会导致很多浏览器不能直接支持TypeScript语法

，需要编译后(编译成JS)才能被浏览器正确执行。

JavaScript框架

  • jQuery
  • Angular
  • React
  • vue
  • Axios

UI框架

  • Ant-Design：阿里巴巴出品，基于React的UI框架
  • ElementUI、iview、ice：饿了么出品，基于Vue的UI框架
  • Bootstrap：Twitter推出的一个用于前端开发的开源工具包
  • AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架

JavaScript 构建工具

  • Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
  • WebPack：模块打包器，主要作用是打包、压缩、合并及排序加载

JS初步

  • 调用JavaScript跟CSS十分相似，可以在文档中，也可以在文档外。
    <title>javascript运用</title>
  //可放在<head></head>里，也可以放在<body></body>里
  <script type="text/javascript">
      alert("hello world !")
  </script>
</head>
<body>
</body>

注意：因为js放在<head>标签中要等js加载并解析后才会显示<body>标签中的内容，为避免延迟，应把js放在<body>中

  • 调用外部js文件
    <head>
 <script src="xxx.js"></script>
</head>

注意：script标签必须成对出现，调用外部JS文件时，其内部出现的JS代码将不会运行

JS语法入门

console.log(xxx) 在浏览器的控制台打印变量！
浏览器调试JS

JS变量

  • 定义变量

    • 变量名：小写字母，大写字母 特殊字符 $ _ 数字
    • 数字不能放在最前面
    • 加英文下的 ;
    • 变量名称尽量避免和函数库有关系
      var abc=1; abc变量名

  • 数据类型

    可以使用styleof()查看其类型

    • js不区分小数和整数，number

1.23e3 //科学计数法 -99 //复数 NaN //not a number Infinity //表示无限大

  • 字符串

    'abc'
    "abc"

  • 布尔值

    true、false

    if(XXX) 0、null、undefined、""(空串)都认为是false

  • 逻辑运算

    && 真真为真

    有两种情况：

    第一种情况：当表达式全为真的时候。返回最后一个表达式的值。

    第二种情况：当表达式中，有一个为假的时候。返回第一个为假的表达式的值。

    || 一个真即为真

    有两种情况：

    第一种情况：当表达式全为假时，返回最后一个表达式的值

    第二种情况：只要有一个表达式为真。返回第一个为真的表达式的值。

    ! 真即假，假即真

  • 比较运算法

    = 赋值
    == 等于(类型不一样，值一样，也会判断为true)
    === 绝对等于(类型一样，值一样)
    这是一个JS的缺陷，坚持不要使用 ==比较
    须知：

  • NaN===NaN，这个与所有的数值都不相等，包括自己

  • 只能通过isNaN(NaN)来判断这个数是否是NaN

  • 避免使用浮点数比较，缺少精度。
    Math.abs(1/3-(1-2/3))<0.0000000001

  • null和undefined(未定义)

    • 数组
      java的数值必须是相同类型的对象，JS中不需要这样
      var arr=[1,2,3,4,5,'hello',null,true]
      new Array(1,2,3,4,5,'hello')
      为保证代码的可读性，尽量使用【】
      取数组小标：如果越界了，就会undefined

    数组长度会随着数组定义自动改变

    • 对象
      对象是大括号，数组是中括号

  • 第一种大括号定义对象方式

var person={
  name: "zhangsan",
  age: 3,
  tags: ['js','java','web','....'],
  fun: function(){
  alert("姓名："+this.name+",年龄:"+this.age);
  }
}

每个属性需要用,隔开，最后一个不需要

  • 第二种object定义对象方式
var obj = new object();
obj.name = "张三";
obj.age = 18;
obj.fun = new function(){
  alert("姓名："+this.name+",年龄:"+this.age);
}
//调用
alert(abj.name);
alert(abj.fun);

  • 严格检查模式
    在ES6中，建议使用Let定义局部变量，Var定义全局变量，在javascript首行添加use strict，即可对代码进行检查，注意必须在第一行

  • 转义字符
    \',\n,\t,\u4e2d,\u#### Unicode字符 \x41 AscII字符

  • 模版字符串

    let name=”zhangsan”
    let age=3;
    let msg="你好，${name}"

变量的运用

<script type="text/javascript">
   var number=100;
   number=number+200;
// prompt弹出框，输入字符赋值给name，""中的字可默认
   var name=prompt("你的名字：","");
   document.write("<h1>"+number+"</h1>");
   document.write("<h1>"+name+"</h1>");
   </script>
  • var,let,const之间的关系
    • var 一般定义全局量
    • let 一般定义局部量
    • const 一般定义常量，在同个作用域定量中不能改变，数组和对象可以改变

为避免变量间的泛滥，可以用方法对变量进行封装
var 变量封装

(
    function fun(){
        var $ = (window.$={});
        $.name="zhangsan";
        var url="www.baidu.com";
        $.getUrl = function(){
            return url;
        };
        $.getName = function(){
            return $.name;
        };
    }.bind(window)());

let 变量封装

{
    let $ = (window.$ = {});
    $.web = "baidu.com";
    let url = "www.baidu.com";
    $.getUrl = function(){
        return url;
    };

}

调用

console.log($.getUrl());
console.log($.getName());

JS条件语句

  • 条件语句，判断密码是否正确
    <script type="text/javascript">
 var pwd=prompt("请输入您的密码：","");
 if(pwd=="123456"){
 document.write("登陆成功！");
 }else{
 document.write("登陆失败！");
 }
 </script>
  • 条件语句，判断数字大小范围
    <script type="text/javascript">
 var number=prompt("请输入一个数字（1～100）：","");
 if(number==50){
 document.write("答对了！");
 }else if(number<50){
 document.write("小了！");
 }else{
     document.write("大了！")
 }
 </script>

循环语句(while、for)

JS中的事件

什么是事件？事件就是电脑输入设备与页面进行交互的响应。我们称之为事件。

常用的事件

  • onload 加载完成事件

    页面加载完成之后，常用于做页面js代码初始化操作

  • onclick 单击事件

    常用于按钮的点击响应操作

  • onblur 失去焦点事件

    常用于输入框失去焦点后验证其输入内容是否合法

  • onchange 内容发生改变事件

    常用于下拉列表和输入框内容发生改变后操作

  • onsubmit 表单提交事件

    常用于表单提交前，验证所有表单项是否合法

onload 加载完成事件

  • 静态加载
        function onloadFun() {
            alert("这是静态页面加载！");
        }
<body onload="onloadFun();">
</body>
  • 动态加载
window.onload = function(){
alerct("这是动态页面加载！");
}

onclick 单击事件

  • 静态点击
function onclickFun() {
            alert("这是静态点击事件！");
        }
<button onclick="onclickFun()">按钮一</button>
  • 动态点击
 //动态点击
        window.onload = function () {
            //1、获取标签对象
            var btnObj = document.getElementById("btn2"); //通过id属性获取标签对象
            //2、通过标签对象.事件名  = function(){}
            btnObj.onclick = function () {
                alert("这是动态点击事件！")
            }
        }
<button id="btn2">按钮二</button>

onblur 失去焦点事件

  • 静态失去焦点
function onblurFun() {
            console.log("静态失去焦点事件");
        }
用户名：<input type="text" onblur="onblurFun()"><br />
  • 动态失去焦点
 //动态onblur
        window.onload = function () {
            var passwordObj = document.getElementById("password");
            passwordObj.onblur = function () {
                console.log("动态失去焦点事件")
            }
        }
密码：<input id="password" type="text"><br />

onchange 内容发生改变事件

  • 静态onchange事件
//静态
        function onchangeFun() {
            alert("静态内容发生改变")
        }
请选择你喜欢的语言：
    <select onchange="onchangeFun();">
        <option>c语言</option>
        <option>JAVA</option>
        <option>javascript</option>
        <option>C#</option>
    </select>
  • 动态onchange事件
//动态
        window.onload = function () {
            var onchangeObj = document.getElementById("onchangetext");
            onchangeObj.onchange = function () {
                alert("动态内容发生改变")
            }
        }
请选择你喜欢的运动项目：
    <select id="onchangetext">
        <option>长跑</option>
        <option>攀岩</option>
        <option>登山</option>
        <option>拳击</option>
    </select>

onsubmit 表单提交事件

  • 静态表单提交
function onsubmitFun() {
            alert("静态表单提交，不合法");
            // 表单数据不合法，return false即表示不提交
            return false;
        }
<form action="http://localhost:8080" method="GET" onsubmit="return onsubmitFun();">
        <input type="submit" value="静态提交">
    </form>
  • 动态表单提交
// 动态
        window.onload = function () {
            //找到标签
            var formObj = document.getElementById("form1");
            alert(formObj);
            //标签.事件 = function(){}
            formObj.onsubmit = function () {
                alert("动态表单提交，不合法");
                return false;
            }
        }
 <form action="http://localhost:8080" method="GET" id="form1">
        <input type="submit" value="动态提交">
    </form>

document对象概念介绍

  • DOM模型

DOM，全称是Document Object Model 文档对象模型。就是把文档中的标签，属性，文本，转换成为对象来管理。

  • Document 对象的理解：

第一点：Document它管理了所有的HTML文档内容。

第二点：Document它是一种树结构的文档，有层级关系。

第三点：Document让我们把所有的标签都对象化。

第四点：我们可以通过document访问所有的标签对象。

  • Document对象中的方法介绍

document.getElementById(elementId)通过标签的id属性查找标签dom对象，elementId是标签的id属性。
document.getElementByName(elementName)通过标签的name属性查找标签dom属性，elementName标签的name属性值。
document.getElementsByTagName(tagname)通过标签名查找标签dom对象。tagname是标签名。
document.createElement(tagName)方法，通过给定的标签名，创建一个标签对象。tagname是要创建的标签名。

验证用户名是否有效和getElementById(Id)方法

实例

// 需求：用户点击校验按钮，获取输入框的值并验证它是否合法
        // 校验规则：必须是字母，数字，下划线组成，并且长度是5到12位
        function onclickFun() {
            // 1、获取操作对象标签对象
            var usernameObj = document.getElementById("username");
          var usernamespanObj = document.getElementById("usernamespan");
            //usernameObj是dom对象,获取输入框内容
            var usernameText = usernameObj.value;
            //验证字符串对象是否符合规则，正则表达式
            var patt = /^\w{5,12}$/;
            //test()方法判断是否合法
            if (patt.test(usernameText)) {
                //innerHTML表示起始标签和结束标签间的内容
                usernamespanObj.innerHTML = "输入正确";
            } else {
                usernamespanObj.innerHTML = "输入有误，请重新输入";
            }
        }
<body>
    用户名：<input type="text" id="username" value="" />
    <span id="usernamespan" style="color: red;"></span>
    <button onclick="onclickFun()">校验</button>
</body>

效果图
elementById

getElementsByName方法

作用：可以获取多个相同name的标签属性
实例

function checkAll() {
            //让所有复选框选中，获取checkbox标签
            // getElementsByName(elementName)根据指定的name属性查询返回多个标签对象集合，这个集合是[object NodeList]
            var hobbys = document.getElementsByName("hobby");
            //alert(hobbys[0].value);  //结果c++
            for (var i = 0; i < hobbys.length; i++) {
                hobbys[i].checked = true;
            }
        }

        function checkNo() {
            //让所有复选框不选中，获取checkbox标签
            // getElementsByName(elementName)根据指定的name属性查询返回多个标签对象集合，这个集合是[object NodeList]
            var hobbys = document.getElementsByName("hobby");
            //alert(hobbys[0].value);  //结果c++
            for (var i = 0; i < hobbys.length; i++) {
                hobbys[i].checked = false;
            }
        }

        function checkReverse() {
            //让所有复选框反选中，获取checkbox标签
            // getElementsByName(elementName)根据指定的name属性查询返回多个标签对象集合，这个集合是[object NodeList]
            var hobbys = document.getElementsByName("hobby");
            //alert(hobbys[0].value);  //结果c++
            for (var i = 0; i < hobbys.length; i++) {
                hobbys[i].checked = !hobbys[i].checked;
            }
        }
<body>
    兴趣爱好：
    <input type="checkbox" name="hobby" value="c++">C++
    <input type="checkbox" name="hobby" value="java">Java
    <input type="checkbox" name="hobby" value="js">javascript
    <br />
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkReverse()">反选</button>
</body>

效果图
elementsByName

getElementsByTagName方法

作用：获取相同的标签对象
实例

function checkAll() {
            // getElementsByTagName(TagName)按照标签名查询并返回集合[object HTMLCollection]
            var inputs = document.getElementsByTagName("input");
            for (let i = 0; i < inputs.length; i++) {
                inputs[i].checked = true;
            }
        }
<body>
    兴趣爱好：
    <input type="checkbox" value="c++">C++
    <input type="checkbox" value="java">Java
    <input type="checkbox" value="js">javascript
    <br />
    <button onclick="checkAll()">全选</button>
</body>

document对象三个查询方法的使用注意事项

  • 注意⚠️
    document对象的三个查询方法，如果有id属性，优先使用getElementById方法进行查询。如果没有id属性，则优先使用getElementsByName方法，如果都没有，最后在按标签名查getElementByTagName。
  • 以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象

节点的常用属性和方法

节点就是标签对象，节点包括空格，标签，文本等
方法
getElementsByTagName()方法，获取当前节点的指定标签名孩子节点
appendChild(oChildNode) 方法，可以添加一个子节点，oChildNode是要添加的孩子节点
属性

  • childNodes属性，获取当前节点的所有子节点
  • firstChild属性，获取当前节点的第一个子节点
  • lastChild属性，获取当前节点的最后一个子节点
  • parentNode属性，获取当前节点的父节点
  • previousSibling属性，获取当前节点的上一个节点
  • className属性，用于获取或设置标签的class属性值
  • innerHTML属性，表示获取/设置起始标签和结束标签中的内容(内容包括标签和文本)
  • innerText属性，表示获取/设置起始标签和结束标签的文本

document对象补充说明

  • createElement(tagName)方法，通过js代码创建标签对象
    window.onload = function () {
          //需求：用js代码来创建html标签，并显示在页面上
          //标签内容：<div>好好学习</div>
          var divObj = document.createElement("div");
          //第一种方法
          var textNodeObj = document.createTextNode("好好学习"); //创建文本节点对象
          divObj.appendChild(textNodeObj);
          //第二种方法
          //divObj.innerHTML = "好好学习"
          document.body.appendChild(divObj);//该语句需要页面执行完，有body标签后再执行才有效，所以需要在window.onload方法下
      }
    效果图
    createElement
文章作者: rep-rebirth
文章链接: https://zhangwenhao.icu/2020/04/05/javascript-zhuan-ti/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 rep-rebirth !
JavaScript
赏
评论
评论
 上一篇
JavaWeb专题 JavaWeb专题
用Java技术来解决相关web互联网领域的技术总和。特别声明本笔记由B站秦疆老师撰写。
2020-04-13 JavaWeb
JavaWeb Tomcat
下一篇 
JAVA基础 JAVA基础
Java是一门面向对象编程语言，具有C++的各种优点，摒弃C++的多继承、指针等概念。
2020-04-05 JAVA
JAVA
  目录