JavaScript基础

最新推荐文章于 2022-03-26 15:21:20 发布
最新推荐文章于 2022-03-26 15:21:20 发布
阅读量486 收藏 2
点赞数
分类专栏： 前端 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bm1998/article/details/97215994
版权

文章目录

1. JavaScript 的概念

JavaScript 是一门客户端脚本语言

客户端就是运行在客户端浏览器中的

脚本语言就是不需要编译，直接就可以被解析执行的语言

2. JavaScript 的功能

  • 可以来增强用户和 HTML 页面的交互过程

  • 可以来控制 HTML 元素，让页面有一些动态的效果，增强用户的体验

3. JavaScript 发展史

  1. 1992年，Nombase 公司，开发出第一门客户端脚本语言，专门用于表单的校验，可以防止用户非法数据的提交，增强用户的体验。命名为：C – ，但这门语言当时并没有多少人使用。后来更名为：ScriptEase。
  2. 1995年，Netscape (网景)公司，借鉴了 C-- 语言的思想，开发了一门客户端脚本语言：LiveScript。后来，请来 SUN 公司的专家，修改 LiveScript，命名为 JavaScript。
  3. 1996年，微软抄袭 JavaScript 开发出 JScript 语言。
  4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，统一了所有客户端脚本语言的编码方式。

4. JavaScript 语言的构成

JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

5. ECMAScript：客户端脚本语言的标准

5.1 基本语法

5.1.1 JavaScript 与 HTML 的结合方式

  1. 内部 JS：在 html 中定义 <script>，标签体内容就是 js 代码
  2. 外部 JS：在 html 中定义 <script>，通过 src 属性引入外部的 js 文件

注意：

  1. <script> 可以定义在 html 页面的任何地方。但是定义的位置会影响执行顺序。
  2. <script> 可以定义多个。

5.1.2 注释

  1. 单行注释：

    // 单行注释

  2. 多行注释：

    /**
 * 多行注释
 */

5.1.3 变量

  1. JavaScript 是弱类型语言

    • 强类型：在开辟变量存储空间时，定义了空间将来存储数据的数据类型，只能存储固定类型的数据。
    • 弱类型：在开辟变量存储空间时，不定义空间将来存储数据的数据类型，可以存储任意类型的数据。

  2. 创建变量

    var 变量名 = 变量值;

  3. typeof 运算符：获取变量的类型

    typeof(变量名)

    注意：null 获取变量的类型是 object

5.1.4 数据类型

  1. 原始数据类型

    1. number：数字

      // 整数
var num1 = 1;
// 小数
var num2 = 1.5;
// NaN
var num3 = NaN;

    2. string：字符串

      var str1 = "abc";
var str2 = 'def';

    3. boolean：布尔

      var flag1 = true;
var flag2 = false;

    4. null：一个对象为空的占位符

      var obj = null;

    5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为 undefined。

      var obj1 = undefined;
// 等效于下面这条语句
var obj2;

      注意：null == undefined 会返回 true，因为它们是类似的值；但 null === undefined 会返回false，因为它们是不同类型的值。

      document.write((undefined == null)+"<br>");// true
document.write((undefined === null)+"<br>");// flase

  2. 引用数据类型：对象

5.1.5 运算符

  1. 算术运算符

    运算符描述
    +加法（正号）
    -减法（负号）
    *乘法
    /除法
    %取模
    ++自增
    –自减

  2. 赋值运算符

    运算符例子等同于
    =x=y
    +=x+=yx=x+y
    -=x-=yx=x-y
    *=x*=yx=x*y
    /=x/=yx=x/y
    %=x%=yx=x%y

  3. 比较运算符

    运算符描述
    ==等于
    ===绝对等于（值和类型均相等）
    !=不等于
    !==不绝对等于（值和类型有一个不相等，或两个都不相等）
    >大于
    <小于
    >=大于或等于
    <=小于或等于

  4. 逻辑运算符

    运算符描述
    &&与
    ||或
    !非

  5. 条件运算符

    语法格式：

    variablename=(condition)?value1:value2;

    判断 condition 的值，如果是 true 则取值 value1，如果是 false 则取值 value2

5.1.6 自动类型转换

在 JS 中，如果运算数不是运算符所要求的类型，那么 JS 引擎会自动的将运算数进行类型转换。

  1. string 转 number

    如果字面值是数字，按照字面值转换。如果字面值不是数字，则转为NaN

    var a = +"123";
var b = +"abc";
document.write(a+"<br>");// 123
document.write(b+"<br>");// NaN

  2. boolean 转 number

    true 转为 1，false 转为 0

    var flag1 = +true;
var flag2 = +false;
document.write(flag1+"<br>");// 1
document.write(flag2+"<br>");// 0

  3. null 转 number

    var obj1 = +null;
document.write(obj1+"<br>");// 0

  4. undefined 转 number

    var obj2 = +undefined;
document.write(obj2+"<br>");// NaN

  5. 其他类型转 boolean：

    1. number： 0 或 NaN 为 false，其他为 true
    2. string：除了空字符串("")，其他都是 true
    3. null & undefined：都是 false
    4. 对象：所有对象都为 true
    var obj1 = "abc";
if(obj1.length > 0){
	alert(123);
}
//js中可以这样定义，简化书写。
if(obj1){
	alert(123);
}

var obj2 = new Date();
if(obj2 != null){
	alert(124);
}
//js中可以这样定义，简化书写。
if(obj2){
	alert(124);
}

5.1.7 流程控制语句

  1. if…else…
  2. switch（在 JS 中,switch 语句可以接受任意的原始数据类型）
  3. while
  4. do…while
  5. for

5.1.8 练习九九乘法表

  1. 效果展示

在这里插入图片描述

  1. 编码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            margin: auto;
        }
        td{
            border: 1px solid;
        }
    </style>
    <script>
        document.write("<table>");
        for (var i = 1; i < 10; i++) {
            document.write("<tr>");
            for (var j = 1; j <= i ; j++) {
                document.write("<td>");
                document.write(j+"*"+i+"="+i*j+"&nbsp;&nbsp;&nbsp;");
                document.write("</td>");
            }
            document.write("</tr>");
        }
        document.write("</table>");
    </script>
</head>
<body>
    
</body>
</html>

5.2 基本对象

5.2.1 Function：函数对象

  1. 函数定义

    1. 构造函数定义（不推荐使用）

      var myFunction = new Function("a","b","return a*b");
var x = myFunction(2,4);

    2. 函数表达式定义

      var myFunction = function (a,b) {
    return a*b;
};
var x = myFunction(2,4);

    3. 函数声明定义

      function myFuction(a,b) {
	return a*b;
}
var x = myFuction(2,4);

  2. 属性

    arguments.length：返回形参的个数

  3. 特点

    1. 函数定义时，形参的类型和返回值类型都可以不写

    2. 定义名称、参数相同的函数，会覆盖前面那个函数

      function myFuction(a,b) {
    return a;
}
function myFuction(a,b) {
    return a*b;
}
document.write(myFuction(3,4));// 12

    3. 函数的调用只与函数的名称有关，实参和形参不一样也能执行

      function myFuction(a,b) {
    return a;
}
var w = myFuction();// undefined
var x = myFuction(2);// 2
var y= myFuction(2,3);// 2
var z = myFuction(2,3,4);// 2

    4. 在函数声明中有一个隐藏的内置对象（数组）arguments，封装所有的实际参数。

      // 求任意个数的数的和
function add() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}
document.write(add(2,4,7));// 13

5.2.2 Array：数组对象

  1. 创建数组

    1. 常规方式

      // 不指定数组长度
var arr1 = new Array();
arr1[0] = 1;
arr1[1] = 2;
// 指定数组长度
var arr1 = new Array(2);
arr1[0] = 1;
arr1[1] = 2;

    2. 简洁方式

      var arr3 = new Array(1,2);

    3. 字面方式

      var arr4 = [1,2];

  2. 属性

    length：数组的长度

  3. 方法

    1. join(参数)：将数组中的元素按照指定的分隔符拼接为字符串，默认为逗号，可传入参数作为分隔符。

      var arr = new Array(1,2,3);
document.write(arr.join());// 1,2,3

    2. push()：向数组的末尾添加一个或更多元素，并返回新的长度。

      var arr = new Array(1,2,3);
arr.push(4,5,6);
document.write(arr);// 1,2,3,4,5,6

  4. 特点

    1. JS 中，数组元素的类型可变的。

      var arr = [1,"abc",true];

    2. JS 中，数组长度可变的。

      var arr = new Array(2);
arr[0] = 1;
arr[1] = 2;
arr[10] = 3;
document.write(arr.length);// 11

5.2.3 Boolean

5.2.4 Date：日期对象

  1. 创建 Date 对象

    var date = new Date();

  2. 方法

    1. toLocaleString()：返回当前date对象对应的时间本地字符串格式

      var date = new Date();
document.write(date.toLocaleString());// 2019/7/24 下午4:13:45

    2. getTime()：获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差。

      var date = new Date();
document.write(date.getTime()+"<br>")// 1563956231727

5.2.5 Math：数学对象

  1. 创建

    Math对象不用创建，直接使用。

  2. 方法

    1. random()：返回 0 ~ 1 之间的随机数。 （含0不含1）

      document.write(Math.random());// 0.7376054211737

    2. round(x)：把数四舍五入为最接近的整数

      document.write(Math.round(3.14));// 3
document.write(Math.round(-3.14));// -3

    3. ceil(x)：对数进行上舍入。即大于该数的最小整数。

      document.write(Math.ceil(3.14));// 4
document.write(Math.ceil(-3.14));// -3

    4. floor(x)：对数进行下舍入。即小于该数的最大整数。

      document.write(Math.floor(3.14));// 3
document.write(Math.floor(-3.14));// -4

  3. 属性

    document.write(Math.PI);// 3.141592653589793

5.2.6 Number

5.2.7 String

5.2.8 RegExp：正则表达式对象

  1. 正则表达式的概念

    定义字符串的组成规则。

  2. 正则表达式的使用

    1. 单个字符

      • [abc]：查找方括号之间的任何字符。
      • [0-9]：查找任何从 0 至 9 的数字。
      • [a-z]：查找任何从小写 a 到小写 z 的字符。
      • [A-Z]：查找任何从大写 A 到大写 Z 的字符。
      • \d：单个数字字符 0-9
      • \w：用于查找单词字符。（单词字符包括：a-z、A-Z、0-9，以及下划线, 包含 _ (下划线) 字符。）

    2. 量词符号

      {m,n}：表示 m <= 数量 <= n
      m 如果缺省：{,n}：最多n次
      n 如果缺省：{m,}：最少m次

    3. 开始结束符号

      • ^：开始
      • $：结束

  3. 正则表达式对象的创建

    var reg = new RegExp("正则表达式");
// 或更简单的方法
var reg = /正则表达式/;

  4. 正则表达式对象的方法

    1. test(参数)：验证指定的字符串是否符合正则定义的规范

  5. 正则表达式练习

    // 要求用户名为 6-10 个单词字符
var reg = /^\w{6,10}$/;
var username1 = "ZhangSan";
var username2 = "LiSi";
var username3 = "WangWu123";
var username4 = "小明12345";
document.write(reg.test(username1)+"<br>");// true
document.write(reg.test(username2)+"<br>");// false
document.write(reg.test(username3)+"<br>");// true
document.write(reg.test(username4)+"<br>");// false

5.2.9 Global：全局对象

  1. 特点

    Global 中封装的方法不需要对象就可以直接调用。

  2. 方法

    1. URL 编码的概念

      在浏览器中访问，做数据传输时需要通过 HTTP 协议，而协议不支持中文数据，所以中文数据要发送到服务端，就需要先进行转码，转码通常采用 URL 编码。

      注意：如果采用 GBK 编码，那么 1 个汉字转成 2 个字节；

      ​ 如果采用 UTF-8 编码，那么 1 个汉字转成 3 个字节

      ​ 1 个字节对应 1 个 % 加 两个十六进制数

    2. encodeURI()：URL 编码

      var encode = encodeURI("https://www.baidu.com/s?ie=UTF-8&wd=数据结构");
document.write(encode);

      编码后：

      https://www.baidu.com/s?ie=UTF-8&wd=%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84

    3. decodeURI()：URL 解码

      var decode = decodeURI("https://www.baidu.com/s?ie=UTF-8&wd=%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84");
document.write(decode);

      解码后：

      https://www.baidu.com/s?ie=UTF-8&wd=数据结构

    4. encodeURIComponent()：URL 编码，编码的字符更多

      var encode = encodeURIComponent("https://www.baidu.com/s?ie=UTF-8&wd=数据结构");
document.write(encode);

      编码后：

      https%3A%2F%2Fwww.baidu.com%2Fs%3Fie%3DUTF-8%26wd%3D%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84

    5. decodeURIComponent()：URL 解码，解码的字符更多

      var decode = decodeURIComponent("https%3A%2F%2Fwww.baidu.com%2Fs%3Fie%3DUTF-8%26wd%3D%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84");
document.write(decode);

      解码后：

      https://www.baidu.com/s?ie=UTF-8&wd=数据结构

    6. parseInt()：将字符串转为数字（逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number）

      var str1 = "123"
var str2 = "12a3";
var str3 = "a123";
document.write(parseInt(str1)+"<br>");// 123
document.write(parseInt(str2)+"<br>");// 12
document.write(parseInt(str3)+"<br>");// NaN

    7. isNaN()：判断一个值是否是 NaN

      var a = NaN;
// NaN 参与的 == 比较全部问 false
document.write(a == NaN);// false
document.write(isNaN(a));// true

    8. eval()：计算 JavaScript 字符串，并把它作为脚本代码来执行。

      var jscode = "alert(123)";
eval(jscode);// 执行 alert(123)
bm1998
关注
专栏目录
快速学习ECMAScript6
10-06
非常简洁快速学习ECMAScript（JavaScript）的一本手册，没有漫长的讲解，只有关键的示例和说明，简单易学，看着不头疼……
ECMAScript的学习（一）
babe的博客
09-08 321
初级入门Q&amp;amp;amp;amp;A 整理的一些问题 question answer ECMAScript和js的关系 前者是后者的规格，后者是前者的其中一种实现（ECMAScript 方言还有Jscript 和ActionScript）。日常场合这两个词是可以互换。 node是js的什么 是 JavaScript 的服务器运行环境（runtime）。 let...
0.ECMAScript 6 简介
awkticu3808的博客
01-16 354
ECMAScript 6简介ECMAScript 6 简介ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ECMAScript 和 JavaScript 的关系一个常见的问题是，ECMAScript 和 Jav...
ECMAScript的一些学习网站
czq7511的博客
09-04 699
1、ECMAScript 6（2015） 入门：http://es6.ruanyifeng.com/#docs/intro 2、ECMAScript5中文手册： http://lzw.me/pages/ecmascript/#0
ECMAScript学习（一）基础
WeiAiGeWangFeiYuQing的博客
11-19 297
目录变量提升let定义变量let定义变量的特点1. 在let声明的前面访问不到(暂时性死区)（必须声明之后再使用）2. 不可以重复声明3. 块级作用域 变量提升 var关键字定义变量会有变量提升的问题 //这里a未定义，不报错有打印结果undefined console.log(a); // undefined var a = 10; //打印fn调用也存在变量提升 function f...
javascript基础
08-09
javascript基础，适合零基础或初学者简单简洁 ，易于理解
javascript基础语法总结.pdf
07-02
这个资源是javaScript基础语法的总结，适合学完javascript基础语法的进行巩固、复习！ 这...我是想免费给大家看的,这怎么还收费
学习ECMAScript（2017年7月27日）
狼行千里吃肉
07-27 766
一元运算符 Delete delete 运算符删除对开发者新增的属性或方法的引用，不能删除系统的属性或方法引用。 Void void 运算符对任何值返回 undefined。该运算符通常用于避免输出不应该输出的值。 例如，从 HTML 的 元素调用 JavaScript 函数时。要正确做到这一点，函数不能返回有效值，否则浏览器将清空页面，只显示函数的结果。例如： Click me
学习ECMAScript 2015【11】Modules
珞珞如石
11-15 492
0.背景   本文的主角是 Modules 。你会问：“必须模块化吗？可是经理让我一分钟后上线！” 1.总览   其实写Vue项目的时候，很多时候都用到了模块化编程，常常写export import，好，我们先简要浏览一下： // lib/math.js export function sum(x, y) { return x + y; } export var pi = 3.141593; // app.js import * as math from "lib/math"; console.lo
深入理解ECMAScript 6 学习指南（中文版和英文版）（学习javascript完整版）
10-08
深入理解ECMAScript 6 （中文版和英文版javascript完整版），可以两版对比学习 Understanding ECMAScript 6：The definitive guide for Javascript developers 作者Nicholas C·Zakas曾编著JavaScript高级程序设计
ECMAScript 6-promise学习与使用【es6含真实接口】
前端开发工程师
12-19 5580
es6-promise学习与使用 es6-promise介绍与基本使用 promise是ES6引入的异步编程的新解决方案，语法上市promise是一个构造函数，用来封装异步操作并可以获取奇成功或失败的结果【解决回调地狱问题】 Promise构造函数 ：Promise {excutor}{ } Promise.prototype.then方法 Promise.prototype.catch方法 ...
JavaScript学习笔记（ECMAScript）
少不入川。的博客
03-26 1412
文章目录1.前言1.1 什么是JavaScript1.2 关于Java和JavaScript1.3 JavaScript的内容2.HTML种嵌入JavaScript代码的三种方式2.1 第一种方式：行间事件2.2 第二种方式：脚本块2.3 第三种方式：引入JS脚本3.关于JavaScript中的变量3.1 前言3.2 函数初步3.2.1 函数的定义方式3.2.2 函数的使用3.3 变量类型3.3.1 运算符typeof3.3.2 Undefined类型3.3.3 Number类型3.3.4 Boolean类
ECMAScript 6入门学习（一）
Lielying的博客
03-07 460
ECMAScript 6简介 let 命令 const 命令 变量和解构赋值 字符串的扩展 字符串的新增方法 正则的扩展 数值的扩展
ECMAScript学习笔记（一）
小刀的技术博客
06-17 497
ECMAScript中的变量是弱类型的，可以很随意的定义各种变量，超级方便，不过，编程的时候，还是建议大家规范使用各个变量。 我感觉变量的命名规则就是相当重要的，你的命名最好要让人一眼就能看出这个变量是干嘛的，为此，我最推崇“匈牙利类型标记法”。 在w3cschool上对“匈牙利类型标记法”的描述是这样的：在以 Pascal 标记法命名的变量前附加一个小写字母（或小写字母序列），说明该变量的类
ECMAScript6(ECMAScript2015)学习笔记
Log my thought
12-16 1000
ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说，ES6就是ES2015。虽然目前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项目当中已经开始使用ES6了。
全套ECMAScript学习博文
iteye_15959的博客
04-13 93
汤姆大叔的博客 http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html   十五天之算法，很不错这个。 http://www.cnblogs.com/huangxincheng/category/340146.html
ECMAScript学习（三）ES的新特性
WeiAiGeWangFeiYuQing的博客
11-20 329
目录Promise作用：定义实例 Promise 作用： The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value. Promise 对象是 JavaScript 的异步操作解决方案，为异步操作提供统一接口。它起到代...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bm1998

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值