• 《Head First HTML5 javascript》第2章 数据存储 知识点总结

    知识点：

    JS基本数据类型

    JS不用指定数据类型，而是通过数据的值暗示类型，这种设计很灵活，随着数据值的改变随之改变类型，但自动转换存在误差，需要根据实际情况自行判断并调整。

    常用的3种类型：

    1. 字符型string

      存储字符（比如 "Bill Gates"）的变量

      字符串可以是引号中的任意文本。可以使用单引号或双引号

      • 使用单引号或者双引号，没有区别
      • 单引号不要嵌套单引号。双引号同理，非要嵌套需要对引号进行转义 \' \"
      1. var str = 'asdfas'; //单引号字符串
      2. var str2 = "fadfaf"; //双引号字符串

      其他转义字符：

      • \n 表示换行符
      • \r 表示回车符
      • \t 水平制表符 tab
      • \' 单引号
      • \" 双引号
      • \\ 反斜杠
      • \uXXXX 四位十六进制表示unicode字符串
      • \xXX 两位十六进制表示拉丁字符

      字符串拼接：

      1. var str1 = "hello";
      2. var str2 = "world";
      3. var str = str1 + str2
      4. console.log(str); //helloworld

      书中用的是text，网上查的是string，两者区别看起来并不是很大，感觉在JS中这两个并没有做特殊的区别，毕竟不用声明具体的类型，但是本质上这两个类型还是有差异的

      1. :string |                   VARCHAR                | :limit => 1 to 255 (default = 255)  
      2. :text   | TINYTEXT, TEXT, MEDIUMTEXT, or LONGTEXT2 | :limit => 1 to 4294967296 (default = 65536)

      从一般的经验上讲： :string 被用于短文本输入（用户名，电子邮件，密码，标题等） :text 被用于预计文本长度较长的文本输入（描述，评论内容等）

    2. number：只有一种数字类型。数字可以带小数点，也可以不带

      当数字与文本混合时，数据被视为文本

      1. var num1=5.02;     //使用小数点来写
      2. var num2=520;      //不使用小数点来写
      3.  
      4. //极大或极小的数字可以通过科学（指数）计数法来书写
      5. var y=123e5;      // 12300000
      6. var z=123e-5;     // 0.00123

      数值范围：

      • 5e324 ~ 1.7976931348623157e+308
      • 如果超过范围，会表示为 Infinity 或者 Infinity

      特殊的数值NaN：

      • NaN是number类型，是一个数值
      • 特点1：NaN与任何数进行任何运算结果都是NaN
      • 特点2：NaN与任何数都不相等，包括自己

      相关函数：

      • isNaN() 判断数据是否是NaN， 是返回true，否则返回false

        用来判定输入内容是否为非数字，借由检查NaN来检查非数字的情况

        1. //NaN是一个特殊的number，与其他所有值都不相等，包括它自身
        2. console.log(NaN === NaN ); //false
        3.  
        4. //唯一识别NaN的方法
        5. console.log(isNaN(NaN) );  //true
        6.  
        7. // 范围：5e324 ~ 1.7976931348623157e+308
        8. var min = 5e324;
        9. var max = 1.7976931348623157e+308;
        10. var a = 1.7976931348623157e+309; 
        11.  
        12. console.log(min); //Infinity
        13. console.log(max); //1.7976931348623157e+308
        14. console.log(a);   //Infinity
        15. console.log(isFinite(a)); //false(超出范围，不在数值范围内)

      • isFinite() 判断数据是否在范围内，在范围内返回true，否则false

    3. boolean：布尔（逻辑）只能有两个值：true 或 false

    其他5种类型：

    • Null
    • Undefined
    • Object
    • Symbol
    • BigInt

    数据用途

    1. 常量：用来表示不会改变的数字，有利于存储需要写死在代码里的数据，并赋予有叙述性的名称，让代码更易于理解并便于在代码中修改

      使用const创建，必须初始化，如果没有初始化，在计算过程中如果要显示数字，却收到非数值数据时会显示undefined或NaN

      1. const TAXRATE;//未初始化
      2. const DONUTPRICE = 1.2;

    2. 变量：会改变的数据，可以用var和let进行声明

    3. 三种声明JS变量的方式：var、let、const，其中，let、const 是 ES6中新加的

      自从ES6增加了 let 和 const 之后，基本上就不再使用var了。

      let 和 const 声明的变量有明确的作用域、声明位置、不变的值，使得变量的声明有了更好的约束，有助于提高代码的质量。

    数据命名

    1. 合法性：可用字母、下划线和美元符号作为开头，其他任意字符都不可

    2. 驼峰命名：采用单词叠加&首字母大写的方式，通常首个单词字母小写表示变量和函数

      1. var getDount();
      2. var numDonuts;

    数据转换

    将字符串转换为数字，其字符串中不能包含除数字外的其他字符

    1. parseInt();//将字符转换为整数
    2. parseFloat();//将字符转换为浮点数
    3.  
    4. var numCakeDonuts =  parseFloat(document.getElementById("cakedonuts").value);

    其他

    1. .value取值

      JS允许我们通过 getElementById()函数以id访问网页元素，但这个函数不会直接取值，需要以JS对象的形式提供HTML域内容，我们通过域的value性质访问数据

      document.getElementById("cakedonuts").value

    2. toFixed()把金额四舍五入到指定的位数

      1. toFixed(digits)
      2. total.toFixed(2)       //保留两位小数
      3.  
      4. const numObj = 12345.6789;
      5.  
      6. numObj.toFixed()       // Returns '12346': rounding, no fractional part
      7. numObj.toFixed(1)      // Returns '12345.7': it rounds up
      8. numObj.toFixed(6)      // Returns '12345.678900': additional zeros
      9. (1.23e+20).toFixed(2)  // Returns '123000000000000000000.00'
      10. (1.23e-10).toFixed(2)  // Returns '0.00'
      11. 2.34.toFixed(1)        // Returns '2.3'
      12. 2.35.toFixed(1)        // Returns '2.4': it rounds up
      13. 2.55.toFixed(1)        // Returns '2.5': it rounds down as it can't
      14.                        // be represented exactly by a float and the
      15.                        // closest representable float is lower
      16. 2.449999999999999999.toFixed(1) // Returns '2.5': it rounds up as it less
      17.                        // than NUMBER.EPSILON away from 2.45 and therefore
      18.                        // cannot be distinguished
      19. -2.34.toFixed(1)       // Returns '-2.3': due to operator precedence,
      20.                        // negative number literals don't return a string…
      21. (-2.34).toFixed(1)     // Returns '-2.3'

    3. indexOf()检查出现内容

      返回某个指定的字符串值在字符串中首次出现的位置。

      如果没有找到匹配的字符串则返回 -1。

      注意： indexOf() 方法区分大小写。

      提示： 可以查看类似方法 lastIndexOf()

      1. indexOf(searchString)
      2. indexOf(searchString, position)
      4. if(donutString.indexOf("dozen") != -1){
      5. ...
      6. }

    案例：

    HTML&JS

    1. <html>
    2. 	<head>
    3. 		<title>Duncan's Just-In-Time Donutstitle>
    4. 		<link rel="stylesheet" type="text/css" href="donuts.css">
    5. 		<script type="text/javascript">
    6. 			function updateOrder()
    7. 			{
    8. 				const TAXRATE = 0.0925;
    9. 				const DONUTPRICE = 0.5;
    10. 				var numCakeDonuts = parseDonuts(document.getElementById("cakedonuts").value);
    11. 				var numGlazedDonuts = parseDonuts(document.getElementById("glazeddonuts").value);
    12. 				if(isNaN(numCakeDonuts))
    13. 					numCakeDonuts = 0;
    14. 				if(isNaN(numGlazedDonuts))
    15. 					numGlazedDonuts = 12;
    16. 				var subTotal = (numCakeDonuts + numGlazedDonuts) * DONUTPRICE;
    17. 				var tax = subTotal * TAXRATE;
    18. 				var total = subTotal + tax;
    19. 				document.getElementById("subtotal").value = "$" + subTotal.toFixed(2);
    20. 				document.getElementById("tax").value = "$" + tax.toFixed(2);
    21. 				document.getElementById("total").value = "$" + total.toFixed(2);
    22. 			}
    23.  
    24. 			function parseDonuts(donutString)
    25. 			{
    26. 				numDonuts = parseInt(donutString);
    27. 				if(donutString.indexOf("dozen") != -1)
    28. 					numDonuts *= 12;
    29. 				return numDonuts;
    30. 	
    31. 			}
    32. 			function placeOrder(form)
    33. 			{
    34. 				if(document.getElementById("name").value == "")
    35. 					alert("I'm sorry but you must provide your name before submitting an order.");
    36. 				else if(document.getElementById("pickupminutes").value == "" || isNaN(document.getElementById("pickupminutes").value))
    37. 					alert("I'm sorry but you must provide the number of minutes until pick-up before submitting an order.");
    38. 				else 
    39. 					form.submit();
    40. 			} 
    41. 		script>
    42. 	head>
    43.  
    44. 	<body>
    45. 		<div id="frame">
    46. 			<div class="heading">Duncan's Just-In-Time Donutsdiv>
    47. 			<div class="subheading">All donuts 50 cents each, cake or glazed!div>
    48. 			<div id="left">
    49. 				<img src="donuttime.png" alt="Just-In-Time Donuts">
    50. 			div>
    51. 			<form name="orderform" action="donuts.php" method="POST">
    52. 				<div class="field">Name:
    53. 					<input type="text" id="name" name="name" value=""/>
    54. 				div>
    55. 				<div class="field"># of cake donuts:
    56. 					<input type="text" id="cakedonuts" name="cakedonuts" value="" placeholder="cakedonuts" onchange="updateOrder();"/>
    57. 				div>
    58. 				<div class="field"># of glazed donuts:
    59. 					<input type="text" id="glazeddonuts" name="glazeddonuts" value="" onchange="updateOrder();"/>
    60. 				div>
    61. 				<div class="field">Minutes 'til pickup:
    62. 					<input type="text" id="pickupminutes" name="pickupminutes" value="" />
    63. 				div>
    64. 				<div class="field">Subtotal:
    65. 					<input type="text" id="subtotal" name="subtotal" value="" readonly="readonly"/>
    66. 				div>
    67. 				<div class="field">Tax:
    68. 					<input type="text" id="tax" name="tax" value="" readonly="readonly"/>
    69. 				div>
    70. 				<div class="field">Total:
    71. 					<input type="text" id="total" name="total" value="" readonly="readonly"/>
    72. 				div>
    73. 				<div class="field">
    74. 					<input type="button" value="Place Order" onclick="placeOrder(this.form);"/>
    75. 				div>
    76. 			form>
    77. 		div>
    78. 	body>
    79. html>

    CSS

    1. body {
    2.   font:14px arial;
    3.   text-align:center;
    4. }
    5.  
    6. #frame {
    7.   margin-top:15px;
    8.   width:440px;
    9. }
    10.  
    11. #left {
    12.   float:left;
    13.   width:130px;
    14. }
    15.  
    16. div.heading {
    17.   font:20px arial;
    18.   font-weight:bold;
    19.   margin-bottom:5px;
    20. }
    21.  
    22. div.subheading {
    23.   font:15px arial;
    24.   font-style:italic;
    25.   margin-bottom:10px;
    26. }
    27.  
    28. div.field {
    29.   margin-bottom:5px;
    30.   text-align:right;
    31. }

  • 相关阅读:
    maven下载与安装教程
    C++常成员函数 - const 关键字
    【李航统计学习笔记】第一章：统计学习及监督学习概论
    一份小盒饭的“深圳创新密码”
    TypeScript查缺补漏【TS自动重启+自动运行+parcel自动打包】
    软件测试行情不好，我还是啃下了27K的offer
    GCC
    Java学习笔记（二）：封装、继承、多态
    代码随想录——图论一刷day02
    【DP+贪心】跳跃游戏
  • 原文地址：https://blog.csdn.net/hcud024/article/details/127659583