[HTML]Web前端开发技术26（HTML5、CSS3、JavaScript ）JavaScript基础—

这篇具有很好参考价值的文章主要介绍了[HTML]Web前端开发技术26（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

[HTML]Web前端开发技术26（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页,喵喵画网页,html,前端,html5,计算机学习,javascript,css3

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

前言

数据类型

数据类型-字符型

数据类型-数值型

数据类型-布尔型

数据类型-其它类型

变量

转义字符

运算符和表达式

算术运算符和表达式

关系运算符和表达式

逻辑运算符和表达式

赋值运算符和表达式

位运算符和表达式

条件运算符和表达式

课后练习

网页标题：事件处理程序返回值的应用

网页标题：表单控件焦点、表单提交、重置事件的应用

网页标题：用户登录验证

总结

前言

Web 前端开发工程师应掌握以下内容

理解 JavaScript 程序的概念与作用；

掌握 JavaScript 标识符和变量的概念及使用方法；

掌握 JavaScript 常用运算符和表达式概念；

掌握 JavaScript 中顺序、分支、循环等 3 种程序控制结构语法；

掌握 JavaScript 函数的定义方法，并学会使用；

学会综合运用 JavaScript 设计具有动态、交互功能的网页。

数据类型

       数据类型是每一种计算机语言中的重要基础，JavaScript中的数据类型可分为字符型、数值型、布尔型、Null、Undefined和对象六种类型。

数据类型-字符型

       字符型数据又称为字符串，由若干个字符组成，并且用单引号或双引号封装起来，如“你好！”、‘你好！’、“学习‘语言’”。

l在使用字符串的过程中，需要注意单引号、双引号必须成对使用相互包含，但不能交叉。

    如：“学习不是一件‘容易”的事件’(×，交叉错误)。

数据类型-数值型

2.数值型：是JavaScript中最基本的数据类型之一，分为整型、浮点型、内部常量以及特殊值。

l 整型数值即整数，例如 100 、 -3500 、 0 等都是整数。整数表示方法有十进制表示、八进制和十六进制的方式表示。

使用0打头的整数是八进制整数，如017，-035等都是合法的八进制整数。

使用0x后0X打头的整数是十六进制整数，如0x16，0X3A89等都是合法的十六进制整数。

浮点数，例如3.53、-534.87等都是浮点型数值。浮点数还可以采用科学计数法进行表示，如3.5E15表示3.5×1015。

内部常量：Math.E(自然对数的底数e)、Math.PI等。

特殊值：Infinity（∞）、NaN-Not a Number。

数据类型-布尔型

3.Boolean（布尔型）是一种只含有true和false这两个值的数据类型，通常来说，布尔型数据表示“真”或“假”。

JavaScript中，通常采用true和false表示布尔型数据，但也可将他们转换为其他类型的数据，例如可将值为true的布尔型数据转换为整数1，而将值为false的布尔型数据转换为整数0。

数据类型-其它类型

4.Null : null,表示空,不是0，0是有值的。

5.Undefined：变量创建后未赋值（数字：NaN；字符串：Undefined；Boolean:false）。

6.Object:对象也是JS的重要组成部分，如date、window、document等，在后面介绍。

数据类型之间可以通过函数进行转换。

转换函数如下：

Number(value): 把值转换成数字（整型或浮点数）

String(value): 把值转换成字符串

Boolean(value): 把值转换成 Boolean 类型

变量

变量：可以保存执行时变化的值的名字，称为“变量”，变量是存储信息的容器。

格式： var 变量名 [=初值][,变量名[=初值] …] ；

   var作用：声明或创建变量。

具有良好编程习惯的程序员应该“先声明变量再使用”。例如：

      var userName =““ ;

      var x=0，y=2,str1=“欢迎你学习JS”;

      var status = true;

      var a,b,c;

      str_name=“张为民";   //向未声明的变量赋值

转义字符

如果在字符串中涉及到一些特殊字符如“\”、“"”、'”等，这些字符无法直接使用，需要采用转义字符的方式。

转义字符	代表含义	转义字符	代表含义
\b	退格符	\t	水平制表符
\f	换页符	\'	单引号
\n	换行符	\"	双引号
\r	回车符	\\	反斜线

运算符和表达式

JavaScript运算符主要有：算术运算符、关系运算符、逻辑运算符、赋值运算符、自增自减运算符、逗号运算符和位运算符等。

根据操作数的个数，将运算符分为一元运算符、二元运算符和三元运算符。

由操作数（变量、常量、函数调用等）和运算符结合在一起构成的式子称为“表达式”，最简单的表达式可以是常量名称。

对应的表达式包括：算术表达式、关系表达式、逻辑表达式、赋值表达式、自增、自减表达式、逗号表达式、条件表达式、位表达式。

算术运算符和表达式

算术运算符负责算术运算，用算术运算符和运算对象(操作数)连接起来符合规则的式子，称为算术表达式。

双元运算符（ op1 operator op2 ）

单元运算符（op operator 或 operator op

[HTML]Web前端开发技术26（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页,喵喵画网页,html,前端,html5,计算机学习,javascript,css3

关系运算符和表达式

[HTML]Web前端开发技术26（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页,喵喵画网页,html,前端,html5,计算机学习,javascript,css3

关系运算符和表达式

[HTML]Web前端开发技术26（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页,喵喵画网页,html,前端,html5,计算机学习,javascript,css3

逻辑运算符和表达式

[HTML]Web前端开发技术26（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页,喵喵画网页,html,前端,html5,计算机学习,javascript,css3

赋值运算符和表达式

基本语法：

简单赋值运算： < 变量 > = < 变量 > operator < 表达式 >

复合赋值运算： < 变量 > operator = < 表达式 >

[HTML]Web前端开发技术26（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页,喵喵画网页,html,前端,html5,计算机学习,javascript,css3

位运算符和表达式

      位运算符是对二进制表示的整数进行按位操作的运算符。

      如果操作数是十进制或者其他进制表示的整数，运算前先将这些整数转换成32位的二进制数字，如果操作数无法转换成32位的二进制数表示，位运算的结果为NaN。

      位运算符：&-按位与；~ -按位非；|-按位或；^-按位异或

其中位运算~， NOT 实质上是对数字求负，然后减 1。

条件运算符和表达式

条件运算符是一个3元运算符，也就是该运算涉及3个操作数。

l 基本语法：

变量=布尔表达式 ? 真值表达式 : 假值表达式

var variable = boolean_expression ? true_value : false_value;

例如：

var v1=300,v2=-100;

var max = (v1 >v2) ? v1 : v2; //由于v1>v2，条件为真值，所以将真值表达式v1的值赋给max，max的值为300 ,比用if语句来得简单些。

课后练习

网页标题：事件处理程序返回值的应用

网页标题：事件处理程序返回值的应用

录入如下代码，熟悉提交事件处理程序返回值的使用

创建一个网页“simple.html”，该网页的显示内容自定。

在浏览器中打开“11-7.html”网页，在文本框中输入姓名单击提交按钮，则首先弹出警示框，单击警示框的确定按钮之后，即打开“simple.html”网页。若不输入任何值单击提交按钮，则弹出警示框，之后不会打开“simple.html”，运行效果如下图所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
	<title>事件处理程序返回值的应用</title>
	<script>
		function showName()
		{
			if(document.form1.name1.value=="")
			{
				alert("没有输入内容！");
				return false;
			}
			else
			{
				alert("欢迎你！"+document.form1.name1.value);
				return true;
			}
		}
	</script>
</head>
<body>
	<h4>事件处理程序返回值的应用</h4>
    <form name="form1" action="simple.html" onSubmit="return showName();">
    	姓名：<input type="text" name="name1">
        <input type="submit" value="提交">
    </form>
</body>
</html>

网页标题：表单控件焦点、表单提交、重置事件的应用

网页标题：表单控件焦点、表单提交、重置事件的应用

设计如下图所示表单，当输入用户名的文本框获得焦点时，文本框自动显示admin，当该文本框失去焦点时，文本框中的字体变为蓝色

单击提交按钮后显示告警框，具体显示信息如下图所示，单击确定按钮后，打开action中的页面。

单击重置按钮，弹出如图所示的告警框：

具体实现代码可参照下图所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单控件焦点、表单提交、重置事件的应用</title>
<style>
   input{font-family:Tahoma, Geneva, sans-serif;}
   fieldset{width:300px; height:150px;}
   form{text-align:center;}
</style>
<script>
   function $(id){return document.getElementById(id);}
   function submitTest()
   {//表单的提交事件触发的功能
       var msg="用户名："+$("input1").value;
       msg+="\n密码："+$("input2").value
       alert(msg);
   }
   function resetTest()
   {//表单的重置事件
       alert("开始清空数据！");
   }
   function getFocus(){$("input1").value="admin";} //表单控件获得焦点事件触发的功能
   function loseFocus(){$("input1").style.color="#00f"; } //表单控件失去焦点事件触发的功能
</script>
</head>
<body>
<form name="form1" action="simple.html" method="post" onSubmit="submitTest()" onReset="resetTest()">
<fieldset>
<legend>表单数据提交</legend>
<br><label>用户名：</label><input type="text" id="input1" name="input1" onFocus="getFocus();" onBlur="loseFocus();">
<br><br><label>密&emsp;码：</label><input type="password" id="input2" name="input2">
<br><br><input type="submit" value="提交">
<input type="reset" value="重置">
</fieldset>
</form>
</body>
</html>

网页标题：用户登录验证

网页标题：用户登录验证

对上题中的功能进行修改：仅当输入用户名admin和密码123时，单击提交按钮时显示登录成功的告警框，并打开action中指定的页面（该页面的内容自行设置），若输入的用户名或密码不对，则弹出如下图所示的告警框，提示用户重新输入，并清空文本框中的内容。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单提交、重置事件的应用</title>
<style>
	input{font-family:Tahoma, Geneva, sans-serif;}
	fieldset{width:300px; height:150px;}
	form{text-align:center;}
</style>
<script>
	function $(id){return document.getElementById(id);}
	function submitTest()
	{
		if($("input1").value=="admin" && $("input2").value=="123")
			{alert("登录成功！"); return true;}
		else
		{
			alert("用户名或密码错误，请重新输入！");
			$("input1").value="";
			$("input2").value="";
			return false
		}
	}
	function resetTest()
	{
		alert("开始清空数据！");
	}
</script>
</head>

<body>
	<form name="form1" action="loginindex.html" method="post" onSubmit="return submitTest()" onReset="resetTest()">
    	<fieldset>
        	<legend>表单数据提交</legend>
            <br><label>用户名：</label><input type="text" id="input1">
            <br><br><label>密&emsp;码：</label><input type="password" id="input2">
            <br><br><input type="submit" value="提交">
            <input type="reset" value="重置">
        </fieldset>
    </form>
</body>
</html>

总结

JavaScript是一种功能强大、使用简便的、具有安全性的客户端脚本语言。

本章简要地介绍了JavaScript语言的历史和特点，详细讲解了JavaScript的标识符、变量、运算符和表达式、三种程序控制结构（包括顺序结构、分支结构和循环结构）及函数等相关知识。通过在HTML文档中嵌入JavaScript脚本语言，可以增强用户与网页之间的交互性，并在页面中实现各种特效，提高页面的观赏性。

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

[HTML]Web前端开发技术26（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页,喵喵画网页,html,前端,html5,计算机学习,javascript,css3 文章来源地址https://www.toymoban.com/news/detail-828994.html