又开始更新Javascript基础总结啦（1）：

1.基础介绍

1-1.JS是什么

• JavaScript是一门编程语言，可以实现很多的网页交互效果

1-2.JS的作用

• 网页特效 (监听用户的一些行为让网页作出对应的反馈)
• 表单验证 (针对表单数据的合法性进行判断)
• 数据交互 (获取后台的数据, 渲染到前端)
• 服务端编程 (node.js)

1-3. JS的组成

• ECMAScript:
  • 规定了js基础语法核心知识
  • p比如：变量、分支语句、循环语句、对象等等
• Web APIs :
  • DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
  • BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等
  • p注意 DOM属于BOM
• 权威网站：MDN

1-4.JS书写位置

• 内联式JavaScript
• 内嵌式JavaScript写在标签上方
• 外链式-JavaScript-通过src引入html页面中，但是

1-5.JS的注释

• 单行注释 // 快捷键ctrl+/
• 多行注释/* */ 快捷键shift+alt+a

1-6.JS的结束符

• 分号： 可以加也可以不加，可以按照团队约定
• 注意换行默认为结束

1-7.JS输入输出语句

• 输入：prompt()
• 输出：
  • alert() 页面弹出警告框，不运行页面代码
  • document.write() 向body标签书写内容，占页面位置
    • 可以把一个标签的字符串重新插入到body标签里面
    • 写标签字符串的时候如果要换行只能使用反引号
    • 没有换行用哪一种方式都可以
    • 只要是写标签字符串都可以使用反引号模板字符串
    • 不要直接在字符串里面一个一个字母写，可以在body标签中使用快捷键先生成标签然后复制回去
  • console.log() 控制台输出语法，程序员调试使用，运行页面代码，不占页面位置

2.变 量

作用：是计算机存储数据的容器

2-1.变量申明

• let name;

2-2.变量赋值

• let name;

  name='张三'；

• let name='张三'；

• let a,b;

  a=10,b=20;

2-3.变量交换

     // 先声明两个变量num1=10，num2=20，然后再声明一个空值
      let num1 = 10,
        num2 = 20,
        temp;
      // 先让空值temp存储num1的值10，num1再等于num2值20，num2等于num1以前的值temp的10
      temp = num1;
      num1 = num2;
      num2 = temp;
      console.log(num1, num2); // 20 10

2-4.变量命名

• 字母大小写,符号$，数字，下划线_，不能以数字开头
• 不能以关键字命名（let,var,if,for等）
• 字母区分大小写（age和Age是不同变量）
• 驼峰式命名（第二个单词首字母为大写，例：userNmae）

3.数据类型

3-1.基本数据类型

• number 数字

• string 字符串

  • 字符串拼接

        let name = prompt('请输入姓名');
        let age = prompt('请输入年龄');
        document.write(`大家好，我叫${name}，今年${age}岁了`);
		//反引号包括着输出内容${num}

• Boolean 布尔

  • true 真
  • false 假

• null 空类型，表示赋值了，但是内容为空

• undefined 未定义型 ， 表示没有赋值

3-2.引用数据类型

• object 对象
• function 函数
• array 数组

3-3.检测数据类型

• typeof

        let num = 10;
        let name = '刘德华';
        let isRain = true;
        let  foods;
        let money = null;
        console.log(typeof num);  //number 输出  num变量的类型
        console.log(typeof name);  //string 
        console.log(typeof isRain);  //boolean
        console.log(typeof foods);   //undefined
        console.log(typeof money);   //object   对象类型

4.类型转换

4-1.为什么要类型转换

• JavaScript是弱数据类型：JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。坑：使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算

        let num1 = 10;
        let num2 = 20;
        console.log(num1+num2); //10+20=1020

4-2.隐式转换

• 某些运算符被执行时，系统内部自动数据类型进行转换
• Ø+ 号两边只要有一个是字符串，都会把另外一个转成字符串
• Ø除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型

        //工作中  比较常用的隐式转换写法
        let num2 = '2';
        let num3 = num2-0;//num3是一个数字类型
        console.log(typeof num3);
        //最简洁的写法  //没有为什么 js内部就有这样的技术技巧
        let num4 = +num2;  //也是可以的
        console.log(typeof num4);

4-3.显示转换

• number（）
  • 转成数字类型
  • 如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
  • NaN也是number类型的数据，代表非数字

        let num1 = '123';
        let num3 = 'abc';
        //显示转换  转换成数字类型
        let num2 = Number(num1);
        //显示转换  转换成数字类型
        let num4 = Number(num3);
        console.log(num2);//转换成功，输出123
        console.log(num4);//转换失败，输出NaN （not a number）

• parseInt（）

  • 转换成整型

  	let num5 = '1234.11'
      //显示转换  转换成整型
      let num6 = parseInt(num5);
      console.log(num6);   // 输出1234
  

• parseFloat ()

  • 转换成浮点型

       let num7 = '1234.11';
       //显示转换   转换成浮点型
       console.log(parseFloat(num7));  //输出1234.11
  

• string（）

  • 转换

  • .tostring()

            let num8 = 123+'';
            console.log(num8);//隐式转换  输出string
        
            let num9 = 123;
            let str = string (num9);
            console.log(str);  //显示转换  输出string
        
            let  num10 = 123;
            console.log(num10.tostring()); //显示转换  输出string
    

• Boolean（）

  • 空字符串,0,NaN,undefined 转换成布尔类型值为false，其他的为true

5.订单案例

5-1.页面效果

5-2.代码片段

<script>
        let name = prompt('请输入商品名称')
        let price = prompt('请输入商品价格')
        let count = prompt('请输入商品数量')
        let total = price * count
        let address = prompt('请输入地址')
        document.write (`
        <table>
            <caption><h1>订单付款确认页面</h1></caption>
                <tr>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>总价</th>
                    <th>地址</th>
                </tr>
            	<tr>
                	<td>${name}</td>
                	<td>${price}</td>
                	<td>${count}</td>
                	<td>${total}</td>
                	<td>${address}</td>
            	</tr>
        </table>
        `)
</script>