JavaScript基础三部曲（一）：JavaScript简介及ECMAScript部分

最新推荐文章于 2022-07-21 21:30:06 发布
最新推荐文章于 2022-07-21 21:30:06 发布
阅读量771 收藏 1
点赞数 1
分类专栏： 前端设计基础 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abc701110/article/details/104644668
版权

文章目录

一、JavaScript简介
1、什么是JavaScript

​ 一种基于对象和事件驱动并具有安全性能的解释型脚本语言。它不需要编译，直接嵌入在HTTP页面中，把静态页面转变为支持用户交互并响应应用事件的动态页面。我们熟知的Java，是强类型语言，有预处理、编译、汇编和链接过程，JVM一般是将Java编译成class文件后放入内存。

2、JavaScript的三个部分：
1）核心（ECMAScript）

​ 它规定了这门语言的下列组成部分：

语法 、类型、语句、关键字、保留字、操作符、对象，

​ ECMAScript 就是对实现该标准规定的各个方面内容的语言的描述。

2）文档对象模型（DOM）

​ 文档对象模型（DOM，Document Object Model）是针对 XML 但经过扩展用于 HTML 的应用程序编程接口（API，Application Programming Interface）。DOM 把整个页面映射为一个多层节点结构。HTML或 XML 页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。看下面这个HTML 页面：

<html>
	<head>
		<title>Sample Page</title>
	</head>
	<body>
		<p>Hello World!</p>
	</body>
</html>

​ 在 DOM 中，这个页面可以通过下图所示的分层节点图表示。

在这里插入图片描述

​ 通过 DOM 创建的这个表示文档的树形图，开发人员获得了控制页面内容和结构的主动权。借助DOM 提供的 API，开发人员可以轻松自如地删除、添加、替换或修改任何节点。

3）浏览器对象模型（BOM）

​ 支持可以访问和操作浏览器窗口的浏览器对象模型（BOM，Browser Object Model）。开发人员使用 BOM 可以控制浏览器显示的页面以外的部分。

​ 主要内容有：window对象、location对象、history对象、screen对象、navigator对象（用来识别浏览器）。DOM和BOM的关系图如下：

3、学习参考材料

（分量如何因人而异，不妄加评论，请自行选择，资料众多，不一一赘述）

​ 1）w3cschool

​ 2）w3cschool.cn
https://www.w3cschool.cn/javascript/

​ 3）菜鸟教程

​ 4）《JavaScript高级程序设计》

4、第一个JavaScript代码段（值得纪念一下！）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript基础</title>
</head>
<body>
<div id="demo"></div>
</body>
<script>
    document.getElementById('demo').innerHTML='hello world';
</script>
</html>

温馨提示：JavaScript有些地方与Java很相似，可比较学习！

二、JavaScript基础
1、JavaScript引入方式

1）内联式（不推荐）

2）嵌入式（复用性差，可维护性差，不推荐）

3）外部引用（推荐使用，一个HTML文件就需要配一个JavaScript文件）

2、JavaScript输出语句
<script>
    document.getElementById('demo').innerHTML='hello world';

    document.write('hello');

    alert('hello');

    console.log('hello');
</script>
3、数据类型

https://www.w3school.com.cn/js/js_datatypes.asp

种类：字符、数字、数组、布尔、对象、undefined 、null，举一个例子：

<script>
    /**
     * 弱类型语言:
     * 1、声明变量时，不需要规范数据类型
     * 2、JavaScript的数据类型可以随时改变
     */
    var str = 'hello';
    var num = 1;
    var arr = [1,2,1];
    var flag = false;
    var object = {name:'Martin',gender:'Male'};
    var nullObject = null;
    var undefinedObject;
    console.log(str);
    console.log(num+1);
    console.log(arr[0]);
    console.log(flag);
    console.log(object.gender);
    console.log(nullObject);
    console.log(undefinedObject);
    console.log(typeof nullObject);
    console.log(typeof undefinedObject);
</script>

其中最麻烦的就是null和undefined类型，那么我么有表格来做一个比较：

数据结构默认值typeof
null被赋值为空object
undefinded从未被赋值undefined
4、引用类型
1）字符串

https://www.w3school.com.cn/jsref/jsref_obj_string.asp

a、连接 concat()

<script>
    var str1 = 'hello';
    var str2 = 'world';
    console.log(str1+str2);
    console.log(str1.concat(str2));
</script>

​ b、拆分 split()

<script type="text/javascript">

    var str="How are you doing today?";

    document.write(str.split(" ") + "<br />");
    document.write(str.split("") + "<br />");
    document.write(str.split(" ",3));

</script>

​ c、大小写转换 toUpperCase()、toLowerCase()

<script type="text/javascript">

    var str="Hello World!";
    document.write(str.toLowerCase());

</script>
2）数组

https://www.w3school.com.cn/jsref/jsref_obj_array.asp

​ a、长度 length属性

<script type="text/javascript">

    var arr = new Array(3);
    arr[0] = "John";
    arr[1] = "Andy";
    arr[2] = "Wendy";

    document.write("Original length: " + arr.length);
    document.write("<br />");

    arr.length=5;
    document.write("New length: " + arr.length);

</script>

​ b、添加 push() 向数组的末尾添加一个或更多元素，并返回新的长度

<script type="text/javascript">

    var arr = new Array(3);
    arr[0] = "George";
    arr[1] = "John";
    arr[2] = "Thomas";

    document.write(arr + "<br />");
    document.write(arr.push("James") + "<br />");
    document.write(arr);

</script>

​ c、移除 pop() 删除并返回数组的最后一个元素

<script type="text/javascript">

    var arr = new Array(3);
    arr[0] = "George";
    arr[1] = "John";
    arr[2] = "Thomas";

    document.write(arr);

    document.write("<br />");

    document.write(arr.pop());

    document.write("<br />");

    document.write(arr)

</script>
3）时间

https://www.w3school.com.cn/jsref/jsref_obj_date.asp

a、getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)

<script type="text/javascript">

    var birthday = new Date("July 21, 1983 01:15:00");
    document.write(birthday.getDate());


</script>

​ b、getMonth() 从 Date 对象返回月份 (0 ~ 11)

<script type="text/javascript">

    var d=new Date();

    document.write(d.getMonth());

</script>

​ c、getFullYear() 从 Date 对象以四位数字返回年份

<script type="text/javascript">

    var born = new Date("July 21, 1983 01:15:00");
    document.write("I was born in " + born.getFullYear());

</script>

​ d、运用类库转换时间格式

4）数字

https://www.w3school.com.cn/jsref/jsref_obj_math.asp

a、随机数 random() 返回 0 ~ 1 之间的随机数

<script type="text/javascript">
    function forRandom() {
        for(var i=0;i<10;i++){
            document.write(Math.random());
        }
    }
</script>

​ b、四舍五入 round(x) 把数四舍五入为最接近的整数

<script type="text/javascript">

    document.write(Math.round(0.60) + "<br />");
    document.write(Math.round(0.50) + "<br />");
    document.write(Math.round(0.49) + "<br />");
    document.write(Math.round(-4.40) + "<br />");
    document.write(Math.round(-4.60))

</script>

​ c、向上取整 ceil(x) 对数进行上舍入

<script type="text/javascript">

    document.write(Math.ceil(0.60) + "<br />");
    document.write(Math.ceil(0.40) + "<br />");
    document.write(Math.ceil(5) + "<br />");
    document.write(Math.ceil(5.1) + "<br />");
    document.write(Math.ceil(-5.1) + "<br />");
    document.write(Math.ceil(-5.9))

</script>

​ d、向下取整 floor() 对数进行下舍入

<script type="text/javascript">

    document.write(Math.floor(0.60) + "<br />");
    document.write(Math.floor(0.40) + "<br />");
    document.write(Math.floor(5) + "<br />");
    document.write(Math.floor(5.1) + "<br />");
    document.write(Math.floor(-5.1) + "<br />");
    document.write(Math.floor(-5.9));

</script>
三、练习热身

看了上面的这些基础知识，来几道编程小题热热身吧！

1）打印固定格式的时间

声明一个时间对象，打印出如下格式： 2020-2-29 17:29；

代码Demo：

<script type="text/javascript">

    var d=new Date();

    document.write(d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate()+" "+d.getHours()+":"+d.getMinutes());

</script>
2）输出随机数

使用数学对象，

  • 输出（10个）1-100之间的随机数 ；
  • 输出一个指定范围的随机数（使用函数机制 ： 1-10）。

代码Demo：

<script type="text/javascript">

    for(var i=0;i<10;i++){
        document.write(Math.floor(Math.random()*100+1)+"</br>");
    }

</script>
</br>
<script type="text/javascript">

    document.write(Math.floor(Math.random()*10+1));

</script>
四、总结
1、数据类型
1）基本数据类型

更简单化，声明变量时使用var关键字，需要注意null和undifined

2）引用数据类型

提供了更多的方法和功能，一般用new关键字声明对象

3） 计算符号
2、函数
  • 解决问题：复用——可维护性高、可读性强、结构化
    现在的编程语言更多的是在强调描述，而不是做计算
  • 首先，做到结构清晰 ——告诉用户干什么（抽象的层次）而不是怎么干（细节）
  • 之后，再去研究细节算法——具体怎么干
    ​
    ​ 举例说明：
1） 判断字符串是否为空
<script>
 
    showMsg('hello');

    function showMsg(msg1,msg2) {
        if(msg2==undefined){
            msg2='';
        }
        alert(msg1+msg2);
    }
</script>
2） 判断是否是数字
<script>

    var num = showMsg(1,'');
    alert(num);
    function showMsg(msg1,msg2) {
        /**
         * 正则表达式验证数据 是数字：返回true；不是数字：返回false
         **/
        var regPos = /^\d+(\.\d+)?$/; //非负浮点数
        var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
        if(regPos.test(msg1) &&regPos.test(msg2)|| regNeg.test(msg1)&&regNeg.test(msg2)){
            return msg1+msg2;
        }else{
            alert("不全是数字");
        }
    }
</script>
3）匿名函数怎么使用
<script>
    /**
     * 匿名函数
     */
    //方式1
    //这种方式尽量少用
    const sum1 = function(x, y){
            return x + y;
        }(1, 2);
    alert(sum1);
    //方式2
    //推荐
    const sum = (function(x, y){
        return x + y;
    })(1, 2);
    alert(sum1);

    //方式3
    alert((new Function("x","y","return x+y"))(1,2));
</script>
「已注销」
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript：JavaScript存储区和ECMAScript
03-04
JavaScript和ECMAScript的不断发展，为开发者提供了更多强大的工具和功能，使得JavaScript成为了现代Web开发不可或缺的一部分。不断学习和理解这些新特性，将有助于提升代码质量和开发效率。在JavaScript-master这个...
JavaScript-modules-in-browser:在JavaScript中使用ECMAScript模块
05-11
ECMAScript模块（ES模块）是ECMAScript标准的一部分，它为JavaScript提供了一种原生的模块化解决方案。与CommonJS或AMD等早期模块系统不同，ES模块在语法层面上支持模块化，通过`import`和`export`关键字来导入和...
js运行三部曲
前端入门神器
03-04 309
js运行三部曲 语法分析 js代码运行是一条一条的解释，而在解释前要进行的工作 就是语法分析，对全部语句进行一步检查，判断是否符合基本语法规则。 预编译 预编译前奏： 一切未经声明的变量都是全局变量，属于全局作用域window所有 a = 1; 不会报错，在全局范围内相当于 var a = 1; a属于全局window，在全局的作用域内，但是不提倡这样。 再来看一段 fun...
JS运行三部曲---预编译
Web前端——成长之路
08-17 1029
JS运行三个步骤： 语法分析预编译解释执行 语法分析：通俗来说就是通篇检查你的代码有没有语法错误，有语法错误的话，程序是不会执行的 解释执行：也就是程序读一句执行一句 最重点的也就是预编译了，那么预编译到底是什么？它发什么在什么时候？ 先来段代码压压惊 function fn (a) { console.log(a) var a = 123; console.lo
JS运行三部曲
shi_1204的博客
03-10 759
JS运行三部曲1.语法分析 先全部扫一遍 看有没有语法错误.2.预编译(执行前一刻) 函数声明整体提升 变量 声明提升3.解释执行 (解释一行执行一行)预编译执行四部曲 函数中 1.创建AO对象 (Activation Object (执行期上下文)) 2. 找形参和变量声明,将变量和形参名作为AO属性名,值为undefined 3.将实参值和形参统一
Javascript与ECMAScript
weixin_33912246的博客
12-14 106
我们经常习惯性认为Javascript就是ECMAScript，但其实不是这样的。 ECMAScript是一种脚本在语法和语义上的标准。 主要包括：语法、类型、语句、关键字、保留字、操作符、对象。 它与浏览器之间，没有半毛钱关系。 而Javascript是基于ECMAScript标准实现的。Javascript不仅仅包括ECMAScript，它其实还包含了其他东西。 Javascript...
js事件三部曲
去旅行、在路上
03-20 210
1、获取事件源 以下是获取事件源的常用方法 2、给事件源绑定事件 3、事件源的的执行函数
JavaScript程序设计课件：第一章 JavaScript简介.ppt
05-16
4. **跨平台性**：JavaScript依赖于浏览器执行，因此可以在不同操作系统和设备上运行，与操作系统无关。 JavaScript的应用主要包括： 1. **与HTML表单交互**：用于验证表单数据，提供即时反馈。 2. **处理客户端...
goja:纯Go中的ECMAScriptJavaScript引擎
04-28
戈雅Go中的ECMAScript 5.1（+）实现。 Goja是纯Go中ECMAScript 5.1的实现，着重于标准合规性和性能。 这个项目很大程度上是受启发的。 最低要求的Go版本是1.14。特征全面的ECMAScript 5.1支持（包括正则表达式和严格...
JavaScript程序设计课件：1 JavaScript 简介.ppt
05-07
JavaScript 程序设计课件：1 JavaScript 简介 本节课件主要介绍了 JavaScript 的基础知识，包括静态网页和动态网页的区别、JavaScript 的定义和特点、HTML 的基本结构、编写第一个 JavaScript 程序的步骤等。 一、...
js执行三部曲
koukou0419的博客
06-02 161
//js执行三部曲 //语法分析，预编译，解释执行 //预编译 test(); function test(){ console.log('a');//a } //变量编译 console.log(a);//undefined var a=123; //var a; //a=123 //函数声明整体提升 //变量 声明提升 //函数名和变量名重复的时候 function a(){ } var a=...
js的三部曲、数组、循环、自定义引索知识点分享
lak_an_ke的博客
07-21 737
js的三部曲、数组、循环、自定义引索知识点分享
理解js执行的过程：JS运行三部曲
meteorites的博客
06-05 1264
1.语法分析 先全部扫一遍 看有没有语法错误. 2.预编译(执行前一刻) 变量 声明提升 函数声明整体提升 预编译的前奏 imply global 暗示全局变量：即任何变量，如果变量未经声明就赋值，此变量就为全局对象（window）所有。 预编译的四部曲： 1.创建GO/AO对象 2.找形参和变量声明，将变量和...
（一）JavaScript基础-JavaScript简介、ECMAScript简介
轮回的秋
03-16 379
目录1.JavaScript简介2.JavaScript简史3.JavaScript组成3.1.ECMAScript3.1.1.ECMA版本3.2.文档对象模型3.2.1.为什么使用DOM3.2.2.DOM级别3.3.浏览器对象模型 1.JavaScript简介        JavaScript是Netscape Navigator(网景公司)于199...
瞬间理解JavaScript是什么，ECMAScript是什么
布白的博客
11-12 790
结论先行： JavaScript是一门用来与网页交互的脚本语言 包含以下三个组成部分。 ECMAScript：由ECMA-262定义并提供核心功能。 文档对象模型(DOM)：提供与网页内容交互的方法和接口。 浏览器对象模型(BOM)：提供与浏览器交互的方法和接口。 JavaScript的这三个部分得到了五大Web浏览器的支持(IE,Firefox,Chrome,Safari,Opera)不同的支持。 所有浏览器对ES5(ECMAScript5)提供了完善支持，而对ES6,ES7的支持也不断上升。 这
JS执行三部曲与预编译环节
qq_42889569的博客
09-11 227
JS执行三部曲 1，语法分析（通篇扫描一遍，看也没有低级语法错误） 2，预编译 3，解释执行（解释一行，执行一行） 预编译环节 预编译发生在函数执行前一刻。 1，创建AO对象 （Activation Object 活跃对象、执行期上下文） 2，找形参和变量声明，将变量声明和形参名作为AO对象的属性名，值为undefined。 3，将形参和实参相统一。 4，在函数体里面找函数声明，...
ECMAScript和JavaScript的关系
DATA8866的博客
04-01 595
分享一个我的公众号，最近突然想玩小程序，之前做过一段时间前端开发，考虑到现在应用程序越来越多，未来社会一定是一个充满“只有你想不到，没有你做不到”的App的世界！而微信小程序又给我们这群喜爱开发的童鞋们提供了友好的入门机会，因此，不如就在当下，开始一步一步的学习并开发自己的小程序吧。这是我的公众号：目的是和大家讨论小程序开发，同时也带着开发小白入门设计开发微信小程序，来吧，加入！ 正文： ...
（转载）javaScript三部曲
冷眼
01-18 138
[b]1:javascript的基础知识[/b] 知道基本的编程语法，比如循环，判断，try/catch等等 * 理解包括多种函数定义以及赋值的方式，包括匿名函数 理解基本的命名空间，全局（window）空间以及对象空间（不包括闭包） 理解上下文的角色以及this变量的使用 * 理解各种对象以及函数的初始化和声明方式 理解javascript比较操作符，如, ==, ===，以及对象和字符...
原生js拖拽三部曲
Tina的博客
05-30 204
js拖拽效果的主要事件：onmousedown（鼠标按下），onmousemove（鼠标移动），onmouseup（鼠标抬起）var contain = document.getElementsByClassName("contain")[0] contain.onmousedown = (e) =&gt;{ e = e || event; var x = e.clientX...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值