【学习笔记】JavaScript基础

2022-10-13 18:02:29

JavaScript基础

初识JavaScript

1. 什么是JavaScript

  • 运行在客户端的脚本语言，创始人Brendan Eich
  • 脚本语言，不需要编译，编译是在代码执行直接编译生成中间代码文件如exe，解释器是在代码运行时进行解释并立即执行
  • 可基于Node.js技术进行服务器端编程

2. 浏览器执行JS

浏览器分为渲染引擎和JS引擎两部分

  • 渲染引擎： 解析HTML和CSS，俗称内核，如chrome的blink
  • JS引擎： 也成为JS解释器，用来读取网页中的JS代码，如chrome中的V8（号称最快的JS引擎）

3. JS的组成

  • ECMAScript： 规定了JS的编程语法和基础知识，是所有浏览器厂商共同遵守的一套JS语法工业标准
  • DOM： 文档对象模型，是W3C组织推荐的处理可扩展置标语言的标准编程接口。通过DOM可操作页面上的各种元素（大小、位置、颜色等）。
  • BOM： 浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可操作浏览器窗口，比如弹出框、控制浏览器跳转、分辨率等。

4. JS的三种书写方式

  • 行内式： 直接写在元素内部
    <!-- 行内式的JS直接写到元素内部 -->
<input type="button" value="点一下" onclick="alert('行内式')">
  • 内嵌式： 写在<head>或<body>标签中
    <!-- 写在`<head>`或`<body>`中的<script>标签内 -->
 <script>alert('内嵌式')</script>
  • 外联式：
    <!-- 放置与外部文件中 -->
 <script src="test.js"></script>

JS语言基础

1. 注释

  • 单行注释
//单行注释 ctrl + /
  • 多行注释
/*
多行行注释 shift + alt + a
*/

2. JS输入输出语句

方法 说明 归属
alert(msg) 浏览器弹出警示框 浏览器
console.log(msg) 浏览器控制台打印输出信息 浏览器
prompt(msg) 浏览器弹出输入框，用户可输入 浏览器

3. 变量

JavaScript 变量是存储数据值的容器，通过变量获取数据。 JavaScript 变量必须以唯一的名称的标识。

  • 变量命名规范：
    • 名称必须以字母开头
    • 名称可包含字母、数字、下划线和美元符号
    • 名称也可以$ 和 _开头，一般不这么做
    • 名称对大小写敏感
    • 名称不能使用保留字，如var
    • 驼峰命名规范： 首单词的首字母小写，后面单词的首字母大写

4. 标识符、保留关键字

标识符

开发人员为变量、属性、函数、参数等取的名字，不能是关键字和保留字

保留关键字

在 JavaScript 中，一些标识符是保留关键字，不能用作变量名或函数名。

  • 用星号标记的关键词是 ECMAScript 5 和 6 中的新词。
    abstract arguments await* boolean
    break byte case catch
    char class* const continue
    debugger default delete do
    double else enum* eval
    export* extends* false final
    finally float for function
    goto if implements import*
    in instanceof int interface
    let* long native new
    null package private protected
    public return short static
    super* switch synchronized this
    throw throws transient true
    try typeof var void
    volatile while with yield

5. JS数据类型

基本数据类型

Number、String、Boolean、Undefined、Null

1） 数字Number

与许多其他编程语言不同，JavaScript 不会定义不同类型的数，比如整数、短的、长的、浮点的等等。JavaScript 数值始终以双精度浮点数来存储，根据国际 IEEE 754 标准。此格式用 64 位存储数值。使用isNaN()判断是否非数字，非数字返回true

值 指数 符号
52bits 11bits 1bits
0-52 52-62 63
  • 精度：
    • 整数（不使用指数或科学计数法）会被精确到 15 位。
    • 小数的最大数是 17 位，但是浮点的算数并不总是 100% 精准
    /*精度*/
var a = 999999999999999;   // x 将是 999999999999999
var b = 9999999999999999;  // y 将是 10000000000000000
var c = 0.2 + 0.1;         // x 将是 0.30000000000000004
/*特殊值*/
var d = Number.MAX_VALUE   // 最大值：1.7976931348623157e+308
var e = Number.MIN_VALUE   // 最小值：5e-32
var f = Infinity	       // 无穷大
var g = NaN 			   // 非数字
  • 进制的前缀
    二进制 八进制 十六进制
    0b 0 0x

2）字符串String

JavaScript 字符串是引号中的零个或多个字符。可以使用''或""，推荐使用''，因为HTML标签内的属性使用""。

  • 字符串长度
    内建属性length可返回字符串的长度
    var str = "ABCDEFG";
var strLength = str.length;
  • 特殊字符——转义
    转义符 含义
    \n 换行
    \ \
    ’ ’
    " "
    \b 退格
    \r 回车
    \t 水平制表符，tab 缩进
    \v 垂直制表符
    \f 换页
    ’ ’
  • 字符串拼接
    • 使用+对字符串进行拼接
    • 字符串和字符串的拼接
    • 字符串和其他类型的拼接
    var x = "123" + "456";	// x = "123456"
var y = "123" + 456;	// y = "123456"
var z = "123" + true;	// z = "123true"

2）布尔类型Boolean

布尔类型有两个值：true和false

var x = true + 1;	// x = 2
var y = false + 1;	// y = 1

3）Undefined 和Null

一个变量申明后未被赋值默认值为undefined，声明变量可以给undefined和null值

var x = undefined + "123"	// x = "undefined123"
var y = undefined + 123     // x = NaN
var z = null + "123"	    // z = "null123"
var r = null + 123	        // r = 123

5）typeof

typeof方法返回数据类型，返回结构有以下几种

  • string
  • number
  • boolean
  • undefined
  • function
  • object
typeof "Bill"              		// 返回 "string"
typeof 3.14                		// 返回 "number"
typeof true                		// 返回 "boolean"
typeof false               		// 返回 "boolean"
typeof x                   		// 返回 "undefined" (假如 x 没有值)
typeof {name:'Bill', age:62} 	// 返回 "object"
typeof [1,2,3,4]             	// 返回 "object" (数组即对象)
typeof null                  	// 返回 "object"
typeof function myFunc(){}   	// 返回 "function"

4）数据类型的转换

  • 转换为字符串
    转换方式 说明
    变量.toString() 转换为字符串
    String() 强制转换为字符串
    + 通过拼接转换为字符串，隐式转换
    • 变量.toString()和String()的区别：
      • 变量.toString()不能转Undefined和null，可以转换进制数据传参2、8、10、16即可
      • String()可以将null和undefined转换为字符串，但不能转换进制字符串
  • 转换为数字型
    转换方式 说明
    parseInt(string) 将string类转换为整数数值型
    parseFloat(string) 将string类转换为浮点数数值型
    Number() 强制转换为数值型
    - * / 通过算式运算转换，隐式转换
    • 区别：
    /*parseInt()*/
var num1=parseInt("num123");    //NaN
var num2=parseInt("");          //NaN
var num3=parseInt("123.45")     //123
var num4=parseInt("101010",2)   //42
var num5=parseInt("123num")     //123
var num6=parseInt("0xff")       //255
/*parseFloat(string)*/
var num1=parseFloat("1234blue");    //1234
var num2=parseFloat("0xA");         //0
var num3=parseFloat("0908.5");      //908.5
var num4=parseFloat("3.125e7");     //31250000
var num5=parseFloat("123.45.67")    //123.45
var num6=parseFloat("")             //NaN
var num7=parseFloat("num123")       //NaN
/*Number()*/
var num1=Number("Hello World");  //NaN
var num2=Number("");             //0
var num3=Number("000011");       //11
var num4=Number(true);           //1
var num5=Number("num123")       //NaN
/*隐式转换*/
var num1 = '12' - 0				// 12
var num2 = '123' - '190'		// 3
var num2 = '123' * '1'			// 123
  • 转换为布尔型
    使用Boolean()进行转换
    false true
    ‘’、0、NaN、null、undefined 其他所有值

复杂数据类型

object类型，在后面重点讲到

6. JS运算符

待续…

上一篇：shell脚本中的变量赋值


下一篇：编写程序输入实现123->321