HTML5+CSS3+JavaScript从入门到精通-12
原创HTML5+CSS3+JavaScript从入门到精通-12
原创
qiqi_fu
发布于 2021-12-03 16:52:19
发布于 2021-12-03 16:52:19
HTML5+CSS3+JavaScript从入门到精通
作者：王征，李晓波
第十二章 Javascript编程的初步知
案例
12-01 JavaScript的数值常量
<!DOCTYPE html>
<!--web12-01-->
<!--
JavaScript是弱类型： 即使用前无需声明，使用或赋值时确定其数据类型。
Infinity: 正无穷大，也可以加负号
NaN：Not a number,运算（比如0除以0）产生未定义结果时的值。它与任何值都不相等，包括自己在内。
isNaN(): 检查是否是NaN
JavaScript中，所有数字都是由浮点型表示的。
-->
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript的数值常量</title>
</head>
<body>
<h3 align="center">JavaScript的数值常量</h3>
<hr />
<script type="text/javascript">/*添加script代码*/
const mya1 = 25;
const mya2 = 037;
const mya3 = 0x1A;
const mya4 = 3.1415;
const mya5 = 52E-12;
const mya6 = 0/0;
const mya7 = 3E200*5E200;
const mya8 = -3e200*5e200;
/*document.write()在HTML页面上显示信息*/
document.write(mya1+"<br>");
document.write(mya2+"<br>");
document.write(mya3+"<br>");
document.write(mya4+"<br>");
document.write(mya5+"<br>");
document.write(mya6+"<br>");/*NaN*/
document.write(mya7+"<br>");/*Infinity*/
document.write(mya8+"<br>");/*-Infinity*/
</script>
</body>
</html>
12-02 字符串常量和转义字符
<!DOCTYPE html>
<!--web12-02-->
<!--
没有char一样的字符，都是用字符串表示；
必须写在一行，否则会被截断，除非用换行符\n；
单引号和双引号可以嵌套；
-->
<html>
<head>
<meta charset="utf-8" />
<title>字符串常量和转义字符</title>
</head>
<body>
<h3 align="center">字符串常量和转义字符</h3>
<hr />
<script type="text/javascript">
const mya1 = "fish";
const mya2 = ' 李白 ';
const mya3 = "25";
const mya4 = "a line";
const mya5 = "That's very good.";
const mya6 = '"What are you doing?", he asked.';
const mya7 = "c:\\file\\myt";
document.write(mya1 + "<br>");
document.write(mya2 + "<br>");
document.write(mya3 + "<br>");
document.write(mya4 + "<br>");
document.write(mya5 + "<br>");
document.write(mya6 + "<br>");
document.write(mya7 + "<br>");
</script>
</body>
</html>
12-03 布尔型常量
<!DOCTYPE html>
<!--web12-03-->
<html>
<head>
<meta charset="utf-8" />
<title>布尔型常量</title>
</head>
<body>
<h3 align="center">布尔型常量</h3>
<hr />
<script type="text/javascript">
const mya1 = true;
const mya2 = false;
document.write(mya1 + "<br>");
document.write(mya2 + "<br>");
</script>
</body>
</html>
12-04 空值型和未定义值
<!DOCTYPE html>
<!--web12-04-->
<!--
undefined值：
使用一个并未声明的变量；
使用已声明，但未定义的变量；
使用一个不存在的对象属性；
typeof:检测数据的数据类型；
-->
<html>
<head>
<meta charset="utf-8" />
<title>空值型和未定义值</title>
</head>
<body>
<h3 align="center">空值型和未定义值</h3>
<hr />
<script type="text/javascript">
document.write("null的数据类型是：" + typeof (null) + "<br>");/*object*/
document.write("undefined的数据类型是：" + typeof (undefined) + "<br>");/*undefined*/
document.write("null==undefined的值：" + (null == undefined) + "<br>");/*true*/
document.write("null === undefined的值：" + (null === undefined) + "<br>");/*false, 一致性测试运算符 === */
</script>
</body>
</html>12-05 变量的声明
<!DOCTYPE html>
<!--web12-05-->
<html>
<head>
<meta charset="utf-8" />
<title>变量的声明</title>
</head>
<body>
<h3 align="center">变量的声明</h3>
<hr />
<script type="text/javascript">
var myname;
var myscore = 95.5;
mysex = '男';
document.writeln("变量myname的初始值：" + myname);//undefined
document.writeln("<br>变量myname的类型是：" + typeof (myname) + "<hr>");//undefined
document.writeln("<br>变量myscore的初始值：" + myscore);
document.writeln("<br>变量myscore的类型是:" + typeof (myscore) + "<hr>");//number
document.writeln("<br>变量mysex的初始值是：" + mysex);
document.writeln("<br>变量mysex的类型是:" + typeof (mysex) + "<hr>");//string
</script>
</body>
</html>
12-06 变量的赋值
<!DOCTYPE html>
<!--web12-06-->
<html>
<head>
<meta charset="utf-8" />
<title>变量的赋值</title>
</head>
<body>
<h3 align="center">变量的赋值</h3>
<hr />
<script type="text/javascript">
var salary = null;
document.writeln("变量salary的初始值：" + salary);
document.writeln("<br>变量salary的类型：" + typeof (salary) + "<hr>");//object
salary = 7500;
document.writeln("<br>变量salary改变后的值：" + salary);
document.writeln("<br>变量salary的类型：" + typeof (salary) + "<hr>");//number
salary = '我的工资';
document.writeln("<br>变量salary改变类型后的值：" + salary);
document.writeln("<br>变量salary改变类型后的类型：" + typeof (salary) + "<hr>");//string
</script>
</body>
</html>
12-07 基本数据类型转换
<!DOCTYPE html>
<!--web12-07-->
<!--
自动类型转换优先级： 字符串，浮点型，整型，布尔型
基本数据类型转换：String(),Number(),Boolean()
从一个值中提取另一个值： parseInt(), parseFloat(),eval()
-->
<html>
<head>
<meta charset="utf-8" />
<title>基本数据类型转换</title>
</head>
<body>
<h3 align="center">基本数据类型转换</h3>
<hr />
<script type="text/javascript">
var num1 = "120";
var num2 = "160";
document.write("num1='120' num2='160'");
var result = Number(num1) + Number(num2);
document.write("<br>数值的运算结果为：", result);
var st = String(num1);
result = st + 200;
document.write("<br>字符串与数字的运算结果为：", result);
var bo = Boolean(num1);//0,NaN,null,undefined,"" 用Boolean将转换为false,其他值都转换为true
result = bo + num2;
document.write("<br>字符串与布尔值的运算结果为：", result);//true160
result = bo + 200;
document.write("<br>字符串与数值的运算结果为：", result);//201
</script>
</body>
</html>
12-08 数据类型转换方法的运用
<!DOCTYPE html>
<!--web12-08-->
<html>
<head>
<meta charset="utf-8" />
<title>数据类型转换方法的运用</title>
</head>
<body>
<h3 align="center">数据类型转换方法的运用</h3>
<hr />
<script type="text/javascript">
var s1 = "100abc";
var s2 = "20.5";
document.write("s1=\"100abc\" s2=\"20.5\"");
//document.write("<br>Number(s2) = ", Number(s2)); //20.5
num1 = parseInt(s1);//若参数第一个数就不是数字，返回NaN
num2 = parseInt(s2);
document.write("<br>将s1转换为整型后的结果为：", num1);//100
document.write("<br>将s2转换为整型后的结果为：", num2);//20
num1 = parseInt(s1, 8);//将s1中的数字当做8进制，返回的值永远都是十进制数
num2 = parseInt(s1, 2);
document.write("<br>将s1作为8进制转换的结果为：", num1);
document.write("<br>将s1作为二进制数转换的结果为：", num2, "<hr>");
num2 = parseFloat(s2);
document.write("<br>将s2转换为浮点型的结果，即num2的值为：", num2);
result = eval("100+num2");//eval - 计算表达式的值 102.5
document.write("<br>eval(\"100+num2\")的返回值为：", result);
</script>
</body>
</html>
12-09 算术运算符的运用
<!DOCTYPE html>
<!--web12-09-->
<html>
<head>
<meta charset="utf-8" />
<title>算术运算符的运用</title>
</head>
<body>
<h3 align="center">算术运算符的运用</h3>
<hr />
<script type="text/javascript">
var num1 = 16;
var num2 = 7;
document.write("num1 = ", num1);
document.write("<br>num2 = ", num2);
document.write("<br>num1 + num2 = ", num1 + num2);
document.write("<br>num1 - num2 = ", num1 - num2);
document.write("<br>num1 * num2 = ", num1 * num2);
document.write("<br>num1 / num2 = ", num1 / num2);
document.write("<br>-num1 = ", -num1);
document.write("<br>-num2 = ", -num2);
document.write("<br>num1 % num2 = ", num1 % num2); //2
document.write("<br>num1 % (-num2) = ", num1 % (-num2)); //2
document.write("<br>(-num1) % num2 = ", (-num1) % num2); //-2
document.write("<br>(-num1) % (-num2) = ", (-num1) % (-num2)); //-2
</script>
</body>
</html>
12-(10-11-12) 增量运算符(++)与减量运算符(--)的运用
<!DOCTYPE html>
<!--web12-10-->
<!--web12-11-->
<!--web12-12-->
<!--
语法规则：
1. Javascript区分大小写，HTML标记并不区分大小写。
2. Javascript中，语句用分号分隔。如果一行只写一句，则可以不写分号，直接换行就可以；
所以，JS的一个语句尽量写在一行中，避免编译器自动添加分号，而产生歧义。
-->
<html>
<head>
<meta charset="utf-8" />
<title>增量运算符(++)与减量运算符(--)的运用</title>
</head>
<body>
<h3 align="center">10_增量运算符(++)与减量运算符(--)的运用</h3>
<hr />
<h3 align="center">11_赋值运算符的运用</h3>
<hr />
<h3 align="center">12_位运算符的运用</h3>
<script type="text/javascript">
document.write("此部分省略，见P214，P216, P217");//怎么调整script中的字体格式颜色呢？
</script>
</body>
</html>
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读