JavaScript基础语法
序言
1.JavaScript学习方法:
编程思维:更高效的解决问题、更全面的思考、更清晰的逻辑
布鲁姆教育将思维学习分六个层次:
记忆、理解、应用、分析、评价、创造
2.什么是JS:
JavaScript 直译式、动态类型、弱类型、基于原型的脚本语言
js跨平台 ==> windows linux ios 安卓 …
3.JS发展史:
==>1994年,网景公司(Netscape)发布了Navigator浏览器0.9版
==>发明一种全新的语言。
==> liveScript ==> javaScript ==> ECMAscript
- 1995年Sun公司将Oak语言改名为Java,正式向市场推出。Sun公司大肆宣传,许诺这种语言可以"一次编写,到处运 行"(Write Once, Run Anywhere),它看上去很可能成为未来的主宰。
- 网景公司动了心,决定与Sun公司结成联盟
- 34岁的系统程序员Brendan Eich登场了。1995年4月,网景公司录用了他,他只用10天时间就把Javascript设计出来了。(多态语言)
4.JS组成部分:
ECMAScript语法
DOM文档对象模型(Document Object Model)
BOM浏览器对象模型(Browser Object Model)
一、JS用法
1.js引入方式,内嵌式
用法:内嵌式的 js 代码会在页面打开的时候直接触发
代码如下(示例):
<!-- 在 html 页面书写一个script 标签,标签内部书写 js 代码 -->
<script type="text/javascript">
//type 书写值可写可不写
alert("这是一个弹窗");
</script>
<!--
scirpt标签可以放在 head 里面也可以放在 body 里面
-->
2.js引入方式,行内式
用法:写在标签上的 js 代码需要依靠事件(行为)来触发
代码如下(示例):
<!-- 写在 a 标签的 href 属性上 -->
<a href="javascript:alert('这是一个弹窗');">点击试试</a>
<!-- 写在其他元素上 -->
<div onclick="alert('这是一个弹窗')">点击试试</div>
<!--
onclick(点击事件):当点击元素的时候执行后面的 js 代码
-->
3.js引入方式,外链式
用法:新建一个 .js 后缀的文件,在文件里书写 js 代码,通过script标签的src引入外部js后缀的文件
代码如下(示例):
//我是 index.js 文件
alert("这是一个弹窗");
<!--很多html页面都可以调用js4.js页面-->
<script src="../js/js4.js" type="text/javascript" charset="utf-8">
二、JS调试与注释
1.调试方法
代码如下(示例):
alert(“123”) // 弹出提示框输出
console.log(”123“) // 在控制台打印:
document.write('123') //在页面中输出<不推荐使用>
2.调试代码的流程
- 看是否有报错
- 单词错误
- 输出调试各种数据(变量)
- 思考怎么解决(查看比较,百度,看文档)
3.关于注释
- 最讨厌别人让我写注释
- 最讨厌别人不写注释
代码如下(示例):
// 单行注释,注释内容不可以换行 ctrl+/
/* 多行注释 alt+shift+a (Visual Studio Code)
注释内容
可以换行
*/
/**
* 文档注释
* 说明类、方法的参数及使用方式。。。
* 功能介绍
*/
三、JS变量
一个变量名只能储存一个值
当再次给一个变量赋值的时候,前面一次的值就会被覆盖掉
变量名严格区分大小写
代码如下(示例):
var abc = 123
// 把123这个数据赋值给变量abc
1.使用关键字var
var str = 'abc'; // 显式声明变量
2.声明变量可以不给初始值
var num // 显式声明变量
3.声明变量可以不使用关键字var
age = 18 // 隐式声明变量
console.log( age ) // 18 引用变量
4.但是不允许直接使用一个未声明的变量,会报错
console.log( word );
// Uncaught ReferenceError: hehe is not defined at 4-变量.html:25
// 未捕获 引用错误 :word 未定义 (报文) 报错位置
5.标识符(变量、函数、属性、参数,你自己命名的东西)命名规范:
/*
1.第一个字符不能是数字,可以字母、下划线、美元符号$
2.命名中不能包含空格
3.从第二个字符开始可以是数字、字母、下划线、美元符号$
4.标识符命名要语义化(有语义有含义)非必须
5.不可以使用关键字和保留字命名
*/
var var = 123
console.log( var )
//Uncaught SyntaxError: Unexpected token 'var' 4-变量.html:37
// 语法错误
6.语义化命名规范:
var userAgeNumber = 23 //驼峰命名法
var UserAgeNumber = 23 //帕斯卡命名法
var user_age_number = 23 //下划线命名法
var num_user_age = 23
var nUserAge = 23 //匈牙利命名法
四、JS数据类型
- ES3 有 5 种基本数据类型:number、null、undefined、boolean、string;1 种复杂数据类型 object。ES6+ 后面新增了两种基本数据类型:Symbol, Bigint。如果把函数 function 也算作一种数据类型,就是 9 种。
1.number数字类型
- 一切数字都是数值类型(包括二进制、十进制、十六进制)
- NaN:非数字类型
- 正数、负数、整数、浮点数、NaN 都叫 number
- NaN : Not a Number 非数字,代表错误的计算结果
NaN特性:
1. 任何与NaN进行计算结果都是NaN
console.log( 1 + NaN )// NaN
console.log( 1 - NaN )// NaN
2. NaN与任何值都不相等,包括它自己也不相等
console.log( NaN === NaN )// false
isNaN() 判断一个数据是否为NaN,返回布尔值
console.log( isNaN(NaN) ) //true
console.log( isNaN(123-'a') ) //true
console.log( isNaN(123) ) //false
console.log( isNaN('123') ) //false
console.log( isNaN('a123') ) //true
console.log( isNaN( Number('123') ) )
console.log( isNaN( Number('a123') ) )
console.log( Number('123') ) //123
console.log( Number('a123') ) //NaN
isNaN 判断一个值是否为纯数字字符串
var qq = '2437325196'
console.log( isNaN(qq) )
小数加减出现的系统bug
console.log( 0.1 + 0.2 )// 0.30000000000000004
console.log( 0.1 + 0.7 )// 0.7999999999999999
产生原因:
10进制小数转2进制:小数位乘以2,取整数部分,如果还有小数部分继续
于是出现了无限循环小数
解决方案:转成整数计数
var val = 0.1+0.2;
//转成整数计数,转成字符串输出
var price = (0.1*100 + 0.2*100)/100
//将数字转成字符串,并保留2位小数
var v = price.toFixed(2)
console.log( v )// '0.30'
Number类型常用的两种解析方法:
1. parseInt 解析整数
从左往右解析,如果第一个字符是非数字,则返回NaN
从左往右解析,一直解析到非数字,解析结束,并返回前面解析到的整数
console.log( parseInt(23.45) )// 23
console.log( parseInt('23.45') )// 23
console.log( parseInt('200px') )// 200
console.log( parseInt('a200px') )// NaN
2. parseFloat 解析浮点数,解析规则基本同上
console.log( parseFloat(23.45) )// 23.45
console.log( parseFloat('23.45') )// 23.45
console.log( parseFloat('200px') )// 200
console.log( parseFloat('a200px') )// NaN
2.string字符串(用双引号或单引号括起来的都会被解析成字符串)
var str1 = '123'
var str2 = "abc"
var str3 = '你好'
var str4 = 'str1'
//变量.toString()中null 和 undefined 数据类型不能使用
//String()所有数据类型都可以使用
//使用加法运算符
//在 JS 里面,+ 由两个含义
//字符串拼接:只要+任何一边是字符串,就会进行字符串拼接
//加法运算:只有+两边都是数字的时候,才会进行数学运算
3.boolean 布尔值
var bool1 = true;
var bool2 = false;
//在 js 中,只有''、0、null、undefined、NaN,这些是false,其余都是true
4.undefined 值未定义
var a
var b = undefined
console.log( a ) // undefined
console.log( b ) // undefined
5.null 空值/空对象的引用
var obj = null
obj = {}
6.Object 对象类型 (Array {} function)
Array数组
var arr = [1,2,3]//数组
对象{}
var obj = {key:'value'}// 键值对
函数
var fun = function (){}
typeof 运算符(返回运算数据的数据类型),返回有6种:
console.log( typeof 123 )// 'number'
console.log( typeof 'abc' )// 'string'
console.log( typeof true )// 'boolean'
console.log( typeof undefined )// 'undefined'
console.log( typeof [1,2,3] )// 'object'
console.log( typeof {a:123} )// 'object'
console.log( typeof function (){} )// 'function' ECMA规定
console.log( typeof null )// 'object'
五、运算符
运算符
1. 赋值运算符:= += -= *= /= %=
var abc = 8
abc += 2
//等价于:abc = abc + 2
abc %= 3
//等价于:abc = abc%3
//其余同理
2. 算术运算符:+ - * / %
易错点:
//一个小的数模大的数,余小的数
2%7 == 2
(-2)%7 == -2
2%(-7) == 2
(-2)%(-7) == -2
//余数的正负号取决于前面数字的正负号
7%4 == 3
(-7)%4 == -3
(7)%(-4) == 3
(-7)%(-4) == -3
3. 关系运算符(比较运算符),始终返回布尔值
等于: ==
只比较值是否相等,不考虑数据类型
console.log( 2 == '2' ) //true
全等: ===
既要值相等也要数据类型相等(对于引用类型则比较内存地址)
console.log( 2 === '2' )// false
console.log( {} === {} )//false
比较规则
// 两个数字比较,正常比较大小
console.log( 2 > 3 )// false
// 一个数字和纯数字字符串比较,把纯数字字符串转成number再比较
console.log( 2 > '12' )// false
// 两个字符串比较,先比较第一个字符的ASCII码值,不能区分大小再比较后一位
console.log( '3' > '21' )//true
console.log( 'abc' > 'abd' )//false
0 -- 48 a -- 97 A -- 65
// 非正常比较都返回false
// 一个数字和非纯数字字符串无法比较,返回false
console.log( 2 > 'a12' )// false
console.log( 2 < 'a12' )// false
自增(++)自减(–)运算符
var i = 1
var num = 2
num = i++ // ++后置,先取值,再自增
num = ++i // ++前置,先自增,再取值
console.log( num ) // 1 2
var k = 0
console.log( k++ + ++k + k * 2 + k++ )// 8
// 0 + 2 + 2 * 2 + 2
逻辑运算符:与 &&、或 ||、 非 !
返回值:布尔值
//&&运算符
console.log( true&&true )// true
console.log( false&&true )// false
console.log( true&&false )// false
console.log( false&&false )// false
console.log( true||true )//true
console.log( true||false )//true
console.log( false||true )//true
console.log( false||false )//false
console.log( !true )//false
console.log( !false )//true
//短路操作:如果判断前一个结果就能决定整体的结果,
//那么程序不会去执行后续的语句
//符号左边必须为true并且右边也是true,才会返回true
//只要有一边不是true,那么就会返回false
var a = 3
var b = 4
var c = 5
a>b&&(c=6)
console.log( c )//5
//a>b为false,逻辑表达式的结果已经确定(false),所以不会执行后续的赋值语句:(c=6)
a<b&&(c=6)
console.log( c )//6
a<b&&console.log(123)
//等同于:
if (a<b) {
console.log(123)
}
//||运算符
a>b||(c=7)
console.log(c)//7
a<b||(c=7)
console.log(c)//5
console.log( 0||2 )//2
console.log( 1||2 )//1
console.log( a<b||2 )//true
console.log( a>b||2 )//2
//符号左边为true或者右边为true,都会返回true
//只有两边都是false,那么就会返回false
//!运算符
//进行 取反 的运算
//本身是true的,会变成false
//本身是false的,会变成true
!true //false
!false //true
三元运算符(三目运算符)
格式:(逻辑表达式) ? (为true执行此代码) : (为false执行此代码)
逗号运算符: ,
var a = 1, b = 2, c = 3
console.log( a,b,c )// 1 2 3
console.log( (a,b,c) )// 3 返回一个整体的最后一个值
var num = 0
for( var i = 0,v = 0; i < 5,v < 9; i++,v++){
num = i + v// 8+8
}
console.log( num )// 16
console.log( (2>3,4<5) )
//等价于
console.log( (2>3||4<5) )
注意:优先级的使用
结合优先级从高到低
1. () 优先级最高
2 .一元(单目)运算符:++,–,!
3 .算术运算符: 先*,/,% 再+,-
4. 关系运算符:>,>=,<,<=
5 .相等运算符:== === != !==
6 .逻辑运算符:先&&,再||
7 .赋值运算符
口诀:单目算术位关系,逻辑三目后赋值