javascript---(01)--js语法基础
程序员文章站
2022-07-03 18:22:40
javascript—(01)–语法基础1、js简介1.1 定义javascript是一种基于对象的，事件驱动的，跨平台的，客户脚本语言。1.2 作用对页面进行渲染，让其有行为。（让页面动起来，与后台数据进行交互）1.3 发展简史 1995年时，由Netscape公司（网景公司）的Brendan Eich开发出来的，最初名为liveScript,后来更名为javaScript是因为Java的发展（实则是蹭热度）。2、js的组成ECMAScript：定义语法规则DOM ： (d...
js语法基础
1、js简介
1.1 定义
javascript是一种基于对象的，事件驱动的，跨平台的，客户脚本语言。
1.2 作用
对页面进行渲染，让其有行为。（让页面动起来，与后台数据进行交互）
1.3 发展简史
1995年时，由Netscape公司（网景公司）的Brendan Eich开发出来的，最初名为liveScript,后来更名为javaScript是因为Java的发展（实则是蹭热度）。
2、js的组成
ECMAScript：定义语法规则
DOM ： (document object modle) 文档对象模型
BOM ：(browser object modle) 浏览器对象模型
3、JS和H5的关系
HTML可以看作就是js,html很多标签都依赖js的API实现
4、JS是如何运行的
4.1 js的引入：
js的引入有两种方式：
内嵌：<script type="text/javascript">js代码</script>
外部：<script src="../index.js"></script>
拓展：行内引入：在div中写js代码（不常用）
4.2 js的引入位置：
除了title标签以及style标签以外的其他地方都可以引入js.
4.3 经常犯的错误：
<script src="">document.write("酷哦！！！")</script>
因为使用src引用了外部的js文件，此时script标签里的document.write("酷哦！！！")不会被执行，当然也就意味着浏览器页面不会显示script标签中的 “酷哦！！！”
4.4 需要注意的问题：
<script> document.write("hello Wrold<\/script>"); </script>
因为“/”这个字符在html中有特殊的含义 ，“/”是转义字符，直接这么输出，程序在运行的时候可能会发生错误，此时可以在特殊字符前面直接添加一个“\”将其转为普通字符。
5、js中的注释
- // 单行注释
- /**/ 多行注释
6、js的输出
- document.write(“hello Wrold”); //页面输出hello Wrold，（不常用，可能会清除其他内容）；
- alert(“hello js”);//是一个弹出框，程序会阻塞，当用户点击确定按钮时，程序才往下执行,一般用于程序的测试。；
- console.log(“hello，js”);//用于测试代码。程序员常用，在浏览器的控制台输出
7、变量的概念及基本运算
7.1 什么是变量： 在程序运行的过程中，有可能发生变化的量称为变量
7.2 变量的声明：
var 变量名 = 值；
方式一： var a = 2, b = 3, c = 4;//一个var声明多个变量
//var a = 2 b = 3 c = 4；//变量之间没有逗号会报错 但若不加分号而直接换行则不会报错（但也不建议这么声明变量），在后期的代码优化（压缩代码到一行上，去掉空格所占的空间）会报错。
方式二： var a = b = c = 5;
只声明了变量a，b和c没有得到声明而是直接赋了值，并都赋值为5 。
方式三：var a = 1;var b = 2;var c = 3;
方式四： var a = 2;
var b = 3;
var c = 4;
方式五： var a = 2
var b = 3
var c = 4//这样声明代码不会报错 ，但也不建议这么声明变量，在后期的代码优化（压缩代码到一行上，去掉空格所占的空间）会报错。
方式六：无var声明
a=2;b=3;c=4;//不建议使用。
举例：
alert(a); //a没有声明，程序会报错
var a; //声明了变量a，但a未被赋值，a是undefined ，undefined表示未被定义。
var a = 3; //声明了a并赋值为3，表示声明并初始化了变量a。
注：为防止程序出现不可控的错误，一行程序结束，务必加分号;表示一行程序结束，不加分号直接换行也可以运行，不报错，但是不建议这样写，未来要压缩代码变成一行时程序会报错。
7.3 变量之间的基本运算：
（1）多个同名变量，后面的会覆盖前面的，
如：
var a = 6;
var a = 8;
alert(a);//a最后赋值为8
输出结果为8，因为后面的a变量把前面的a变量覆盖了，变量在程序运行的过程中会可能会发生改变的。
（2）变量与变量之间可以进行一些简单的基本运算（+ - * /）
如:
var a = 3;
var b = 5;
var c = a + b;
var d = a * b;
var e = a / b;
var f = a - b;
console.log(c,d,e,f);
输出的值为计算的结果，c,d,e,f的值分别如：
注：1）一个数字与字符用+号来运算时，这时的加号不再是加法运算，而是一个连接符号，将左右两的边的值进行一个连接的操作。.
如：
var a=2;
var b="3";//有双引号的值在程序中叫字符串
console.log(a+b); //consol.log() 用于测试代码。程序员常用，在浏览器的控制台输出那么结果将会是23.
结果如下：
又如： var a=2;
var b="3abcdef";
console.log(a+b);
那么结果将会是23abcdef。
结果表现如：
2）当运算符不是加号，但是字符串中如果有一边是字符的纯数字，程序会自动把字符的纯数字转换成数字来运算；除了加法以外，只要有一边不是一个纯数字，结果就是NaN，NaN字符类型为number。
8、变量命名规则和关键字、保留字的介绍
8.1 命名规则：
1）变量名开头：字母、$、_ 三种字符开头；
如：var uName,$name,_name;
(错误写法：var 1name,%name;)
2）关键字：不能以关键字命名
如：var case;var break;
一些常见的关键字：
| break | do | instanceof | typeof |
|---|---|---|---|
| if | else | new | var |
| continue | for | switch | case |
| catch | finally | return | void |
| debugger | function | this | with |
| default | while | throw | delete |
| in | try | – | – |
3）保留字：不能以保留字命名(一些保留字命名不会报错，但如果ECMAScript在未来将保留字纳入关键字使用，程序就有可能出错，如之前的class，debugger,extends等保留字在es6语法中已经作为关键字使用了。)
| abstract | enum | int | short |
|---|---|---|---|
| boolean | export | new | var |
| continue | export | interface | static |
| byte | extends | long | super |
| char | final | native | synchronized |
| class | float | package | throws |
| const | goto | private | transient |
| debugger | implements | protected | volatile |
| double | import | public |
1、命名原则：
1）语义化：var userName = “tom”;//不建议直接使用name命名
2）驼峰命名法：var tangHongBo = “唐洪波”;
3）匈牙利法
根据不同的数据类型的变量来命名，一些常见的数据类型：
| 类型 | 前缀 | 类型 | 实例 |
|---|---|---|---|
| 数组 | a | Array | aItems |
| 布尔值 | b | Boolean | bIsComplete |
| 浮点数 | f | Float | fPrice |
| 函数 | fn | Function | fnHandler |
| 整数 | i | Integer | iItemCount |
| 对象 | o | Object | oDivl |
| 正则表达式 | re | RegExp | reEmailCheck |
| 字符串 | s | String | sUserName |
9、变量的数据类型
a.基本数据类型
-
number
-
string
-
boolean: 布尔类型，表示真true和假false;
-
null var obj = null; //空指针；
alert(typeof obj)；//obj 为null类型
alert(typeof null);//结果为object类型
-
undefined： undefined var
val;//声明但未定义的量，它有一个默认值为
b.引用数据类型(对象类型) object
c.typofe 是一种操作符 作用：用于检测一个变量是哪种数据类型。
10、赋值、关系、算术运算符的讲解
1.运算符：
赋值运算符、关系运算符、算术学运算符、逻辑运算符、三目运算符、自增自减运算符（是单目运算的一种）、（）运算符。
1）赋值运算符：
简单赋值 var a = 2;
复合赋值 var a = 2; a+=3 相当于 a = a+3; a=5;
2）关系运算符（关系运算符的结果是一个boolean型）：
<、 >、 <= 、>=、 ==、 ===（强等于，此时比较的不只是数值，还有数据类型，当数值和数据类型都相同的情况下结果才为真）、 !=（不等于）、 !==（不强等于，此时比较的不只是数值，还有数据类型） ;
注： var a = 4;
var b = 7;
var c = 8;
//a < b < c;
//alert(a > b < c);//比较时，不能连续写，这是数学的写法
//alert(a > b && b < c);
//在一个条件表达式（以条件来运行的式子叫表达式）中，如果有多个逻辑判断，程序优先执行逻辑与的表达式
//alert(a < b && a < c || b > c);//true
//alert( b > c || a < b && a < c && 5 > 6);//false
注：字符串的比较，比较的是ASCII值，并且是从左往右逐个比较，而不是整个数值相比；
数值与字符串的比较，此时的字符串会把字符串转化为数字后再进行比较。
关系运算的补充：
//特殊关系 =====
console.log(null == null);//true
console.log(null === null);//true
console.log(null == undefined);//true
console.log(null === undefined);//false
console.log(undefined === undefined);//true
console.log(1 == true);//true
console.log(188 == true);//false
console.log(0 == false);//true
console.log(NaN == NaN);//false
console.log(NaN === NaN);//false
console.log(Infinity == Infinity);//true
console.log(Infinity === Infinity);//true
对应结果如：
3）算术运算符;
+ - * / %(取余数)
注：a) 一个数字与字符用+号来运算时，这时的加号不再是加法运算，而是一个连接符号，将左右两的边的值进行一个连接的操作；
b)当运算符不是加号，但是字符串中如果有一边是字符的纯数字，程序会自动把字符的纯数字转换成数字来运算；除了加法以外，只要有一边不是一个纯数字，结果就是NaN，NaN字符类型为number。
4）逻辑运算：&& 与 || 或 ! 非
a:与(&&) ---只要有一个是假则为假，两个都为真才为真
true && true == true
false && false == false
false && true == false
true && false == false
b:或(||) ---只要有一个是假则为假，两个都为真才为真
true || true ==== true
true || false ===== true
false || true ===== true
false || false ===== false
c:非(！) ---取反运算
!false ==== true
5）自增自减运算
++/--:
++/--在前，先计算再赋值
++/--在后，先赋值再计算
如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var a = 2;
// var b = a++;
// console.log(a);//3
// console.log(b);//2，为什么是2，因为加加在后，a先保留原值进行赋值，所以b先保存了原来2的值
// var b = ++a;
// console.log(a);//3
// console.log(b);//3，为什么是3，因为加加在前面，先把a的值加了1之后再，把a的值赋值给了b，
//
//加加在前，先加一再赋值；加加在后，先赋值再加一
//var b = a++;//此时代码运算结束后：b=2 a=3
//var c = ++a;//此行代码运算结束后：c=4 a=4
//console.log(b,c);
//加加在前，先加一再赋值；加加在后，先赋值再加一
console.log(--a + ++a + a-- + ++a - a-- + a);//计算结果为6
// 1 1 2 2 2 1 2 2 2 1 1
var k=0;
console.log(k++ + ++k +k +k++);//结果为6
// 0 1 2 2 2 2 3
var a = 1;
var b = 5;
console.log(a++ + --b - ++a + b-- + b - a);//结果为6
// 1 2 4 4 3 3 4 3 3 3
</script>
</body>
</html>
6）三目运算
表达式（true/false） ? 语句1（true时执行） ： 语句2（false时执行）
pre:(方法的含义：可以实现某种功能的手段)
a：isNaN() 的使用（isNaN是一种方法，功能能是：可以判断一个值是否为一个数字，结果为一个boolean型）；
部分代码（没有写头部-文档的声明等部分）：
//var result = 3 - "a";
//console.log(result);
//console.log(isNaN(result));//true
//判断一个值是否是一个数字，如果这个值不是一个数字，方法返回结果是true,反之，结果返回false；
//var flag = isNaN(result);//将结果保存在flag变量中，
//为什么要保存在一个变量flag中的，是为了给后面的所有需要的程序使用。
//console.log(isNaN(7));//false
//console.log(isNaN("7"));//false
//console.log(isNaN("7a"));//true
b：prompt()也是一个方法，功能是：可以接收用户动态输入的内容，结果返回用户输入的内容。（只要是用户输入的都是字符串）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//判断输入的是否为数字
// var date = prompt("请输入您的电话号码");
// isNaN(date) ? alert("请输入正确的电话号码") : alert("电话号码输入正确") ;
//判断年份的润平
// var year = prompt("请输入年份");
// year%100 !== 0 && year%4==0 || year%100 == 0 && year%400==0 ? alert("您输入的年份是闰年") : alert("您输入的年份是平年") ;
// var age = prompt("请输入您的年龄");
// age > 20 ? alert("您可以报名来千锋学习了") : alert("回去好好学习！！！");
//判断数值的奇偶
var num = prompt("请您输入数值");
isNaN(num) ? alert( "请您确认输入的数是否为数值") : val = num ;
val%2 == 0 ? alert("您输入的数值为偶数") : alert("您输入的数值为奇数");
</script>
</head>
<body>
</body>
</html>
7）运算符之间的优先级：
()运算 > 自增自减运算 > 算术运算 > 关系运算 > 逻辑运算 > 三目运算(三元运算) > 赋值运算
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//运算符之间的优先级
// 算术运算，关系运算，逻辑运算，三目运算(三元运算)，自增自减运算,赋值运算，()运算;
//++a a-- !true
var a = 3;
var b = 10 + ++a * (2 + 4) > 30 || false ? "对的" : "错的";
//3 2 1 4 （这里的数字是优先级）
console.log(b);//b结果为”对的“
//()运算 > 自增自减运算 > 算术运算 > 关系运算 > 逻辑运算 > 三目运算(三元运算) > 赋值运算
</script>
</body>
</html>
11、数据类型之间的转换
1、自动类型转换：
alert("2"-"1");
alert("1"-false);
alert("1"-true);
alert("1"-null);
alert(true+false);
alert(true+null);
alert("5"-0);//字符串5转换成了数字5undefined和NaN没有自动类型转换 alert("1"-undefined);//NaN undefined没有转换 alert(true+undefined);//NaN
alert(true+NaN);//NaN使用+来计算为连接操作的情况
alert("1"+0);//10
alert("1"+true);//1true
alert("1"+null);//1null
alert("1"+undefined);//1undefined
2、手动强制类型转换
Number()
parseInte()
parseFloate()
toString();
Boolean();
number() 把一个其他类型的数据转换成Number类型的数据
部分代码：（day2-code-11）
// console.log(Number("0056"));//56
// console.log(Number(true));//1 Boolean类型的true和false分别转换成1和0
// console.log(Number(false));//0
// alert(Number(“08.90”)); //8.9 只包含浮点数值的字符串，会直接转成浮点数值，如果包含前导和后导0，即自动去掉
// console.log(Number(null));//0 空对象返回0
// 关于字符串，应该遵循以下规则：
1，只包含数值的字符串，会直接转成十进制数值，如果包含前导0，即自动去掉。
2，只包含浮点数值的字符串，会直接转成浮点数值，如果包含前导和后导0，即自动去掉。
3，如果字符串是空，那么直接转成0。
4，如果不是以上三种字符串类型，则返回NaN。
// console.log(Number(""));//0 如果字符串是空，那么直接转成0.
// console.log(Number(" "));//0 如果字符串是空格，那么直接转成0.
// console.log(Number("3a"));//NaN
// console.log(Number("rw"));//NaN
// console.log(Number(undefined));//NaN （NaN,undefined返回NaN）
// console.log(Number("011"));//11 只包含数值的字符串，会直接转成十进制数值，如果包含前导0，即自动去掉。
// console.log(Number(011));//9八进制转换成十进制数
// console.log(Number(0xa));//10十六进制转换成十进制数
// console.log(Number("0xa"));//10十六进制转换成十进制数
parseInt() 把一个数值转换成整数
部分代码：（day2-code-11）
// console.log(parseInt("0056"));//56
// console.log(parseInt("8.673"));//8
// console.log(parseInt("0008.6730000"));//8
// console.log(parseInt("673a34iekl6"));//673 第一个是数值，返回整数部分，从第一数值开始取值，到最后一个连续数值结束
// alert(parseInt(“Lee456zhou”));//NaN,如果第一个不是数值，就返回NaN
// console.log(parseInt(true));//NaN
// console.log(parseInt(false));//NaN
// console.log(parseInt(null));//NaN
// console.log(parseInt(""));//NaN
// console.log(parseInt(" "));//NaN
// console.log(parseInt("3a"));//3
// console.log(parseInt("rw"));//NaN
// console.log(parseInt(undefined));//NaN
// console.log(parseInt("011"));//11
// console.log(parseInt(011));//9八进制转换成十进制数
// console.log(parseInt(0xa));//10十六进制转换成十进制数
// console.log(parseInt("0xa"));//10十六进制转换成十进制数
注： //parseInt()方法提供了第二个参数，第二个参数是指定以什么进制来转换
//方法中小括号放的内容叫参数，
console.log(parseInt("0001010",2));//指定以二进制来转换，转换成一个十进制的数
console.log(parseInt("070",8));//指定以八进制来转换，转换成一个十进制的数
console.log(parseInt("afeb",16));//指定以十六进制来转换，转换成一个十进制的数
parseFloat(); 把一个数值转化为小数
部分代码：（day2-code-11）
/*console.log(parseFloat("0056"));//56
console.log(parseFloat("8.673"));//8.673
console.log(parseFloat("0008.6730000"));//8.673
console.log(parseFloat("673a34iekl6"));//673
console.log(parseFloat(true));//NaN
console.log(parseFloat(false));//NaN
console.log(parseFloat(null));//NaN
console.log(parseFloat(""));//NaN
console.log(parseFloat(" "));//NaN
console.log(parseFloat("3a"));//3
console.log(parseFloat("rw"));//NaN
console.log(parseFloat(undefined));//NaN
console.log(parseFloat("011"));//11
console.log(parseFloat(011));//9八进制转换成十进制数
console.log(parseFloat(0xa));//10十六进制转换成十进制数
console.log(parseFloat("0xa"));//0*///是一个十六进制结构的数，无法转换成一个十进制数，parseInt可以转换成十进制数
toString(); 把一个数值转换成字符串
部分代码：（day2-code-11）
// var num = 10;
// var val = num.toString();//用点的方式来调用执行一个方法，这是以后对象操作要学习的东西。
// var num = true;//布尔值//可转成字符串的true
// var val = num.toString();
// console.log(val,typeof val);//将一个值转换成字符串
// var num = undefined;// Cannot read property 'toString' of undefined
// var val = num.toString();
// console.log(val,typeof val);//将一个值转换成字符串
// var num = null;//Cannot read property 'toString' of null
// var val = num.toString();
// console.log(val,typeof val);//将一个值转换成字符串
// var num = 8873;
// var val = num.toString(10);
// console.log(val,typeof val);//将一个值转换成字符串
// var num = 8873;
// var val = num.toString(2);//10001010101001 将num这个值通过 调用 toString方法来转换成2进制的数
// console.log(val,typeof val);//将一个值转换成字符串
// var num = 8873;
// var val = num.toString(8);//21251 将num这个值转换成八进制数
// console.log(val,typeof val);//将一个值转换成字符串
// var num = 8873;
// var val = num.toString(16);//22a9将num这个值转换成十六进制数
// console.log(val,typeof val);//将一个值转换成字符串
Boolean(); 把一个值转换成布尔值
部分代码：（day2-code-11）
// console.log(Boolean(20));//true
// console.log(Boolean(-20));//true
// console.log(Boolean(0));//false
// console.log(Boolean("kfwehf"));//true
// console.log(Boolean(""));//false
// console.log(Boolean(" "));//true
// console.log(Boolean(null));//false
// console.log(Boolean(undefined));//false
// console.log(Boolean(NaN));//false
// console.log(Boolean([]));//true
// console.log(Boolean({}));//true
// console.log(Boolean(function(){}));//true
// Boolean转换小结：
// 非0的数字都是true ,0为false
// 非空的字符串都是true,空字符串都是false
// null,undefined,NaN都是false
// 所有的引用数据类型都是true;
log(Boolean(20));//true
// console.log(Boolean(-20));//true
// console.log(Boolean(0));//false
// console.log(Boolean("kfwehf"));//true
// console.log(Boolean(""));//false
// console.log(Boolean(" "));//true
// console.log(Boolean(null));//false
// console.log(Boolean(undefined));//false
// console.log(Boolean(NaN));//false
// console.log(Boolean([]));//true
// console.log(Boolean({}));//true
// console.log(Boolean(function(){}));//true
// Boolean转换小结：
// 非0的数字都是true ,0为false
// 非空的字符串都是true,空字符串都是false
// null,undefined,NaN都是false
// 所有的引用数据类型都是true;
本文地址：https://blog.csdn.net/weixin_41533517/article/details/107287148