JavaScript详解

2021/7/10 17:09:31

本文主要是介绍JavaScript详解,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

文章目录

  • JavaScript
    • 简介
      • JS的特点
      • JS的组成
    • HTML与JavaScript的结合方式
      • 行内脚本
      • 内部脚本
      • 外部脚本
    • JavaScript的使用
      • 变量
        • 自动类型转换
        • 数据类型转换函数
        • null & undefined
        • 算术运算
        • 关系运算
        • 逻辑运算
        • 控制语句
      • 常用字符串API
      • 数组
        • 初始化数组的三种方式
        • 数组的常用方法
      • Math数学对象
      • number对象
      • 正则表达式
      • 日期对象
      • 函数
        • 参数对象
        • 构造函数
        • 匿名函数
        • 全局函数
        • 闭包
      • 弹框输出
    • DOM操作
      • DOM访问
      • DOM修改
      • 事件
        • 窗口事件 (Window Events)
        • 表单元素事件 (Form Element Events)
        • 鼠标事件 (Mouse Events)
        • 键盘事件
        • 事件冒泡
        • 事件捕获
      • JSON

JavaScript

简介

  • 虽然java作为前缀,但java和javascript的关系,就像老婆和老婆饼之间的关系,也就是没有任何关系…
  • 网景公司在Netscape2.0首先推出了JavaScript
  • JavaScript 的正式名称是 “ECMAScript”,此标准由 ECMA 组织发展和维护,简称“js”
  • JavaScript 是一种网页编程技术,用来向 HTML 页面添加交互行为
  • JavaScript 是一种基于对象和事件驱动的解释性脚本语言,直接嵌入 HTML 页面,由浏览器解释执行代码,不进行预编译

JS的特点

  • 解释执行:事先不编译,逐行执行
  • 基于对象:内置大量现成对象
  • 常用于:
    • 客户端数据计算
    • 客户端表单合法性验证
    • 浏览器事件的触发
    • 网页特殊显示效果制作

JS的组成

  • ECMAScript:定义核心语法,关键字,运算符,数据类型等系列标准
  • DOM:文档对象模型,将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每一个节点。
  • BOM:浏览器对象模型,对浏览器窗口进行访问和操作。使用 BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
    • 弹出新的浏览器窗口
    • 移动、关闭浏览器窗口以及调整窗口大小
    • 提供 Web 浏览器详细信息的定位对象
    • 提供用户屏幕分辨率详细信息的屏幕对象
    • 对 cookie 的支持
    • IE 扩展了 BOM,加入了 ActiveXObject 类,可以通过 JavaScript 实例化 ActiveX对象,进而实现ajax局部刷新技术

HTML与JavaScript的结合方式

行内脚本

  1. 点击按钮(触发)
  2. 弹框(具体的操作)
<button onclick="alert('弹框测试')">点我一下</button>

内部脚本

  • 使用<script></script>
  • 标准是写在head和body之间(脖子位置),但其实只要写在html文件内部就可以,无论什么位置,<html>外,<p></p>内部,都可以。
<body>
    <script> 
        alert("弹框提示"); 
    </script>
</body>

外部脚本

  1. 在项目根目录下创建一个目录js
  2. 在js目录中创建一个文件,后缀名是.js
  3. 在html页面中,使用:
<script src="js/xx.js"></script>
  • 注意事项:因为是解释性语言,所以以上三种使用脚本的方式没有优先级之分,在上面的优先执行。

JavaScript的使用

变量

  • 因为js是弱类型语言,所以在定义变量的时候,所有的数据类型都是var
    • 声明变量: var x ; var x,y;
  • 数值类型:number
    • 不区分整型数值和浮点型数值
    • 所有数字都采用 64 位浮点格式存储,类似于double 格式
  • 字符串:string
    • 首尾由单引号或双引号括起
  • 布尔类型:
    • 仅有两个值:true和false也代表1和0
    • 实际运算中true=1,false=0

自动类型转换

数字 + 字符串:数字转换为字符串 				 10 + 'a' -> 10a 
数字 + 布尔值:true转换为1,false转换为0 	   true + 5 -> 6 
字符串 + 布尔值:布尔值转换为字符串true或false 	true + 'a' -> truea 
布尔值 + 布尔值:布尔值转换为数值1或0 			true + true -> 2

数据类型转换函数

  • parseInt:强制转换成整数
    • 如果不能转换,则返回 NaN (NaN:代表非数字值的特殊值。该属性用于指示某个值非数字)
    • 例如:parseInt(“6.32”)=6
  • parseFloat:强制转换成浮点数
    • 如果不能转换,则返回 NaN
    • 例如:parseFloat(“6.32”)=6.32
  • typeof:查询数值当前类型,返回 string / number / boolean / object
    • 例如:typeof(“test”+3)==“string”

null & undefined

  • null 在程序中代表“无值”或者“无对象”
    • 可以通过给一个变量赋值 null 来清除变量的内容
  • undefined
    • 声明了变量但从未赋值或者对象属性不存在

算术运算

  • 加(+)、 减(-)、 乘( * ) 、除( / ) 、取余( % )
    • - 可以表示减号,也可以表示负号,如:x = -y
    • +可以表示加法,也可以用于字符串的连接
  • 递增( ++ ) 、递减( – ),同Java
    • i++ 相当于 i=i+1
    • i-- 相当于 i=i-1

关系运算

  • 严格相等:===
    • 类型、数据都相同
  • 非严格相等:!==

逻辑运算

  • 逻辑非(!)、逻辑与(&&)、逻辑或(||)
  • 逻辑运算的操作数均为 boolean 表达式

控制语句

  • 同Java

常用字符串API

  • length:获取字符串的长度(字符串中字符的个数) 属性,没有小括号
  • toUpperCase/toLowerCase:转换大小写
  • charAt(下标):返回某个下标上的字符
  • indexof(字符):查找字符串中字符出现的首次下标
  • lastIndexof(字符):查找字符串中字符最后一次出现的下标
  • substring(开始,结束):截取字符串中一部分(不包含结束)
  • replace(旧的,新的):将字符串中的旧字符替换成新字符
  • split(分割的节点):一个字符串切割成N个小字符串,所以返回的是数组类型
<script>
    // 获取字符串长度
    var str = "hello";
    console.log(str.length);

    // 转换大小写
    var name = "AngierSun";
    console.log("大写:" + name.toUpperCase());
    console.log("小写:" + name.toLowerCase());

    // 返回某个下标上的字符
    var str1 = "javascript网页教程";
    var str2 = str1.charAt(12);             // 下标12上的字符 
    console.log(str2);                      // "教" 
    var str3 = str1.charCodeAt(12);
    console.log(str3);                      // 25945:(汉字“教”在unicode编码中的编号)

    // 根据字符查找对应下标
    var str1 = "javascript网页教程";
    var str2 = str1.indexOf("a");           // a字符在str1中第一次出现的下标
    console.log(str2);
    var str3 = str1.lastIndexOf("a");       // a字符在str1中最后一次出现的下标 
    console.log(str3);

    // 截取字符串
    var str1 = "abcdefgh";
    var str2 = str1.substring(2, 4);
    console.log(str2);                      // cd,从2开始(包含),4结束(不包含)

    // 替换字符
    var str1 = "abcde";
    var str2 = str1.replace("cd", "XXX");
    console.log(str2);                      // abXXXe,将str1中的cd替换成XXX

    // 切割字符串,返回数组类型
    var str1 = "一,二,三,四,五";
    var arr = str1.split(",");              // 将str1以逗号进行分割,分割成N份,返回一个数组 
    console.log("共分割成:" + arr.length + "份");
    console.log("第三份是:" + arr[2]);      // "三"
</script>

数组

初始化数组的三种方式

<script>
    // 第一种 
    var arr1 = new Array();
    arr1[0] = 110;
    arr1[1] = 119;
    arr1[2] = 120;

    // 第二种 
    var arr1 = new Array(10, "a", true);

    // 第三种 
    var arr1 = [10, "a", true];
</script>

数组的常用方法

  • tostring():将数组转换成字符
  • join(连接符号):将数组中的每个元素用连接符号连接成一个新的字符串。
  • concat(新元素):在原数组的末尾添加新元素,生成一个新数组,原数组不变。
  • slice(开始,结束):在数组中截取一部分,形成新的数组。(含开始,不含结束)
  • reverse():将数组反转(倒序)
  • sort():数组排序
    • arr.sort() 字符排序
    • arr.sort(func) 按自定义的func函数进行排序
// 按照数值大小进行排序
function func(a,b) {
	return a-b;
}

Math数学对象

  • Math 对象用于执行数学任务
  • 没有构造函数 Math()
  • 无需创建,直接把 Math 作为对象使用就可以调用其所有属性和方法

在这里插入图片描述

number对象

  • Number.fixed(n):精确到小数点后n位(四舍五入)

正则表达式

  • 此处建议面向百度编程

日期对象

<script>
    var time = new Date();
    console.log(time);                   // Tue Jul 14 2020 11:09:46 GMT+0800 (中国标准时间) 
    var year = time.getFullYear();       // 年 
    var month = time.getMonth() + 1;     // 月(从0开始,11结束,所以国内习惯要+1)
    var day = time.getDate();            // 日 
    var hour = time.getHours();          // 时 
    var m = time.getMinutes();           // 分 
    var s = time.getSeconds();           // 秒 
    var ms = time.getMilliseconds();     // 毫秒(1000毫秒 = 1秒) 
    var timestr = year + "年" + month + "月" + day + "号 " + hour + "点" + mm + "分" + s + "秒" + ms + "毫秒";
    console.log(timestr);
</script>

函数

  • 使用关键字 function 定义函数
function 函数名( 形参列表 ){ 
    // 函数体 
    return 返回值; 
}
  • 函数声明后不会立即执行,会在我们需要的时候调用到。
  • 注意事项:
    • 形参不能带数据类型
    • 分号是用来分隔可执行JavaScript语句的。 由于函数声明不是一个可执行语句,所以不以分号结束。

参数对象

  • 在函数内部,调用参数列表的属性
    • arguments.length:获取参数的个数
    • arguments[1]:获取下标为1的参数

构造函数

  • 函数同样可以通过内置的 JavaScript 函数构造器(Function())定义
var myFunction = new Function("a", "b", "return a * b");

匿名函数

<script>
    var fn = function (a, b) {      // 匿名函数需要用一个变量来接收 
        return a * 10 + b;
    };
    console.log(fn(3, 4));
</script>

全局函数

  • isNaN:检查其参数是否为非数字值
  • eval:转换字符串中的运算
<script>
    var str = "1+3";
    console.log(str);           // 1+3 ,+会认定为一种字符符号,没有加法的作用 
    console.log(eval(str));     // 4 ,使用eval让字符串中的运算符号生效
</script>
  • 转码 & 解码(常用于信息的加密)
    • encodeURI(参数):转码
    • decodeURI(参数):解码

闭包

  • 概念:指有权访问另一个函数作用域中的变量的函数,一般情况就是在一个函数中包含另一个函数。
  • 作用:访问函数内部变量、保持函数在环境中一直存在,不会被垃圾回收机制处理。
  • 简单来讲:就是在函数的局部范围内声明一个封闭的环境,此环境不会被垃圾回收探测到。保证了数据的安全唯一性。
  • 缺点: 使用闭包可以使函数在执行完后不被销毁,保留在内存中,如果大量使用闭包就会造成内存泄露,大量消耗内存。

弹框输出

  • 普通弹框:alert("hello");
  • 控制台日志输出:console.log("谷歌浏览器按F12进入控制台");
  • 页面输出:document.write("<h2>我爱你中国</h2>"); 将<h2>元素输出到<body>中
  • 确认框:confirm("确定删除吗?");
  • 输入框:prompt("请输入姓名:");

DOM操作

  • 在一个html页面中,会使用很多标签来规划制作页面。
  • 每个标签都有它存在的意义,如果我们想要动态的修改某个标签的值。那我们就需要在页面中查找到这个标签元素
  • 如何查找到这个元素是个难题,W3C组织的工程师们,突然看到了一棵大树。我要是想找到某一片叶子,应该怎么做?
  • “顺藤摸瓜”,主树干有分支,每个分支还有许多小分支,只要把这个分支的结构整理清楚,任何一片叶子都不是难事了
  • 叶子和大树的一些启发,工程师们开会讨论就定了这个理论“文档对象模型”
  • 文档对象模型,就是将页面中所有的标签元素都看成是一个对象(一片叶子),主树干定义为根节点(根元素),所有的标签都是从根元素延伸出去的,摸清结构,找到某个标签就不再困难了
    • 在节点树中,顶端节点就是根节点(root)
    • 每个节点都有父节点(根节点除外)
    • 任何一个节点都可以拥有任意数量的子节点
    • 同胞指的是拥有相同父节点的节点

DOM访问

  • 使用 document 对象来调用以下方法:
    • getElementById:通过id属性获得元素节点对象
    • getElementsByName:通过name属性获得元素节点对象集
    • getElementsByTagName:通过标签名称获得元素节点对象集

DOM修改

  • 修改 HTML DOM 意味着许多不同的方面:
    • 改变 HTML 内容
    • 改变 CSS 样式
    • 改变 HTML 属性
    • 创建新的 HTML 元素
    • 删除已有的 HTML 元素
    • 改变事件(处理程序)

事件

  • JS 捕获某个动作而做出的反馈
  • HTML 事件的案例:
    • 当用户点击鼠标时
    • 当网页已加载时
    • 当图片已加载时
    • 当鼠标移动到元素上时
    • 当输入字段被改变时
    • 当 HTML 表单被提交时
    • 当用户触发按键时

窗口事件 (Window Events)

  • 仅在 body 和 frameset 元素中有效。
    • onload 当文档被载入时执行脚本
<body onl oad="test()">
    <script>
        function test() { 
            document.write("哈哈哈哈"); 
        } 
    </script>
</body>

表单元素事件 (Form Element Events)

  • 仅在表单元素中有效。
    • onblur 当元素失去焦点时执行脚本
    • onfocus 当元素获得焦点时执行脚本

鼠标事件 (Mouse Events)

  • onclick 当鼠标被单击时执行脚本
  • ondblclick 当鼠标被双击时执行脚本
  • onmouseout 当鼠标指针移出某元素时执行脚本
  • onmouseover 当鼠标指针悬停于某元素之上时执行脚本

键盘事件

  • onkeydown 按下时执行脚本
  • onkeyup 回弹时执行脚本

事件冒泡

  • 先子后父。事件的触发顺序自内向外

事件捕获

  • 先父后子。事件的触发顺序由外向内

JSON

  • JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
  • 易于阅读和编写,同时也易于机器解析和生成。
// 格式如下:
var json = {
    属性1:值1,
    属性2:值2,
};


这篇关于JavaScript详解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程