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>