JavaScript基础

橙窗

已于 2022-03-27 17:27:31 修改

阅读量1.2k

点赞数

分类专栏： Java 文章标签： java javascript html5

于 2022-03-27 16:53:09 首次发布

本文链接：https://blog.csdn.net/qq_57172082/article/details/123774005

版权

Java 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML文件以及markdown文件的链接

链接：https://pan.baidu.com/s/1NMznpqd-ES0jWV71wQFqKQ?pwd=cxlq
提取码：cxlq

百度网盘链接

一、JavaScript概述

JavaScript是由Netscape公司开发的一种网页脚本编程语言，它是一种基于Java语言基本语句和控制流的简单而紧凑的设计，实现简单方便，入门容易，并且它只允许通过浏览器实现信息浏览或动态交互，不允许对网络文档进行修改和删除，不允许将数据存入服务器，不允许访问本地计算机的硬盘，因此JavaScript是一种比较安全的语言。JavaScript依靠浏览器的解释器解释执行，与具体操作系统无关，所以它实现了跨平台的操作。

二、在JSP中引入JavaScript

在JSP页面中加入JavaScript小程序有如下两种方法：（1）将JavaScript直接加入网页中（2）通过链接引用的方式

1、将JavaScript直接加入网页中：

语法形式如下：

<script language="JavaScript">
…..//此处为JavaScript编写的代码
</script>

 在上述代码中，我们看到一个新的标签<script>…</script>，当浏览器读取到<script>标记时，就知道标记里面是用JavaScript编写的小程序，然后会用浏览器自带的解释器解释执行，当遇到</script>标记时程序结束。

2、通过链接引用的方式

语法形式如下：

<script language="JavaScript" src="script.js"></script>

通过上述代码，我们可以了解到，如果已经存在一个JavaScript源文件，可以通过src属性指定源文件的文件名，当浏览器读取到src属性时，会根据src属性找到对应文件，然后将其加载到JSP页面中，这种方法主要应用在代码比较复杂或者代码可以重复使用的情况下。
扩充：
（1）JavaScript 输出
JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。
举例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
window.alert(5 + 6);
document.getElementById("demo").innerHTML = "段落已修改。";
document.write(Date());
console.log(c);
</script>
</body>
</html>

（2）对代码行进行折行：可以在文本字符串中使用反斜杠对代码行进行换行。

document.write("你好 \ 世界!");

（3）JavaScript的注释
单行注释以 // 开头。
实例：

// 输出标题： 
document.getElementById("myH1").innerHTML="欢迎来到我的主页"; 
多行注释以 /* 开始，以 */ 结尾。
实例：/* 下面的这些代码会输出 
一个标题和一个段落 
并将代表主页的开始 */   
document.getElementById("myH1").innerHTML="欢迎来到我的主页";

三、JavaScript的数据类型与运算符

1、数据类型

JavaScript共有7种数据类型，分别是int，float，string，boolean，object，null，undefined，下面简单介绍一下。
（1）int：为整型，可以为正数、负数或0
（2）float: 为浮点型，浮点数，可以使用实数的普通形式或科学计数法表示，如3.6715，7.16e5；
（3）string：为字符串类型，字符串是用单引号或双引号括起来的一个或多个字符；
（4）boolean：是布尔类型，只有true和false两个值；
（5）object：为对象类型，用于定义对象变量；
（6）null：为空类型，没有任何类型的值；
（7）undefined：为未定义类型，指那些变量已被创建，但还没有赋值时所具有的值。
补充：JavaScript 变量
实例：

   var x=5;
   var y=6; 
   var z=x+y;

2、运算符

JavaScript同样提供了7种运算符，分别为算术运算符、关系运算符、字符串运算符、逻辑运算符、位操作运算符、条件运算符和赋值运算符。下面分别对它们作简单介绍。

1）算术运算符

算术运算符是指在程序中进行加减乘除等算术运算的符号。JavaScript中常用的算术运算符有7个，如表所示
在这里插入图片描述

2）关系运算符

关系运算符用于对操作数进行比较，最终比较的结果返回值是布尔值，参与比较的操作数可以是数字，也可以是字符串，如表2-2所示。
在这里插入图片描述

3）字符串运算符

字符串运算符是程序中对字符型数据进行运算的符号，有比较运算符、“+”和“+=”等。其中“+”主要用于连接两个字符串或字符串变量，因此它并不是做加法计算，而“+=”运算符则是连接字符串并将连接后的字符串赋给第一个字符串。例如，

var language = "chin"; language +="ese";，
则运算完成后language变量的值为chinese。

4）逻辑运算符

逻辑运算符用于对变量或表达式进行逻辑运算，如表所示。
在这里插入图片描述

5）位操作运算符

位操作运算符用于对数值型数据进行向左或向右移位等操作。位操作运算符有“&”位与运算符，“|”位或运算符，“<<”位左移运算符，“>>”位右移运算符，“-”位异或运算符，“>>>”填0右移运算符。

6）条件运算符

条件运算符是JavaScript支持的一种3元运算符，其语法格式如下：
表达式？结果1：结果2
当表达式的值为true，整个表达式结果为“结果1”，否则为“结果2”。

7）赋值运算符

赋值运算符的作用是将一个表达式的值赋给一个变量。赋值运算符为“=”。

四、JavaScript流程控制语句

JavaScript流程控制语句主要有if条件判断结构，for循环控制结构，switch多路分支结构，while循环控制结构等。

（1）if条件判断结构的语法形式如下：

if（条件表达式）
{可执行语句序列1}else
{可执行语句序列2}
首先对条件表达式的布尔值进行判断，若为true，执行“可执行语句序列1”，若为false，执行“可执行语句序列2”。

（2）for循环控制结构的语法与Java相同，示例如下：

for(i=0;i<8;i++)
	{document.write(“hello”);}

执行结果是连续输出8行hello。

（3）switch多路分支结构的语法形式如下：

switch(表达式){
case 1：
	可执行语句序列1；
	break;
case 2：
	可执行语句序列2；
	break;
case n:
	可执行语句序列n；
	break;
}

执行switch语句时，首先计算switch语句表达式的值，当表达式的值为“1”时，执行“可执行语句序列1”；当表达式的值为“2”时，执行“可执行语句序列2”；当表达式的值为“n”时，执行“可执行语句序列n”。最后通过break结束该switch语句。

（4）while循环控制结构的语法形式如下：

while(条件表达式)
{循环体程序语句}；
在执行while循环时，首先判断“条件表达式”的值，如果值为true，则执行循环体程序语句，否则停止执行循环体。
【实例2-11】通过JavaScript显示当前日期。该实例通过日期类Date对象获取当前的年月日和星期，然后通过document.write()方法将日期显示在网页上。

<!DOCTYPE html>
<html>
<head>
<title>日期显示</title></head>
<body>
<script language = "JavaScript">
  var today = new Date();
  var day = today.getDate();                 //获取日期
  var month = today.getMonth()+1;  //获取月份（月份在JavaScript里面是从0开始的）
  var year = today.getFullYear();         //获取年份
var week = today.getDay();       //获取星期几
  var vw = new Array("星期天","星期一","星期二","星期三","星期四","星期五","星期六");
document.write("今天是"+year+"年"+month+"月"+day+"日"+vw[week]);
</script>
</body>
</html>

该程序属于静态HTML页面，可以在记事本中输入上述代码，之后将其另存为“.html”格式，然后在浏览器中打开即可。或者直接在eclipse创建jsp文件，运行。程序运行结果如图所示。
在这里插入图片描述

提示：document是一个文档对象，使用document对象可以对HTML文档进行检查、修改或添加内容，并处理该文档内部的事件。
【实例2-12】一个表单验证实例。该例是一个简单的表单验证实例，用户在单击“提交”按钮时调用check()函数，函数中的JavaScript程序主要用于验证邮箱是否含有@符号，密码是否为空，如果邮箱没有@符号，或密码为空，则在单击“提交”按钮时会弹出警示框。

<html> 
<head> 
<title>邮箱登录</title></head> 
<script language="javascript">
function check()
{
	var user = document.form1.user.value;         //获取输入的邮箱
	var pass = document.form1.pass.value;         //获取输入的密码
	if(user.indexOf("@")==-1)                   //判断邮箱中是否含有@符号
	{
alert("请输入一个正确的email地址!"); //通过alert()函数向用户发出警示信息
return ;
	}else if(pass=="")
	{
		alert("密码不能为空!");                 //通过alert()函数向用户发出警示信息
		return;
	}else
	{
		alert("success!");                       //通过alert()函数向用户发出成功信息
	}
}
</script>
</head> 


<body> 
<form action="" name="form1"> 
<table> 
  <tr> 
    <td>邮箱:</td> 
    <td><input type="text" name="user" id="username" /></td> 
  </tr> 
<tr> 
    <td>密码:</td> 
    <td><input type="password" name="pass" id="pw" /></td> 
  </tr>
<tr> 
    <td colspan="2">
    <input type="button" name="login" value="提交" onClick="check()" ></td>
  </tr> 
</table> 
</form> 
</body>
</html>

程序运行结果如图：
在这里插入图片描述

橙窗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础

文章目录一、JavaScript概述二、在JSP中引入JavaScript1、将JavaScript直接加入网页中：2、通过链接引用的方式三、JavaScript的数据类型与运算符1、数据类型2、运算符1）算术运算符2）关系运算符3）字符串运算符4）逻辑运算符5）位操作运算符6）条件运算符7）赋值运算符四、JavaScript流程控制语句（1）if条件判断结构的语法形式如下：（2）for循环控制结构的语法与Java相同，示例如下：（3）switch多路分支结构的语法形式如下：（4）while循环控制结构的语
复制链接

扫一扫