初学JavaScript的基本语法介绍(二)

最新推荐文章于 2024-02-29 21:26:51 发布
最新推荐文章于 2024-02-29 21:26:51 发布
阅读量376 收藏 1
点赞数 1
分类专栏： HTML/JS 文章标签： JavaScript程序片段 JavaScript基本语法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013132035/article/details/54930726
版权

        上一篇博客我们简单介绍了JavaScript，并介绍了JavaScript的特点及用途。现在我来说一说初次认识JavaScript程序及JavaScript的基本语法。主要说的方面有1：注释;2：JS程序片段的存在方式;  3：JavaScript的变量;   4：JavaScript的基本数据类型;  5：JS运算符;  6：JS的循环语句;7：JS的判断语句;8：JS的swicth...case语句;10：JavaScript函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>初识JavaScript</title>
<script type="text/javascript">
	alert("JavaScript，你好!");
	document.write("JavaScript，你好!");
</script>
</head>
<body>
</body>
</html>

        上面就是一个简单的JavaScript的程序，它是嵌入在html页面内，一般嵌入在HTML页面内的JS程序片段存在两个地方：1在<head></head>标签内；2在<body></body>标签内；3在<html></html>标签内。JS程序一般以两种方式存在：1是嵌入在html页面中；2是以专门的.js文件存在。上面的JS程序是以<script type="text/javascript"></script>标签开始的。其JS程序片段都在这个标签里面。alert(“JavaScript, 你好!”)是在web浏览器页面弹出window对话框显示JavaScript，你好!。document.write(“JavaScript，你好！”)是在浏览器web页面中输出JavaScript，你好!。这就是一个简简单单的JS程序。

        下面我们来说一说JS的基本语法。

         1：注释：//XXXXX单行注释；/*  XXXXXX */多行注释。它和Java的注释一样。代码如下。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript注释</title>
<script type="text/javascript">
	document.write("下面是JS的单行注释<br/>");
	//alert("我被注释掉了");
	document.write("A<br/>");
	//document.write("A1");
	document.write("下面是JS的多行注释<br/>");
	/*
	document.write("B");
	document.write("B1");
	*/
	document.write("B2<br/>");
</script>
</head>
<body>
</body>
</html>

         2：JS程序片段的存在方式：1是嵌入在HTML页面内；2是由引入专门的.JS文件，其中.js文件是专门用来存储JS程序片段的。上面的JS注释就很好地演示了在HTML页面内部的JS程序片段。下面的代码是用来说明第二种情况。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS外部引入</title>
<script type="text/javascript" src="MyJS.js" charset="GBK"></script>
</head>
<body>
</body>
</html>
MyJS.js文件，默认GBK字符集 
alert("JavaScript，你好!");

         3：JavaScript的变量，由于JS是弱类型语言，故其用var来统一定义变量(数值型，字符型，数组型)。程序如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript的类型</title>
<script type="text/javascript">
	var num = 1;
	document.write("数值类型变量:num="+num+"<br/>");
	var str = "JavaScript，你好!";
	document.write("字符串类型变量:str="+str+"<br/>");
</script>
</head>
<body>
</body>
</html>

       4：JavaScript的基本数据类型。基本数值类型有5类：数值类型，字符串类型，布尔类型，未定义类型(undefined)，置空类型(null)。程序如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript基本类型</title>
<script type="text/javascript">
	var num = 1;
	document.write("整型:num="+num+"<br/>");
	var fnum = 3.14;
	document.write("浮点类型:fnum="+fnum+"<br/>");
	var str="JavaScript,你好!";
	document.write("字符串类型:str="+str+"<br/>");
	var boolean1 = true;
	document.write("boolean类型:boolean1="+boolean1+"<br/>");
	var no1;
	document.write("未定义:no1="+no1+"<br/>");
	var nu1 = null;
	document.write("置空:nu1="+nu1+"<br/>");
	var nu2 = "";
	document.write("空值：nu2="+nu2+"<br/>");
</script>
</head>
<body>	
</body>
</html>

       5：JS运算符。JS的运算符和Java的运算符几乎一样。JS运算符有6大类：算术运算符，比较运算符，逻辑运算符，赋值运算符，连接运算符，三目运算符。具体代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS运算符</title>
<script type="text/javascript">
	//与Java语言的类似
	//算术运算符
	var num1 = 2, num2 = 1;
	document.write("num1+num2="+(num1+num2)+"<br/>");
	document.write("num1-num2="+(num1-num2)+"<br/>");
	document.write("num1*num2="+(num1*num2)+"<br/>");
	document.write("num1/num2="+(num1/num2)+"<br/>");
	document.write("num1%num2="+(num1%num2)+"<br/>");
	document.write("num1++="+(num1++)+"<br/>");
	document.write("--num2="+(--num2)+"<br/>");
	document.write("===========================<br/>");	
	//赋值运算符
	var n1 = 6, n2 = 1;
	document.write("n1+=n2, n1="+(n1+=n2)+"<br/>");
	var n1 = 6, n2 = 1;
	document.write("n1-=n2, n1="+(n1-=n2)+"<br/>");
	document.write("===========================<br/>");	
	//比较运算符
	var x = 10, y = 4;
	document.write("x="+x+",y="+y+"<br/>");
	document.write("x==10结果为"+(x==10)+"<br/>");	
	document.write("x=='10'结果为"+(x=='10')+"<br/>");
	document.write("x===10结果为"+(x===10)+"<br/>");
	document.write("x==='10'结果为"+(x==='10')+"<br/>");
	document.write("x!=10结果为"+(x!=10)+"<br/>");
	document.write("x!='10'结果为"+(x!='10')+"<br/>");
	document.write("x!==10结果为"+(x!==10)+"<br/>");
	document.write("x!=='10'结果为"+(x!=='10')+"<br/>");
	document.write("x>y结果为"+(x > y)+"<br/>");
	document.write("x<y结果为"+(x < y)+"<br/>");
	document.write("x>=y结果为"+(x>=y)+"<br/>");
	document.write("x<=y结果为"+(x<=y)+"<br/>");
	document.write("===========================<br/>");	
	//逻辑运算符
	var x = 10, y = 4;
	document.write("x="+x+",y="+y+"<br/>");
	document.write("(x<11&&y>4),结果为:"+(x<11&&y>5)+"<br/>");
	document.write("(x<11||y>4),结果为:"+(x<11||y>5)+"<br/>");
	document.write("!(x<11),结果为:"+!(x<11)+"<br/>");
	document.write("===========================<br/>");	
	//三目元算符
	var x = 10, y = 4;
	document.write("(x>y?x:y)结果为"+(x>y?x:y)+"<br>");
	document.write("===========================<br/>");	
	//字符串连接
	var str1 = 2017, str2 = '0208';
	document.write("str+str2="+(str1+str2)+"<br/>");
</script>
</head>
<body>
</body>
</html>

        6：JS的循环语句。和Java类似有for循环，for...each循环：到数组时再介绍， while循环，do...while循环。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>循环语句</title>
</head>
<body>
	<script type="text/javascript">
		var i = 0;
		while(i < 10){
			document.write("i="+i+"<br/>");
			i++;
		}
		for(var i = 0; i < 10; i++){
			document.write("i="+i+"<br/>");
		}
		var j = 0;
		do{
			document.write("j="+j+"<br/>");
			j++;
		}while(j<10)
	</script>
</body>
</html>

        7：JS的判断语句。和Java类似，if...else...语句。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>if...else语句</title>
</head>
<body>
	<script type="text/javascript">
		var num = 10;
		document.write("num="+num+"<br/>");
		if(num > 9){
			document.write("num大于9<br/>");
		}else{
			document.write("num小于9<br/>");
		}
	
	</script>
</body>
</html>

         8：JS的swicth...case语句。和JAVA类似。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>switch语句</title>
</head>
<body>
	<script type="text/javascript">
		var day = 3;
		switch(day){
			case 1:alert("周一"); break;
			case 2:alert("周二"); break;
			case 3:alert("周三"); break;
			case 4:alert("周四"); break;
			case 5:alert("周五"); break;
			case 6:alert("周六"); break;
			case 7:alert("周日"); break;
			default :alert("输入错误!");break;
		}
	</script>
</body>
</html>

        9：break语句和continue语句。break跳出当前循环，执行下面的语句；continue跳出当前循环，执行下一次循环。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>break VS continue</title>
</head>
<body>
	<script type="text/javascript">
		document.write("break:"+"<br/>");
		for(var num = 0; num < 10; num++){
			if(num==6){
				break;
			}
			document.write("num="+num+"<br/>");
		}
		document.write("continue:"+"<br/>");
		for(var num1 = 0; num1 < 10; num1++){
			if(num1==6){
				continue;
			}
			document.write("num1="+num1+"<br/>");
		}	
	</script>
</body>
</html>

         10：JavaScript函数。与Java类似，有不带参数函数，有带一个参数函数，有带多个参数函数。但因为其为弱类型，故不需要再函数参数列表声明参数类型，因为JS的参数类型都是var来表示的。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript函数</title>
<script type="text/javascript">
	function fun1(){
		alert("我的第一个方法!");
	}

	function fun2(f1){
		alert(f1);
	}
	function fun3(f1, f2){
		alert(f1+" "+f2);
	}
	
	function fun4(f1, f2){
		return f1+" "+f2;
	}
	fun1();
	fun2("我的");
	fun3("我的","第三个程序");
	var result = fun4("我的","第四个程序");
	alert(result);
</script>
</head>
<body>
</body>
</html>
         上面对JS基本语法的介绍你看懂了么?建议用手打一遍代码比较好！


         




        

        

不贰过先生
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaScript的基本语法
01-20
本小节主要总结javaScript的语法(初学者总结仅供参考) 1.javaScript的基本结构 script 可以说是html使用javaScript的关键字，可在script元素中插入javaSript代码 script又可分为两种插入方式 外部引用 * 在script...
【博学谷学习记录】超强总结，用心分享，JS算法实现函数接收三个参数计num1，num2，运算符，num1运算符num2的值
brother_hu的博客
08-06 1102
参数本质就是函数内部的变量一个函数可以没有参数，也可以有一个，或者多个都行这里的参数叫做形参，即形式上的参数，在创建函数时它里面是没有值的，所以叫形参。运算符只有加减乘除这四种常用的，故可以利用Switch循环直接将四种情况列出。continue :跳出本次循环，继续执行下次循环。return :能够返回 return 语句中的值。return :可以结束当前的函数体内的代码。js代码不够严谨，不能使得变量成为运算符。随意输入两个数的最大值并且能运算结果。break :结束当前的循环体。...
JavaScript基础语法（二）
yy
08-09 5184
比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值( true / false )作为比较运算的结果。到哪个就执行对应的case中的语句，然后break退出整个switch语句，如果都没有匹配上则执行defalut中的语句。，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。后面开发中经常用于多个条件的判断。
初学JavaScript总结
最新发布
m0_62780794的博客
02-29 999
html完成了架子，css做了美化，但是网页是死的，需要给他注入灵魂，所以接下来需要学习JavaScript，这门语言会让页面能够和用户进行交互。JavaScript又称为脚本语言，可以通过脚本实现用户和页面的交互。
JavaScript的基础语法
Sy_origami的博客
04-14 931
JavaScript的基础语法 文章目录JavaScript的基础语法前言一、JavaScript的基础语法二、JavaScript中的变量1.构造变量名称 前言 大部分前端初学者对于JavaScript的基础语法了解并不充分，我帮助整理了一些入门学习可能会使用到的语法。 ` 一、JavaScript的基础语法 1.在JavaScript中输入数值的时候有无小数点均可。 2.字符串作为文本，由双引号 " " 或者单引号 ’ ’ 包围。 3.JS程序员倾向于使用以小写字母开头的驼峰大小写 例如：first
【JavaScript】1.2 JavaScript语法基础
Andy0214的专栏
11-08 3589
这就是JavaScript的基本语法。虽然这些只是冰山一角，但它们是理解JavaScript的基础。在接下来的章节中，我们将深入学习函数、对象、数组等更高级的主题。希望你在学习的过程中能够找到乐趣，并且通过学习JavaScript，开启你的编程之旅！
JavaScript基本语法.ppt
11-21
JavaScript基本语法.ppt，非常适合初学者，用后会帮助你很多
JavaScript简介及基础语法介绍
11-12
JavaScript简介及基础语法介绍，为初学者简单介绍JavaScript，提供入门级教学
浅谈javascript语法和定时函数
10-24
初学者可能对Javascript的定时器有误解，认为它们是线程，其实Javascript是运行于单线程中的，而定时器仅仅是计划在未来的某个时间执行，而具体的执行时间是不能保证的，因为在页面的生命周期中，不同的时间可能有...
12种不宜使用的Javascript语法整理
10-26
Javascript语法，初学js的朋友都应该知道，下面整理了12种不宜使用的js语法，感兴趣的朋友可以参考下
初学HTML用法大全指导(五)html建立网页中的表单与DIV、SPAN分块
Sweet Baby，甜宝
01-08 4988
上一篇博客我们讲了html脚本语言中超链接的创建与使用，这一篇博客我们来聊一聊web网页中常用的表单的建立，我们在登录一个新的网站时想成为这个网站的VIP会员或者普通用户时常常面临着各种信息的登记，以及在登录这个系统时要输入自己的账户和密码，比如CSDN中，我们想登录进入自己的账户时，就要输入账户和密码。这是HTML脚本语言中的表单操作就称为了很重要的作用。最常见的表单标签有：文本框、密码框、文本
初学HTML用法大全指导(三)html中建立表格
Sweet Baby，甜宝
01-06 1625
上一篇博客我们讲了web页面中html脚本语言对图片的设置，这一篇博客我们来聊一聊html页面中经常见到的再普通不过的表格。这篇博客我会首先去聊一聊怎样在web页面用html标签创建表格，其次我会聊一聊对表格的行合并与列合并，然后再聊一聊在建立表格的标签中一些常见属性的使用。        1：在web页面中创建表格首先要用到标签，去告诉浏览器等解析器这是一个table标签。标签显示行数；标签显
初学HTML用法大全指导(四)html中超链接的建立与使用
Sweet Baby，甜宝
01-07 1130
上一篇博客我们讲了html脚本语言中最常见到的表格标签的使用方法，这篇博客我们来聊一聊html脚本语言中最长用到的超链接的建立以及使用的方法。
初学HTML用法大全指导(一)html对文本的设置
Sweet Baby，甜宝
01-06 1007
研究生最难的数值分析考试终于在昨晚上考完了，今天闲下来有时间聊一聊我们最熟悉的HTML脚本语言。        HTML又称Hyper Text Markup Language即超文本标记语言，它是用来描述网页的一种脚本语言。
初学HTML用法大全指导(二)html对图像的设置
Sweet Baby，甜宝
01-06 614
上一篇博客聊了html页面中对文本的设置，这一篇博客我们来聊一聊web前端中的网页中对图像的设置，我们现在每天浏览的五花八门高大上绚丽无比的网站其中都离不开图片的支持，如果离开了图片，web网页会大大丢失色彩。其中html中用标签来设置web页面中的图片。        1：初步在网页中加载html图片用src属性来表示路径： 初步学习图片加载        2：
初学JavaScript的操作DOM节点(三)
Sweet Baby，甜宝
02-21 597
DOM全程Document Object Model，即文档对象模型。当浏览器网页被加载时，浏览器自身会创建页面的文档对象模型。HTML  DOM模型会被构造成树。         下面是HTML  DOM树。JS可以操作HTML的元素、属性、CSS样式以及对页面中的所有事件作出反应。        下面是一个简单JavaScript处理DOM事件代码：         J
初学JavaScript常用函数(五)
Sweet Baby，甜宝
02-22 535
JavaScript常用函数包括JavaScript全局函数和JavaScript window对象常用的方法及事件。JavaScript全局函数有7个，分别为：escape()函数、eval()函数、isNan()函数、ifFinite()函数、parseInt()函数、parseFloat()函数、unescape()函数、Eval()函数。 JS中常用函数 documen
初学JavaScript之基本简介(一)
Sweet Baby，甜宝
02-08 314
JavaScript是当今不可或缺的一种面向web的编程语言。它是早些年在网页发展的初期由Netscape公司创建。在大多数的网站中都运用了JavaScript，并且现在所有的系统包括手机、电脑、平板的浏览器都嵌入了JavaScript的解释器。可以这样说有浏览器的地方就有JavaScript的解释器。现在的前端Web开发人员除了学习HTML、CS，还有一个就是JavaScript的学习，所以Ja
javascript dom编程艺术第二版pdf
06-22
《JavaScript DOM编程艺术第二版》是一本深入浅出的JavaScript和DOM编程入门书籍，适合初学者学习。 该书共有18章，从JavaScript基础语法和DOM结构开始讲起，一步步引导读者学习Javascript与DOM编程。其中介绍了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值