Java教程

【学习笔记】JavaScript基础

本文主要是介绍【学习笔记】JavaScript基础，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

JavaScript基础

  • 初识JavaScript
    • 1. 什么是JavaScript
    • 2. 浏览器执行JS
    • 3. JS的组成
    • 4. JS的三种书写方式
  • JS语言基础
    • 1. 注释
    • 2. JS输入输出语句
    • 3. 变量
    • 4. 标识符、保留关键字
      • 标识符
      • 保留关键字
    • 5. JS数据类型
      • 基本数据类型
        • 1） 数字Number
        • 2）字符串String
        • 2）布尔类型Boolean
        • 3）Undefined 和Null
        • 5）typeof
        • 4）数据类型的转换
      • 复杂数据类型
  • 6. JS运算符

初识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 中的新词。
    abstractargumentsawait*boolean
    breakbytecasecatch
    charclass*constcontinue
    debuggerdefaultdeletedo
    doubleelseenum*eval
    export*extends*falsefinal
    finallyfloatforfunction
    gotoifimplementsimport*
    ininstanceofintinterface
    let*longnativenew
    nullpackageprivateprotected
    publicreturnshortstatic
    super*switchsynchronizedthis
    throwthrowstransienttrue
    trytypeofvarvoid
    volatilewhilewithyield

5. JS数据类型

基本数据类型

Number、String、Boolean、Undefined、Null

1） 数字Number

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

值指数符号
52bits11bits1bits
0-5252-6263
  • 精度：
    • 整数（不使用指数或科学计数法）会被精确到 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 			   // 非数字
  • 进制的前缀
    二进制八进制十六进制
    0b00x

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()进行转换
    falsetrue
    ‘’、0、NaN、null、undefined其他所有值

复杂数据类型

object类型，在后面重点讲到

6. JS运算符

待续…

这篇关于【学习笔记】JavaScript基础的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航