当前位置: 移动技术网 > IT编程>开发语言>JavaScript > javascript---(01)--js语法基础

javascript---(01)--js语法基础

2020年07月14日  | 移动技术网IT编程  | 我要评论

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

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网