第一章 JavaScript的基本语法

已于 2023-12-28 16:12:13 修改
阅读量887 收藏 3
点赞数 11
分类专栏： 从零开始学JavaScript 文章标签： javascript 前端 ecmascript js 数据类型 web3 web
于 2021-03-24 17:28:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41636483/article/details/114406484
版权

文章目录

一、基本介绍与发展

  1. 网页的组成：

    • html：超文本标记语言，是网页的结构
    • css：层叠样式表，是网页的修饰
    • javascript：脚本语言，是网页的行为

  2. JavaScript的历史

  3. JavaScript的组成：ECMAScript、BOM、DOM

    • ECMAScript是一个标准。它规定了语法、类型、语句、关键字、保留子、操作符、对象。（相当于法律）
    • BOM（浏览器对象模型）：可以访问浏览器窗口的浏览器对象模型，对浏览器窗口进行操作。
    • DOM（文档对象类型）：DOM把整个页面映射成一个多层节点结构。HTML页面组成都是某种类型的节点，这些节点又包含着不同类型的数据

  4. Javascript和HTML5的关系
    HTML5是一种新的技术，就目前而言，我们所知的HTML5都是一些标签，但是有了JS之后，这些标签深层的扩展功能才得以实现。
    比如video标签，我们对其理解为一个简单的标签，但实际上，video标签还有更深层次的扩展功能。

二、如何编写及运行JS

  • JS是一种脚本语言，也需要依托于html的执行，可以有三种编写方式：行内(内联)，内部，外部。

  1. 内联：以html标签的属性存在

    <button onclick="alert('hello')"></button>
或
<button onclick="fn()"></button>
<script>
	function fn(){
		alert("world")
	}
</script>
    • 不推荐使用，结构和样式要分离
    • 需要行为触发，无法自动执行
    • 不方便进行多个功能模块的复用和维护

  2. 内部：写在html文件内的script标签内

    <script>
	document.querySelector(".box").onclick = function(){
		alert("js1");
	}
	// 或
	alert('js2')
</script>
    • 可以不通过行为触发，会自动执行
    • 结构和行为没有完全分离，不方便多个页面模块之间功能的复用和维护

  3. 外部：写在js文件内，然后在html文件中使用script的src引入

    // js文件
alert("hello world");

    <script src="index.js"></script>
    • 可以不通过行为触发，会自动执行
    • 结构和行为分离，方便功能的复用和维护
    • 推荐使用

    src 属性链接的是 JavaScript 文件，文件的扩展名为 .js，如 index.js

  4. 错误写法：内部和外部，使用一个script标签，不允许！！！

    <script src="路径">
	//在script标签内写js脚本
</script>

  5. 执行方式和执行顺序：

    1. 内联，只能通过行为触发，不触发就不执行
    2. 内部和外部，先写的先执行
    3. script标签可以放在任何位置，但是一般放在body的最后 或 结束标签后，也有可能会放在head的最后

三、JS 中的注释

  1. 学习一个语言，先学习一个语言的注释，因为注释是给我们自己看的，也是给开发人员看的
  2. 写好一个注释，有利于我们以后阅读代码
  3. JavaScript 支持两种形式注释语法：
    • 单行注释：// 注释内容
    • 多行注释：/* 注释内容 */

四、如何将信息呈现给用户

  1. 向页面中打印内容：

    document.write("这是一些文本内容");

    可以直接解析标签：

    document.write("<strong>加粗的内容</strong>");

    转义字符：

    // &lt;  ====  <
// &gt;  ====  >
document.write("&lt;strong&gt;这是一些加粗的内容</strong>");

    document.write 会将要打印的内容强行转成字符，这会导致某些数据类型并不能直接查看到内容（如Object，Function）
    document.write 还非常注重执行时机。页面完全加载结束之前执行，为正常想页面打印内容；页面加载结束后执行，则会覆盖整个document

  2. 将信息打印到浏览器的控制台

    console.log("hello world")

    console 是个浏览器对象，除了log之外还有很多其他打印信息的方法
    console 会保持原有数据类型打印，不会对数据进行强制转换
    console 可以接收多个打印数据，之间使用 , 隔开
    console 可以根据数据的引用地址，看到将来的异步数据，这需要你对程序过程有所了解，否则你可能不太好判断当前数据是不是这一刻的数据
    console 打印的位置为浏览器的控制台，这里不是DOM的范围，所以无法解析标签，并且不会对DOM造成任何影响

  3. 弹出框显示信息

    alert("hello")

    alert 会将信息显示在浏览器的弹出框中
    alert 会将要打印的内容强行转成字符，这会导致某些数据类型并不能直接查看到内容（如Object，Function）
    alert 同时可以停止浏览器加载代码
    浏览器解析代码的顺序（从上到下，从左到右）

五、数据类型及检测方式

  1. 数据类型：所有需要计算机处理的信息都可以称为数据，数据是放在计算机的内存中的，由于计算机只能识别0和1，所以需要对不同类型的数据进行转义，转义的结果会导致所需空间不同，为了方便计算机储存数据，JS中划分了多种数据类型：
    • 字符型（string）：所有使用引号包裹的数据，单'，双"，反`。表示了数据最原始的格式，是元数据的一种。
    • 数值型（number）：表示数字，包括：0，1，2，3，4，5，6，7，8，9，NaN。
    • 布尔型（boolean）：表示真或假，包括：true，false。
    • 对象型（object）：表示数据的打包，多个数据的集合。
      • 数据的有序集合使用中括号[]包裹，表示array对象，如[值1,值2,值3]
      • 数据的无序集合使用花括号{}包裹，表示object对象，如：{键1:值1,键2:值2}
    • 函数型（function）：表示实现了某个功能的代码段的打包。一般使用function(){}表示。
    • undefined（undefined）：一种特殊类型，当变量被声明，但未赋值时，类型为undefined。
    • null(object)：空指向，只有一个指针，但是没有指向任何数据，会被typeof检测出object
    • symbol(symbol)：类字符数据，用来表示字典量状态，ES6新增数据类型 *
  2. 数据类型的检测 - 关键字：typeof
    • typeof 要检测的数据 或 typeof(要检测的数据)
      • 执行结果就是数据对应类型的单词标志，标志自身以字符型数据展示
      • typeof检测null时得到的是object，所以typeof无法区分null *

六、变量的概念和使用

  1. 变量：用来存储数据的容器。不同的变量存储不同的数据。根据存储的数据类型的不同，变量的类型也不同。

  2. 创建变量 - 关键字：var

    • 语法：var a

  3. 变量赋值

    • 赋值运算符：=
    • 赋值运算符左边，为变量；赋值运算符右边为数据或其他变量
    • 赋值运算符用于将右侧的数据或变量，存储在左侧的变量名中
    • 语法：a = "hello"

  4. 为了方便使用，声明变量还可以简写成如下形式：

    • 声明时立即赋值：var abc = 123;
    • 声明多个变量并赋值：var abc, qwe=10, asd=20, zxc;

  5. 变量名的命名规则

    • 必须使用字母或下划线或$开头，变量中不允许出现特殊字符
      如：_abc, $123, abc123, msg
    • 不允许使用关键字，保留字（见下方表格）
      如：var, typeof,
    • 尽量语义化
      如：age, sex, name
    • 尽量使用数据类型的首字母做前缀
      如：aChild, oImg, sTitle
    • 组合单词，使用驼峰式
      • 大驼峰：从第一个单词的首字母开始大写
        如：CarFactory, CreateTable, AddEvent
      • 小驼峰：从第二个单词的首字母开始大写
        如：productDetailList, bannerImgName, menuTitle
    • 小技巧：使用个性化的前缀，避开敏感关键字和保留字
      如：yslTypeof, _var, $this

  6. 变量的原理：计算机程序运行在内存中，当使用关键字 var 声明一个变量时，计算机会从内存中划分一个空间，为存放不同类型的数据做准备。

    • 根据在内存中的存储形式分：

  7. 关键字和保留字
    关键字：

breakdoinstanceoftypeofcaseelse
newvarcatchfinallyreturnvoid
continueforswitchwhiledebugger*function
thiswithdefaultifthrowdelete
intry

保留字（未来可能作为关键字存在）：

abstractenumintshortbooleanexport
interfacestaticbyteextendslongsuper
charfinalnativesynchronizedclassfloat
packagethrowsconstgotoprivatetransient
debuggerimplementsprotectedvolatiledoubleimport
publictopbottomleftright

小提示：凡是官方已经定义了功能的方法或函数(非关键字或保留字)，如果你的本意不是为了覆盖或重写他们，也不要直接作为变量名，如：alert，console，sort，repeat
过于语义化的单词，也不推荐直接使用，如：button；
可以添加前缀后使用，如：myButton，backButton，_button等

七、运算符

JS中的常见运算符有：算术、赋值、关系、逻辑、自增自减等

  1. 算术运算符：+，-，*，/，%

    var a = 1, b = 2;
console.log(a + b);		// 3
console.log(a - b);		// -1
console.log(a * b);		// 2
console.log(a / b);		// 0.5
console.log(a % b);		// 1

// + 两边只要有一边是字符，运算过程就是字符串的拼接，结果必然是字符型数据
// - * / % 会将两边的数据，先隐式转成数值，再进行运算（能转则转，不能转得到NaN）

var a = "1", b = "2";
console.log(a * b);		// 2
console.log(a / b);		// 0.5
console.log(a - b);		// -1
console.log(a + b);		// "12"	  *****

    +，在js中，有两层中功能：

    1. 算数之间的加法；
    2. 字符串的连接；
      如果js的执行遇到了 + 号，执行过程中，会先检测加号两边的数据类型，如果发现字符型，那就是字符的拼接

    在js中，有许多运算符和我们概念中的运算符都是不一样的。
    比如：= == ===
    并且不同数据类型之间的运算得到的结果，可能不是我们意想中的结果
    我们需要关注的，就是这些不一样的部分

  2. 关系运算符： <，<=，>，>=，!=，==，!==，===

    var num1 = 108;
var num2 = 36;
console.log(num1 > num2);		// true
console.log(num1 >= num2);		// true
console.log(num1 < num2);		// false
console.log(num1 <= num2);		// false

var num1 = "108";
var num2 = 36;
console.log(num1 > num2);		// true
console.log(num1 >= num2);		// true
console.log(num1 < num2);		// false
console.log(num1 <= num2);		// false

// 两边只要有一边是数值，另一边也会转成数值，再进行运算

var num1 = "108";
var num2 = "36";
console.log(num1 > num2);		// false
console.log(num1 >= num2);		// false
console.log(num1 < num2);		// true
console.log(num1 <= num2);		// true

var num1 = "a";
var num2 = "A";
console.log(num1 > num2);		// true
console.log(num1 >= num2);		// true
console.log(num1 < num2);		// false
console.log(num1 <= num2);		// false

// 两边都是字符，按照字符的比较规则：逐位按照ASCII码进行比较
	// a~z：97~122
	// A~Z：65~90

var num1 = "108";
var num2 = 108;
console.log(num1 == num2);		// true
console.log(num1 != num2);		// false
// 两边只要有一边是数值，另一边也会转成数值，再进行运算

console.log(num1 === num2);		// false
console.log(num1 !== num2);		// true
// 没有数据类型转换，不仅比较数据，还比较类型
    1. >，>=，<，<=，==，!=：两边只要有一边是数值，另一边也会转成数值，再进行运算
    2. ===，!==：没有数据类型转换，不仅比较数据，还比较类型
    3. 两边都是字符，字符的比较规则：逐位按照字符编码（ASCII）进行比较
    4. 运算结果为布尔值

  3. 逻辑运算符：&&，||，!

    // ||：或的两边只要有一个值为true，结果就是true；
console.log(true || false);		// true
console.log(false || true);		// true
console.log(true || true);		// true
console.log(false || false);	// false

// &&：且的两边只要有一个值为false，结果就是false；
console.log(true && false);		// false
console.log(false && true);		// false
console.log(true && true);		// true
console.log(false && false);	// false

// !：非，取反
console.log(!true);				// false
console.log(!false);			// true
    1. ||：或的两边只要有一个值为true，结果就是true；
    2. &&：且的两边只要有一个值为false，结果就是false；
    3. !：非，取反
    4. 一般用来运算布尔，得到的结果一般也是布尔

  4. 赋值运算符：=，+=，-=，*=，/=，%=

    var num1 = 10;
num1 += 3;
console.log(num1);		// 13

var num2 = 10;
num2 -= 3;
console.log(num2);		// 7

var num3 = 10;
num3 *= 3;
console.log(num3);		// 30

var num4 = 10;
num4 /= 3;
console.log(num4);		// 3.333333...

var num5 = 10;
num5 %= 3;
console.log(num5);		// 1
    1. =
      将=号右侧的数据或变量，存储在左侧的变量中
    2. +=，-=，*=，/=，%=
      规则：参考算术运算符

  5. 自增自减运算：++，--

    • ++：表示在变量原有的基础上增加1
    • --：表示在变量原有的基础上减小1
    // 后自增或后自减：先使用原数据，再进行自增或自减计算
var a = 1;
console.log(a++);		// 1
console.log(a);			// 2

var b = 1;
console.log(b--);		// 1
console.log(b);			// 0

// 前自增或前自减：先进行自增或自减，再使用计算之后的数据
var a = 1;
console.log(++a);		// 2
console.log(a);			// 2

var b = 1;
console.log(--b);		// 0
console.log(b);			// 0

    前自增与后自增有本质的区别，他们相同点都是为自身加了1，不同点是:

    1. 前自增：先计算（+1），在使用计算后的数值
    2. 后自增：先使用数值，再加计算（+1）

    前自减和后自减同上

  6. 运算符的优先级：算术 > 比较 > 逻辑 > 赋值

    // 已知一个年份2010，判断是否是闰年
// 闰年：1. 能被4整除，不能被100整除；2. 能直接被400整除
var year = 2012;

var flag = year % 4 === 0 && year % 100 !==0 || year % 400 === 0;

console.log(flag);

八、编程习惯

  1. 语句结束要加分号，虽然不加分号在JS语法上没有什么问题，但是建议不要省略分号，加了分号之后可以使用软件压缩。
  2. 这是一种良好的编程习惯（JavaScript权威指南）

九、练习题

  1. 熟练掌握以上所有知识点
  2. 为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？
  3. 小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。
    它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。
    提示：摄氏度与华氏度的转换公式为：摄氏度 = 5/9.0*(华氏度-32)
  4. var k=10;
    var sum = k++ + ++k +k +k++;
    console.log(k);
    console.log(k);
  5. 计算一个半径为80cm的圆的面积。打印到页面上。公式：π * r * r。假设：π = 3.1415
  6. 计算圆的周长，公式：2 * π * r
  7. 角度转弧度，公式：arc = π / 180 * deg

十、拓展

拓展1：关于浮点数：
电脑在运算过程中以正确的二进制浮点进行运算，但是我们输入的都是十进制的数，这两者并不是总是能转化的那么准确，有时候会得到正确的结果，但有时候就没那么幸运。

console.log(0.6+0.2);		// 0.8
console.log(0.7+0.1);		// 0.7999999999999999

拓展阅读：关于计算机中浮点数的精度计算问题

拓展2：NaN的概念和应用
NaN：是一种特殊的Number类型，表示非法的数值运算结果或意外转换的数字，NaN和任何数据都不相等。自身与自身也不相等。

console.log(NaN == NaN);	// false

var a = 0;
var b;
var c = a + b;
console.log(c);				// NaN

如何判断NaN
可以使用isNaN()函数，该函数判断括号内的值是否是NaN，是就返回true，不是就返回false

var a = 0;
var b;
var c = a + b;
console.log(c);				// NaN
console.log(isNaN(c));		// true

// 注意：isNaN内会发生隐式类型转换
// 当数据能够被严格转成数值时，isNaN的结果为false，表示不是NaN（见下章：数据类型的转换）
console.log(isNaN( "hello" ));	// true
console.log(isNaN( "123a" ));	// true
console.log(isNaN( "123" ));	// false
杨树林er
关注
  • 11
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
第一章 JavaScript基础语法
05-21
第一章 JavaScript基础语法 第一章 JavaScript基础语法 第一章 JavaScript基础语法
JavaScript 第一章 基本语法 1~3节
03-22
NULL 博文链接：https://hotstrong.iteye.com/blog/999215
用js写一个函数，可以计算圆面积，根据用户输入的半径，返回圆的面积（圆周率用3.14计算）
qq_65442604的博客
06-15 3332
<script type="text/javascript"> function getArea(){ var r=prompt("请输入半径"); area=3.14*r*r; return area; } alert(getArea()); </script>
js核心基本语法（全面）
weixin_60941411的博客
04-09 3243
const：const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后的值不可再修改，const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。Number("3.14") // 返回 3.14 Number(" ") // 返回 0 Number("") // 返回 0 Number("99 88") // 返回 NaN。如果我们在js中写的方法都是全局的方法，在需要嵌入到别人的界面中的时候，这些全局的东西很可能会和别人的东西重名从而引发错误，所以说需要用js闭包包起来。
【JavaScript】基本语法大全
我的主页
02-24 7973
本期讲解：JavaScript中的数据类型、表达式、运算符、选择与循环结构。
JavaScript基础语法
chenchenchencl的博客
03-09 1061
JavaScript基础语法
JavaScript基本语法
weixin_43466575的博客
03-29 247
未定义型（Undefined）也只有一个特殊的undefined值。未定义型用于声明的变量还未被初始化时，变量的默认值为undefined。与null不同的是，undefined表示没有为变量设置值，而null则表示变量（对象或地址）不存在或无效。
javascript开发技术大全－第1章javascript概述
10-28
JavaScript 为 HTML 设计师提供了一种编程工具HTML 创作者往往都不是程序员，但是 JavaScript 却是一种只拥有极其简单的语法的脚本语言！几乎每个人都有能力将短小的代码片断放入他们的 HTML 页面当中。
Javascript学习笔记-学JS的一手教程
最新发布
05-07
第一章 CSS样式表 1 1.1 什么是CSS 1 1.2 CSS的几种设置方式 1 1.2.1 内联样式表 1 1.2.2 嵌入样式表 2 1.2.3 外部样式表 2 1.2.4 输入样式表 3 1.3 样式规则的选择器 3 1.3.1 Html selector 3 1.3.2 class selector...
计算半径为5的圆的面积并打印出来
03-05
计算圆的面积并打印出来，C#作业，初学者，不知是否正确
JS　函数 求圆的面积总结
热门推荐
qq_zxt的博客
05-07 2万+
JS 函数 //1. function circle(r) { this.r=r this.Area=Area this.Circum=Circum } function Circum() { return(3.14*2*this.r)  } function Area() { return(3.14*this.r*this.r) } r=par
利用JavaScript计算圆面积
weixin_46066327的博客
06-09 4351
编写函数，实现求圆面积 从页面输入圆半径，在控制台中打印出圆面积。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
js基本语法介绍
崔博伦 一路有你
06-25 1448
1、js的六种数据类型 （1）Boolean（布尔），取值：True，False （2）Number（数字），取值：所有数字，包含整数小数等，范围相当于double （3）String（字符串），取值：所有字符串 （4）Undefined（未定义），取值：只有一个值undefined （5）Null（空对象），取值：只有一个值Null （6）Object（对象类型），取值：任何对象、a
JavaScript基本语法（一）
weixin_33946605的博客
12-21 140
目录 1. 语句 2. 变量 3. 小结 JavaScript基本语法（一）是JavaScript核心知识点（ECMAScript）的基本语法的第一部分，主要介绍了：JavaScript语句、表达式、变量和数据类型（不包括函数类型）的基本知识点，函数类型将在下一章《JavaScript函数（二）》中详细探讨； 1.语句 JavaScr...
javascript基本语法
新新
07-31 1747
1、javascript既是一种描述语言，也是一种基于对象和事件驱动，并且具有安全性能的脚本语言。 2、 脚本的基本结构：            javascript 语句；    -->是注释标记，浏览器不支持javascript时，这些标记将被忽略。3、javascript脚本在浏览器中是如何执行的？浏览器从标记开始，依次往下解释执行。4、document

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

杨树林er

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

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

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

打赏作者

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

抵扣说明：

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

余额充值