Java教程

JavaScript详解

本文主要是介绍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详解的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航