【前端】前端三要素之JavsScript基础

02-27 1068阅读 0评论

写在前面：本文仅包含JavaScript内容，DOM知识传送门在这里，BOM传送门在这里。

$【前端】前端三要素之JavsScript基础,【前端】前端三要素之JavsScript基础,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,我们,访问,第1张$

（图片来源网络，侵删）

本文内容是假期中刷的黑马Pink老师视频（十分感谢Pink老师），原文保存在个人的GitLab中，如果需要写的网页内容信息等可以评论联系我，若是编辑博文中出现了忘记上传的图片或者错位的图片欢迎评论区指正。写作不易，欢迎点赞、收藏+关注。

最近正在阅读JavaScript高级，后续会陆续发出来。

文章目录

JavaScript学习笔记
简介
- 浏览器组成部分
- JS的组成
- - - ECMAScript
    - DOM —— 文档对象模型
    - BOM——浏览器对象模型
    - JS 书写方式
    - JS 的注释
    - JS 的输入输出
    - 变量
    - - 变量的使用
      - 变量使用的注意事项
      - 变量的命名规则
      - Q&A
      - 数据类型简介
      - 1. 简单数据类型 | 简介
        1.1 Number
        1.2 String 字符串类型
        1.3 Boolean 类型
        1.4 undefined
        1.5 Null
        1.6 变量类型检测
        数据类型的转换
        1. > String
        2. > Number
        3. > Boolean
        运算符
        表达式
        关系运算符（比较运算符）
        逻辑运算符
        逻辑中断逻辑与 | 逻辑中断逻辑或
        逻辑与终端
        逻辑或终端
        赋值运算符
        流程控制
        三元表达式
        switch
        循环
        for 循环
        while 循环
        do...while... 循环
        continue | break
        数组
        创建数组的方式
        访问数组元素
        数组新增元素
        复习笔记
        检测是不是数组
        添加数组元素
        `sort` 数组排序
        `sort` 方法存在的问题
        `sort` 的完美解决方案
        获取数组索引号
        数组转换为字符串
        函数
        函数的使用
        函数的参数
        使用`arguments`
        伪数组
        函数的两种声明方式
        作用域
        变量作用域
        JavaScript 没有块级作用域
        作用域链
        LHS 与 RHS 简介
        预解析
        对象
        创建对象
        遍历对象
        内置对象
        格式化日期
        格式化时分秒
        时间戳
        倒计时
        基本包装类型
        基本数据类型
        字符串的内容不可改变
        获取字符的位置
        根据位置返回字符
        拼接与截取字符串
        替换字符串
        字符串转换为数组
        数据类型
        简单数据类型
        简单数据类型传参
        复杂类型传参
        JS 执行队列
        任务执行机制
        带点击事件的任务执行机制
        立即执行函数 | IFEE
        自从搭建了自己的GitLab，每一天都在想着喂饱它！最近趁年假补了一下JS基础与CSS。
        
        以下内容均是本人亲自写的，并且经过验证，请放心食用。
        
        JavaScript学习笔记
        
        简介
        
        本内容来源于黑马程序员[JavaScript全套教程]
        
        JavaScript是运行在客户端上的编程语言
        是一门脚本语言
        也可以基于Node.js进行服务器端编程
        浏览器组成部分
        
        渲染引擎/JS引擎
        $【前端】前端三要素之JavsScript基础,【前端】前端三要素之JavsScript基础,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,我们,访问,第2张$
        （图片来源网络，侵删）
        
        渲染引擎：用来解析HTML和CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
        JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8.
        JS的组成
        
        ECMAScript/DOM/BOM
        
        ECMAScript
        
        ECMAScript是由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或者JScript，但实际上后两者是ECMAScript语言的实现和拓展。
        
        DOM —— 文档对象模型
        
        文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。
        
        通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）
        
        BOM——浏览器对象模型
        
        BOM（Browser Object Model，简称BOM）是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。
        
        通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
        $【前端】前端三要素之JavsScript基础,【前端】前端三要素之JavsScript基础,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,我们,访问,第3张$
        （图片来源网络，侵删）
        
        JS 书写方式
        
        行内式
        
        内嵌式
        alert('Hello World')
        
        外联式
        // 01.my.js文件 alert('如果我是DJ你还爱我吗？')
        
        JS 的注释
        
        单行注释
        // 这是一个单行注释
        
        多行注释
        /* 这是多行注释 */
        
        /** * 这也是多行注释，不过是绿色的 */
        
        JS 的输入输出
        
        prompt输入框
        alert弹出框
        console.log()控制台打印
        var age = prompt('请输入你的年龄'); alert(age) console.log(age)
        
        变量
        
        变量是在内存中用来存放数据的空间。
        
        变量的使用
        
        声明变量
        赋值变量
        var age; // 生命一个变量 age = 18; // 赋值变量
        
        // 也可以合为一步 var age = 18; console.log(age);
        
        // 结合第二步的输入输出 var age = prompt('请输入你的年龄'); alert(age) console.log(age)
        
        变量使用的注意事项
        
        可以一次声明多个变量
        只声明不赋值是undefined
        不声明直接使用会报错ReferenceError:tel is not defined
        不声明直接赋值会给你创建一个新的变量（LHS找不到会为你创建一个新的全局变量，严格模式下不行）
        var age,name,address; var age = 18, name = '张三', address = '上海市松江区泗泾镇';
        
        变量的命名规则
        
        可以包含字母（区分大小写）、数字、下划线、美元符号
        不能以数字开头
        不能是保留字或者关键字
        变量名必须要有艺艺
        遵守驼峰命名法
        不要使用name作为变量名
        Q&A
        
        为什么使用变量 | 因为需要鵆一些数据
        变量是什么 | 变量就是一个容器，用来存放数据的。方便后面使用数据
        变量的本质是什么 | 变量是内存里的一块空间，用来存储数据
        …
        
        数据类型简介
        
        使用不同的数据类型可以节约内存空间
        
        JavaScript是一种弱语言类型，只有在程序运行的时候才会被确认数据类型。
        
        JavaScript是动态语言，运行过程中数据类型是可以变化的（有点像ts的any类型）
        
        1. 简单数据类型 | 简介
        
        数据类型默认值
        Number 0
        Boolean false
        String “”
        Undefined undefined
        Null null
        1.1 Number
        
        // 十进制整数与小数 var num1 = 10; var num2 = 10.01; // 八进制（前面加0表示八进制 | 八进制不能表示小数） var e1 = 010; // 8 // 16进制（前面加0x表示16进制 | 0~9A~F） var s1 = 0xA;
        
        // 最大值 & 最小值 var max = Number.MAX_VALUE; var min = Number.MIN_VALUE;
        
        Infinity; // 无穷大 -Infinity; // 无穷小
        
        NaN; // 非数字 'Hello' - 100; // NaN
        
        Number 相关方法
        
        isNaN(2); // false 是数字返回false
        
        1.2 String 字符串类型
        
        使用单引号或双引号引起来的内容都是字符串，但是更推荐是用单引号
        
        嵌套关系:使用外双内单（也可以外单内双）
        
        var str1 = '我是Jim.kk'; var str2 = "'我是'Jim'.kk'" var str3 = '我是:\nJim.kk'; // 换行
        
        字符串的转义字符等与其他语言无异，这里不多做解释。
        
        字符串具有一些特点，比如：具有长度、可以拼接或者裁切等：
        
        var str1 = '我是Jim.kk'; console.log(str1.length); // 8
        
        使用+可以拼接字符串，字符串类型与任意类型相加都会拼接。
        
        var str1 = '我是' + 'Jim.kk'; // 我是Jim.kk var str2 = '我' + 18 + '岁'; // 我18岁 var str3 = '结果是:'+true; // 结果是:true
        
        1.3 Boolean 类型
        
        var x1 = true; var x2 = false;
        
        1.4 undefined
        
        var v1; var v2 = undefined; console.log('hello'+v1); // helloundefined console.log('hello'+v2); // helloundefined console.log(v2+1); // NaN
        
        1.5 Null
        
        var n1 = null;
        
        1.6 变量类型检测
        
        var v1 = 'Hello'; var v2 = 12; var v3; var v4 = v3 + 12; console.log(typeof v1) // string console.log(typeof v2) // number console.log(typeof v3) // undefined console.log(typeof v4) // number
        
        prompt输入的一定是字符串类型
        
        数据类型的转换
        
        1. > String
        
        xx.toString()
        String()
        加号拼接空字符串
        var v1 = 1; var v2 = true; var str1 = v1.toString(); var str2 = v2.toString(); var str3 = String(v1); var str4 = String(v2); var str5 = v1+''; var str6 = v2+''; var str7 = 1+''; var str8 = true+'';
        
        2. > Number
        
        parseInt(string)
        parseFloat(string)
        Number(string) // 强制转换函数
        js隐式转换(- * /) '12'-0
        parseInt('12') // 12 parseInt('12.21') // 12 parseInt('12xxx') // 12 parseInt('zx12xxx') // NaN parseFloat('120') // 120 parseFloat('12.21') // 12.21 parseFloat('12.21xxx') // 12.21 parseFloat('zx12.21xxx') // NaN Number('12') // 12 Number('12.21') // 12.21 '12'-0; // 隐式转换 12 '120' - '110'; // 隐式转换 10 '12' * 3; // 隐式转换 36
        
        3. > Boolean
        
        代表空、否定的值会被转换为false，如：‘’、0、NaN、null、undefined
        
        其余全不会被转换为true
        
        Boolean('') // false Boolean(0) // false Boolean(NaN) // false Boolean(null) // false Boolean(undefined) // false Boolean('Jim.kk') // true Boolean(12) // true
        
        运算符
        
        感觉可以省略了
        
        + - * / %：加减乘除取余
        
        小数在算数运算中会存在问题
        
        console.log(0.1 + 0.2) // 0.300...004
        
        表达式
        
        表达式是有数字、运算符、变量组成的式子，表达式一定有返回值
        
        1+1 var age = 1; age + 1;
        
        var v1 = 1; ++v1; v1++; --v1; v1--;
        
        关系运算符（比较运算符）
        
        > = 执行语句; } 执行语句; return; } 执行语句; 执行语句; } else { 执行语句; } 执行语句; } else if ( 条件表达式 ) { 执行语句; } else { 执行语句; } case 1: // 执行语句1; break; case 2: // 执行语句2; break; case 3: // 执行语句3; break; default: // 最后的执行语句; } console.log(i); } // 执行顺序 // for( 1 ； 2 ； 4){ // 3; // } // 循环体; // } var v1 = 1; while( v1 console.log(v1++); } // 循环体; // } while( 条件表达式 ); return a - b; }); console.log(arr); // [1,13,4,7,77] 排序失败 return num1 + num2; } console.log(getSum(1,2)); // 3 console.log(getSum('我是','Jim.kk')) // 我是Jim.kk console.log('Hi~'); } // 调用函数 sayHi() console.log(num1 + num2); } getSum(1,2); // 3 getSum(1,2,3); // 3 | 第三个参数没人接，就扔掉了 getSum(1); // NaN | 第二个数字没有值，是undefined，一个数字加上undefined是NaN console.log(arguments); } fn(1,2,3); // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ] // ... } // 2. 函数表达式（匿名函数，fun2是变量名） var fun2 = function (){ // ... } var num = 2; console.log(num); } console.log(num); // 1 fun1(); // 2 var num1 = 1; num2 = 2; } // console.log(num1) // Uncaught ReferenceError: num1 is not defined fun(); // 调用一次fun，发现fun中进行LHS查询找不到num2,因此定义了一个全局的num2 console.log(num2) // 由于function中没有var num2，而是直接赋值，所以num2被定义为全局变量。 var num1 = 5; } console.log(num1); // 5 var num1 = 5; } console.log(num1); // undefined var num1 = 1; function fun2() { console.log(num1); } fun2(); } fun1(); // 1 console.log(1); } fun(); // 进行一次RHS查询，找到fun的值，发现是个函数，直接执行，这一行中没有出现等于号，但是依旧是一个RHS查询 console.log('我是Jim.kk'); } console.log('我是Jim.kk'); } // 执行顺序： // var fun; // fun(); // fun = function(){ // console.log('我是Jim.kk'); // } var a; a = b = c = 9; console.log(a); // 9 console.log(b); // 9 console.log(c); // 9 } fun(); console.log(a); // undefined console.log(b); // 9 console.log(c); // 9 uname: 'Jim.kk', age: 25, sex: '男', sayHi: function (){ console.log('Hi~我是Jim.kk'); } } // 使用.的或[]的方式调用对象属性 console.log(obj.uname); // Jim.kk console.log(obj['age']) // 25 // 使用.的方式调用对象方法 obj.sayHi(); // Hi~我是Jim.kk console.log('Hi~我是Jim.kk'); } console.log(obj.uname); // Jim.kk obj.sayHi(); // Hi~我是Jim.kk // this.属性 = 值; // this.方法 = function (){} // } // new 构造函数名(); function Star(name,age,sex) { this.name = name; this.age = age; this.sex = sex; } var ldh = new Star('刘德华',18,'男'); console.log(ldh) this.name = name; this.age = age; this.sex = sex; } var obj = new Star('刘德华',18,'男'); for(var item in obj) { console.log(item); // name age sex console.log(obj[item]); // 刘德华 18 男 } var week = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'] var date = new Date(); var y = date.getFullYear(); var m = date.getMonth() + 1; // 注意是 0~11 var d = date.getDate(); var w = date.getDay(); return y + '年' + m + '月' + d + '日 ' + week[w + 1]; } console.log(getDate()); // 2024年2月8日星期五 var date = new Date(); var h = date.getHours(); var m = date.getMinutes(); var s = date.getSeconds(); return h + ':' + (m

相关阅读：

1、包含双主机蓝牙耳机怎么同时连接使用的词条

2、两个网站能否同时使用一个域名（两个网站可以共用一个域名吗）

3、小火箭设置禁止访问的域名（小火箭设置禁止访问的域名是什么）

4、ASP.NET MVC中Filter过滤器的使用

5、pytest使用 pytest-rerunfailures 插件实现失败用例重跑功能

免责声明

本网站所收集的部分公开资料来源于AI生成和互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

文章版权声明：除非注明，否则均为主机测评原创文章，转载或复制请以超链接形式并注明出处。

相关阅读

发表评论取消回复

评论列表（暂无评论，1068人围观）

还没有评论，来说两句吧...

目录[+]