js的基本语法

最新推荐文章于 2024-06-01 11:14:15 发布

菲仔yo

最新推荐文章于 2024-06-01 11:14:15 发布

阅读量1.6k

点赞数 8

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_67331668/article/details/123143936

版权

今天给大家带来的是js的基本语法，相信大家对网站都不陌生，那么想要做出好看的网站js就是一大利器了。

前端的三大要素：

htem（网页骨架）
css（网页样式）
js（让网页具备动态效果）

什么是js？

JavaScript 一门弱类型的语言（弱类型：对代码的约束性不高）
用于给HTML页面上添加动态效果与交互操作
ECMA：相当于js的语言标准，目前最高是ES6

java与JavaScript的比较

java代码需要编译才能执行，而js代码不需要编译就能执行；
js可以动态的增加属性
js中所有变量全部使用var来定义
java是基于服务端的语言，js是基于客户端的语言；

（什么叫基于服务端和客户端？简单理解，就是需要服务端执行的或者需要在客户端执行的。）

如何使用js？

使用script标签，一般而言都是放在head标签中
编写js文件，通过script标签中的src属性引入
可以在同一个界面中引入多个文件，执行顺序与引入顺序一致

js的调试

浏览器：控制台（Console）

console.log() 打印信息

console.dir() 打印一个对象的所有属性和方法

基本语法

JavaScript的语法和java语言类似，每个语句以;结束，语句块用{}

JavaScript并不强制要求在每个语句的结尾加;

// 行注释

/* */ 块注释

JavaScript严格区分大小写

怎样区分整数变量和字符串变量？

可以通过控制台输出的颜色分辨，整数是蓝色，字符串是黑色

也可以通过在输出时加个typeof：

		//js中所有变量全部使用var来定义
		//整数，小数叫做number
		var i=1;
		
		//定义字符变量 string
		var s="哈哈哈";
		
		console.log(typeof i);
		console.log(typeof s);

怎样将整数添加到字符串

可以直接跟java一样用+连接

在反引号中可以用${}直接添加到字符串中

        var s2='数字的值'+f+"hello world";
		var s3=`的点点滴滴${f}多多多多多`;//``在tab键位的上方

在js中字符串的数字与整数是可以运算的，如果是非数字控制台输出的是NaN（not a number 不是一个数字）

在js中1/0是可以的，输出的结果是Infinity（无穷大）

数字类型的转换：

		console.log(parseInt("1.23"))
		console.log(parseFloat("1.23"))

取小数的后几位：

		//在所有的编程运算中 基本小数的运算都不靠谱
		console.log(0.6-0.2);
		//小数的取几位
		console.log((1.23545).toFixed(2))

boolean：

		var f1=true;
		var f2=false;
		console.log(f1||f2)//true
		console.log(f1&&f2)//false
		console.log(!f1)//false
		console.log(!!f2)//true  !!将这个变量变成boolean

什么情况下会得到false？

字符串：""为false
数字：0为false
null 也为false
undefined （未定义）也为false
NaN 也是false

什么是短路？

如果前面为真就停止，如果为假就往后继续运行

在&&中如果全为真就会运行到最后，如果有假就停止

        //短路	如果前面为真就停止，如果为假就往后继续运行
		console.log(""||0)//0
		console.log(1||0)//1
		console.log("2"||"1"||0)//0
		
		//在&&中如果全为真就会运行到最后，如果有假就停止
		console.log("2"&&"1"&&1)//1
		console.log("2"&&0&&1)//0

如何判断用户到底输入了没有？

		var m=prompt("请输入一个数字")
		//判断用户到底输入了没有？
		// "" 为false ！->true
		// null 为false ！->true
		if(!m){
			alert("输入不准确")
		}
		console.log(m);

js数组的特征：

数组没有类型限制
数组可以读取任意下标的值
长度可以任意变化

js如何定义对象？

		//定义对象
		var stu={
			"stu_no":1,
			"stu_name":"小明"，
			"stu_age":38
		}
		//可以动态的增加属性
		stu.stu_address="xx"//给对象新增了地址属性
		console.log(stu);

js中的弹框

主要有三种弹框：提示框（alert）、询问框（confirm）、输入框（prompt）

		//js中的弹框
		//alert("你好吗？");//提示框
		//var f4=confirm("确定要删除吗？")//询问框
		var f5=prompt("请输入");//输入框
		console.log(f5);

关于js中的“=”的意思

= 赋值
== 比较（无视类型的比较）
=== 转换类型的比较（先比较类型在比较值）

关于js中的循环：

switch结构：用户输入1~7，控制台输出周一~周天

		//NaN不能用等于判断    只能使用isNaN
		var f6=prompt("请输入星期几")
		if(!isNaN(parseInt(f6))){//如果不是非数字
			switch(parseInt(f6)){//转成int类型
			case 1:
				console.log("周一")
				break
			case 2:
				console.log("周二")
				break
            case 3:
				console.log("周三")
				break
            case 4:
				console.log("周四")
				break
            case 5:
				console.log("周五")
				break
            case 6:
				console.log("周六")
				break
            case 7:
				console.log("周天")
				break
			default:
				console.log("你是xx")
			}
		}

while结构：

        // var j=1;
		// while(j<10){
		// 	j++;
		// }
		
		//死循环
		// while(true){
			
		// }

for结构：用户输入次数进行循环输出

		var count=prompt("请输入次数")
		for(var i=0;i<count;i++){
			//在页面中进行html输出
			document.write("<font color='red'>哈哈哈"<font><br>)
		}

今日思维导图：

今日所有代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>标题</h1>
		<script>
		/*编写代码必须在script标签中*/
		
		/*打印 console控制台  log日志*/
		console.log('hello word');
		console.log('你好 世界');
		
		//定义整数变量   int  i=1;
		//js中所有变量全部使用var来定义
		//整数，小数叫做number
		var i=10;
		var f=1.234;
		
		//定义字符变量 string
		var s="哈哈哈";
		var s2='数字的值'+f+"hello world";
		var s3=`的点点滴滴${f}多多多多多`;//``在tab键位的上方
		var s4='a';
		
		//查看类型
		console.log(typeof i);
		console.log(typeof f);
		console.log(typeof s);
		console.log(s2);
		console.log(s3);
		console.log(s4*i);
		//NaN(非数字）not a number 不是一个数字
		console.log(1/0);
		//Infinity 无穷大
		//转换
		// Integer.parseInt
		console.log(parseInt("1.23"))
		console.log(parseFloat("1.23"))
		
		//在所有的编程运算中 基本小数的运算都不靠谱
		console.log(0.6-0.2);
		//小数的取几位
		console.log((1.23545).toFixed(2))
		
		// boolean
		var f1=true;
		var f2=false;
		console.log(f1||f2)//true
		console.log(f1&&f2)//false
		console.log(!f1)//false
		console.log(!!f2)//true  !!将这个变量变成boolean
		
		//什么情况下会得到false
		//   字符串：""为false
		//	  数字：0为false
		//	  null 也为false
		//	  undefined  未定义  也为false
		//	  NaN  也是false
		
		//短路	如果前面为真就停止，如果为假就往后继续运行
		console.log(""||0)//0
		console.log(1||0)//1
		console.log("2"||"1"||0)//0
		
		//在&&中如果全为真就会运行到最后，如果有假就停止
		console.log("2"&&"1"&&1)//1
		console.log("2"&&0&&1)//0
		
		var m=prompt("请输入一个数字")
		//判断用户到底输入了没有？
		// "" 为false ！->true
		// null 为false ！->true
		if(!m){
			alert("输入不准确")
		}
		console.log(m);
		
		//数组没有类型限制
		//数组可以读取任意下标的值
		//长度可以任意变化
		var as=[1,2,true,4,'a'];//数组
		console.log(as[100]);//得到未定义
		as[100]="a";//长度101
		console.log(as);
		as.length=2;
		console.log(as);
		
		//定义对象
		var stu={
			"stu_no":1,
			"stu_name":"小明",
			"stu_age":38
		}
		//可以动态的增加属性
		stu.stu_address="xx"//给对象新增了地址属性
		console.log(stu);
		
		//js中的弹框
		//alert("你好吗？");//提示框
		//var f4=confirm("确定要删除吗？")//询问框
		var f5=prompt("请输入");//输入框
		console.log(f5);
		
		// =赋值
		// ==比较 无视类型比较
		// ===转换类型比较  先比较类型再比较值
		console.log(1=="1")
		
		//NaN不能用等于判断    只能使用isNaN
		var f6=prompt("请输入星期几")
		if(!isNaN(parseInt(f6))){//如果不是非数字
			switch(parseInt(f6)){//转成int类型
			case 1:
				console.log("周一")
				break
			case 2:
				console.log("周二")
				break
			default:
				console.log("你是xx")
			}
		}
		
		// var j=1;
		// while(j<10){
		// 	j++;
		// }
		
		//死循环
		// while(true){
			
		// }
		
		//for循环
		var count=prompt("请输入次数")
		for(var i=0;i<count;i++){
			//在页面中进行html输出
			document.write("<font color='red'>哈哈哈<font><br>")
		}
		
		
		</script>
	</body>
</html>

菲仔yo

关注

8
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js的基本语法

今天给大家带来的是js的基本语法，相信大家对网站都不陌生，那么想要做出好看的网站js就是一大利器了。前端的三大要素：htem（网页骨架） css（网页样式） js（让网页具备动态效果）什么是js？JavaScript 一门弱类型的语言（弱类型：对代码的约束性不高）用于给HTML页面上添加动态效果与交互操作 ECMA：相当于js的语言标准，目前最高是ES6java与JavaScript的比较java代码需要编译才能执行，而js代码不需要编译就能执行； js可...
复制链接

扫一扫