初识JavaScript

JS简介

1.前端的三种语言

1.html 2.css 3.JavaScript

2.JS组成

1.ECMAScript JS的基本语法 2.BOM webapi 3.DOM webapi

3.JS的书写位置

1.外部引入 2.内部书写在script标签内的代码 3.行内

4.JS的注释

1.单行注释 Ctrl+/ 2.多行注释（块注释） Alt+Shift+A

5.JS的结束符

每一条语句后面的分号是可以省略的一般一行仅书写一条语句，如果一行书写多条语句必须使用分号分隔。

JS的输入与输出

1.输入

1.prompt（'提示信息'）拥有提示信息的输入框

2.confirm（'提示信息'）拥有提示信息的弹出选择框

2.输出

1.alert（'内容'）弹窗输出

2.console.log（'内容'）控制台输出

3.document.weite（'内容'）将内容插入到页面body中，如果内容包含标签，浏览器会将其当成标签进行解析。

3.输入用户名案例

单独输出用户名且在控制台打印出来。 prompt（'请输入用户名'）

console.log（prompt（'请输入用户名'））;

数据类型

1.简介

基础数据类型 5种复杂数据类型 3种了解1中数据

2.基本数据类型

1.数值 number 直接定义即可

console.log（10） console.log（+10） console.log（*10） console.log（10.5）

2.字符串 string 必须用（单双引号、反引号）括起来

console.log（'单引号'） console.log（"双引号"） console.log（反引号）

3.布尔类型 boolean 仅有两个值： true（对，成立） false（错，不成立）

4.undefined 未定义常出现在报错中

5.null 空类型常出现在报错中

3.数据类型的监测

常用于查看数据的类型，语法：tyepof（数据）

console.log(typeof(10)); //'number' console.log(typeof('字符串')); //'srting' console.log(typeof(ture)); //'boolean' console.log(typeof(undefined)); //'unedfined'

特殊记忆 console.log(typeof(null)); //'object' 对象

    // 当数据是别人提供的
    // 使用prompt() 
    // 浏览者只要是点击了 确认 接收到的就是string类型
    // 浏览者只要是点击了 取消 接收到的就是null类型
    // console.log(typeof(prompt('请输入数据')))

    // 对于confirm()
        console.log(confirm('请选择'));
    /* 
        typeof() 获取数据类型名
    */

4.数组初体验

数组：一组数据的有序集合

console.log （10， 20， 30， 40）系统会为数组编号0 1 2 3 也可以是字符串 console.log(['abc', 'xyz', 'zhangsan', 150]);

变量与常量

1.变量的基本使用

变量是内存中用于储存数据的空间，这个空间为了使用而所有的一个名字，叫做变量。定义: let 变量名 = 数据

2.变量的命名规则

1.强制要求（法定）只能包含字母、数字、下划线以及$符号，且不能够以数字开头。不能是JS的关键字。

2.认为约束（道德）见名知意如果变量名包含多个单词，推荐采用小驼峰命名规则（除了第一个单词外，后面的单词的首字母都大写）

3.变量的注意事项

1.同一个变量不能使用let声明两次（不严谨说法）

2.如果仅声明了变量，但没有赋值，此时变量的值是undefined

4.交换两个变量的值

首先定义两个变量

let A = 1 let B = 2

其次为了交换两个变量设立第三个变量

let C

将 C 装入 A 的内容 C = A 将 A 装入 B 的内容 A = B 将 B 装入已经装了 A 的内容的 C B = C

这时 A B 变量的值已经完成了对调，

console.log（A, B）控制台打印查看。

5.数组的基本操作

[数据，数据，数据，...]

let arr = [10, 20, 30, 40] 查看所有元素，直接控制台打印输出。 console.log（arr）

查看数组中的某一个元素语法:数组名[下标] console.log(arr[0]) console.log(arr[3]) console.log(arr[10]) 如果下标的数据并不存在，则返回undefined

添加元素 arr[4] = 100 可以直接添加或覆盖对应下标的数据到数组内。

获取数组的长度 length 用法：console.log（arr.length）；

6.变量的内存操作

可以利用覆盖改变变量内的值也可以利用运算符号改变变量内的值

运算符

1.赋值运算符

“=”为赋值运算符，将右侧的数据赋值给左侧的变量。给它安个家。并没有比较的功能。在JS中。

2.算术运算符

1.常用 + - * /

2.求余数 % 例如

console.log（5 % 3）得出的值为2

3.自增、自减例如定义一个变量 let A = 20；此时控制台打印A，结果为20 A++; 此时控制台打印A，结果为21 因为++而自增1 自减同理

3.字符串运算符

单独作为链接作用（优先级别大于相加） +=是将新字符串内容追加到后面。

数据类型转换

1.隐式转换

首先声明：只有相同类型的数据才直接进行运算，如果数据类型不相同，会发生数据类型转换。隐式转换：JS在内部运算中，自己完成的转换。显示转换：程序员在书写代码时，发现数据类型不同，自己完成的转换。

2.显示转换

Number（数据）可以将其他数据类型转换为number类型 String（数据）可以将其他数据类型转换为string类型

例如：consloe.log（Srting（10））可转换为字符串类型。 number同理

3.转换案例

定义 let inventory = 200； let num = Number（prompt（'请输入本月的入库数'））；

let total = inventory + num； console.log（total）;

小结：1.如果数据类型不相同，会发生数据类型转换隐式：绝大多数隐式转换都是正确的显示：在进行+ 与 += 时，如果有一个字符串，要搞清楚是进行数学的加还是字符串之间的拼接。

4.数值提取

parseInt（字符串）在一个字符串中，从左向右依次提取整数，直到遇到第一个非数字停止提取。

console.log(parseInt('10')); // 10 console.log(parseInt('10元')); // 10 console.log(parseInt('RM10元')); // NaN Not a Number不是一个数

parseFloat（字符串）在一个字符串中，从左向右依次提取小数，直到遇到第一个非数字停止提取。

小结： Number（）字符串内全部都是数字。 parseInt（）与parseFloat（）字符串后面是非数字。

模版字符串

1.模版字符串

1.使用反引号定义的字符串也称之为模版字符串 2.模版字符串的特点：可以换行定义字符串；可以解析变量的值${变量名}；

最后-案例分享

表格的css样式

table{
   width: 800px;
   margin: 20px auto;
   /* 合并单元格边框 */
   border-collapse: collapse;
   text-align: center;
 }


 table,th,td{
   border: 1px solid #000
 }

定义用户输入

let goodsName = prompt（'请输入商品名'） let price = prompt（'请输入价格'） let num = prompt（'请输入数量'） let add= prompt（'请输入地址'）

let str = <table> <tr> <td>商品名</td> <td>价格</td> <td>数量</td> <td>地址</td> </tr> <tr> <td>${goodsName}</td> <td>${price}</td> <td>${num}</td> <td>${add}</td> </tr> </table> document.write(str)

over-------------------

JavaScript初识