JavaScript的基本语法01

小阿飞_

已于 2023-02-11 10:35:11 修改

阅读量765

点赞数 9

分类专栏： JS 文章标签：开发语言前端 javascript

于 2022-02-26 11:04:02 首次发布

本文链接：https://blog.csdn.net/yifei_345678/article/details/123144911

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

一、JavaScript是什么？

二、JavaScript与Java的区别

二、JavaScript的基本语法

前言

在学习JavaScript之前让我们先了解一下前端三大要素：

1.Html(网页骨架)

2.Css(网页样式)

3.Js（让网页具备动态效果）Js是JavaScript的缩写

通过这张图片我们可以知道，JavaScript技术可以增加网页的动态效果，实现与用户端更好的交互，为用户带来良好的网页使用体验

以下是正文内容：

一、JavaScript是什么？

JavaScript是一门弱类型语言，即它对代码的约束性不强，但是严格区分大小写，用于给HTML页面上添加动态效果与交互操作，ECMA相当于JS语言的标准，目前最高版本是ES6。

二、JavaScript与Java的区别

1. Java代码需要编译才能执行，而JS代码不需要编译就能执行；

(所谓编译执行，就是要下载相应的编译器才可执行代码)

2.Java是基于服务端的语言，JS是基于客户端的语言

（基于服务端和基于客户端，就是需要在服务端执行的或需要在客户端执行的内容）

二、JavaScript的基本语法

JavaScript在Html中编译执行，我们知道，Html是一门标签化语言，所以，JavaScript所有的代码都必须写在<script>标签中

例如：

<!DOCTYPE html>--当前是h5版本
<html>
	<head>
		<meta charset="utf-8">
		<title>script的基本语法</title>
	</head>
	<body>
		<script>//script标签
              console.log('hello1 world');//打印输出(行注释)
              console.log("hello2 world")//由于是弱类型语言,对代码约束不强
              console.log(`hello3 world`)//‘’，" "，` `都可以，；也可以不加
              /*块注释
                但是也要注意这些错误：
                console.log('hello3 world")符号错误‘ ”
			    console.Log('hello3 world")html严格区分大小写
               */
        </script>
	</body>
</html>

document.write()在页面中进行输出

console.log()是在console中输出，查看输出的方式即右键网页点击检查

然后再选择console就可以查看输出

变量的声明

JavaScript中，所有的变量都是使用var关键字声明，并且变量的值与类型都可以发生改变，JavaScript不区分整数和浮点数，统一用Number表示

<!DOCTYPE html>--当前是h5版本
<html>
	<head>
		<meta charset="utf-8">
		<title>script的基本语法</title>
	</head>
	<body>
		<script>
        /*变量若不赋值就输出会报undefined未定义错误*/
              //定义字符变量,可用"",'',``
				var s="哈哈哈";
				var s1='123';
                var ss=`世界${s1}你好`;//${s1}是拼接，只能用在``中
              //定义数字变量
                var i1=1;
                
                var i2=4;
				var	s2='a'
				console.log(i2/s5)//s2是stirng类型会报NAN错not a number非数字
				
				console.log(5/0)//Infinity无穷大
				console.log(-Infinity)//无穷小
				      
                console.log(parseInt('1.77'))//转成int,float后输出时字体会变蓝
				console.log(parseFloat('1.88'))//不转则为string类型字体是黑色的

                console.log((1.234).toFixed(1))//保留几位小数
                 
        </script>
	</body>
</html>

JavaScript中可以除了可以进行数字的加减乘除之外，甚至还可以进行数字和字符串类型的数字的加减乘除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript基本语法</title>
	</head>
	<body>
		   <script>
                var i=1;
				var	s='2'
				console.log(i+s)//输出12
				console.log(i-s)//输出-1
				console.log(i*s)//输出2
				console.log(i/s)//输出0.5
                console.log(s%i)//输出0
           </script>
	</body>
</html>

JavaScript中的Boolean类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
                /*这里和java是相同的*/
                var f1=true;
				var f2=false
				console.log(f1||f2)//true
				console.log(f1&&f2)//false
				console.log(!f2)//true
                /*短路是js中的概念
                  短路:前面有false就退出,没有就往后面走,输出最后一位true对应的东西
                具体还要分析是||还是*/
				console.log(" "||0)//" "
             //输出空字符串，因为字符串和0对应的都是false，而||只要有一个false就不向后判断了
				console.log(1||0)//输出1，1对应false
				console.log('111'||'222'||'3333')
            //输出111，数字除0外都为true,||只要有一个true就能输出
				console.log('111'&&'222'&&'3333')//输出333
            //输出333，数字除0外都为true,&&必须保证全为true，所以会全部判断一遍
                console.log('111'&&0&&'3333')//输出0，因为0对应的是false
                console.log('111'||0&&'3333')
            //输出111，||和&&在一起是先判断&&
        </script>
	</body>
</html>

JavaScript中将变量转成boolean类型

                    /*记少不记多*/             
                //console.log(!!+要转成boolean的东西):将这个变量变成boolean类型
                //变量可以是：
				//1，字符串:" "空字符串会变成false,其余为true
				//2，数字: 0为false,其余为true
				//3，null:变为false
				//4，fale:false
				//5，undefined未定义:false
				//6，NaN:false

JavaScript中的比较运算符

<script> 
     console.log(1=='1');//true,==是比较:无视类型比较,即比较的是内容,相当于java中的equals
     console.log(1==='1');//false,比的是类型
</script>

JavaScript中的数组与对象

       <script>
        var as=[1,12,3,4]//数组
		as.length=2//长度可以任意变化

		var as1=[1,'哈哈',true,0]//数组没有类型限制
		console.log(as1[0])//打印下标0对应的内容
		console.log(as1[-100])//数组可以读取任意下标的值,不过-100未赋值就是undefined未定义
		as1[100]='999'//第101位下标对应的内容是999,下标从0开始数
		console.log(as1)//长度可以任意变化

        /*创建一个学生对象，不管什么变量类型，在JS中都用var声明 */
            var stu={
			'sno':1,
			'name':'哈哈',
			'age':18
		}
		stu.address='aa'//给对象新增属性
		console.log(stu.sno);
		console.log(stu);   
       </script>

JavaScript中的弹窗

<script>
        //1,alert提示框
        alert('修改成功')
		//2,confirm确认框
 		var c=confirm('确认修改?')//点确认console拿到true,取消为false
		console.log(c);
		//3,prompt输入框
	    var m=prompt("请输入数字")
		console.log(m)//字符串类型的m
		//什么都不输,确定console拿到空字符串,点取消拿到null,变为boolean类型都为false
		if(!m){//true
			alert("输入不准确")//弹窗
		}
</script>

JavaScript中的循环

<script>
        while(j<10){//j<10时停止
     			j++//每进去一次加一
     		}

        while(true){//死循环
     			j++//每进去一次加一
     		}

        for(var i=0;i<10;i++){
			//"<font color=\"red\">haha</font>"转义符
			document.write("<font color='red'>haha</font>")
            //在页面中进行输出,外双内单或者/转义符
			console.log(222)//在console中输出
		}//执行10次
		
		var count=prompt('请输入运行次数')
		for(var i=0;i<count;i++){//输入的次数会自动转成int
			//"<font color=\"red\">haha</font>"转义符
			document.write("<font color='red'>haha</font>")
            //在页面中进行输出,外双内单或者/转义符
			console.log(222)//在console中输出
		}
        
        /*NaNisNaN()只能用判断，不能用==或者===*/
        var p1=prompt('请输入')
        if(!isNaN(parseInt(p1))){//如果输入的是数字
 			switch(parseInt(p1)){//p1是输入框的,为string//转成int类型
 						case 1://case中的两个类型必须一致
 							console.log(1111)
						break;
						case 2:
							console.log(222)
 						break;
 						default:
							console.log(333)
 			}
 		}
</script>

小阿飞_

关注

9
点赞
踩
1

收藏

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

前言在学习JavaScript之前让我们先了解一下前端三大要素：1.Html(网页骨架)2.Css(网页样式)3.Js（让网页具备动态效果）Js是JavaScript的缩写通过这张图片我们可以知道，JavaScript技术可以增加网页的动态效果，实现与用户端更好的交互，为用户带来良好的网页使用体验以下是正文内容：...
复制链接

扫一扫