1.js的书写方式
01.外部:通过script标签的src属性,来引入一个外部的js文件
<script src="./outer.js"></script>
02.内部:书写在script标签内的代码
<script>
alert('world')
</script>
03.行内式需要了解就行
<h1 onclick="alert('hello')">hello</h1>
2.js的输入和输出
01.输入
1. prompt()
语法:prompt('提示信息')
prompt('请输入年龄');
2. confirm()
语法:confirm('提示信息')
confirm('您真的要删除')
02.输出
包括alert (内容),console.log(控制台输出),document.write(将内容添加到body里面去,如果内容中含有标签,流浪器会将标签进行解析)
1. alert('内容')
弹窗输出
alert('hello world');
2. console.log('内容')
控制台输出
console.log('hello world');
3. document.write('内容');
将内容插入到页面中(body内),如果内容中包含标签,浏览器会将其当成标签进行解析
document.write('<h1 style="width:100px; height:100px;background:#09f;">hello world</h1>');
小结:
alert()
console.log()
document.write()
输出用户名案例:
console.log(prompt('请输入用户名'));
3.基本数据类型
A.javascript的数据內型基本分为五种,
01.数值 numer
console.log(10);
console.log(10.5);
console.log(+10.5);
console.log(-10.5);
02.字符串 string
必须使用引号括起来
console.log('hello');
console.log("world");
console.log(`hello world`);
03.布尔类型 boolean
- 仅有两个值:
true(对,成立)false(错,不成立)
console.log('true');
console.log(true);
console.log(false);
以后只要是仅具有两种性质的数据都可以使用布尔类型来表示
- console.log(10 > 20); 10 > 20结果只有两种
- console.log(10 < 20); 10 > 20 结果只有两种
显示转换
Boolean可以将其数据强制转换为布尔类型数据
console.log(Boolean(10)); true
console.log(Boolean(-10)); true
console.log(Boolean('0')); true
console.log(Boolean(0)); false
console.log(Boolean('a')); true
console.log(Boolean('')); false
console.log(Boolean(' ')); true
注意:只要有意义的都返回true。
02.隐式转换
如果将一个数据作为表达式使用时,js会将数据转换为布尔类型
let a = 10;
if(a){
console.log('yes');
}else{
console.log('no');
} //yes
隐式的写出来是这样 if( numder(a)) ,所以是true,输出就是yes。
let b = 0;
if(b){
console.log('yes');
}else{
console.log('no');
} //no
04.undefined 未定义
console.log(
undefined);
05.null 空类型
console.log(
null);
06.数据类型转换
隐式转换
首先明确:
- 只要相同的数据才可以直接进行运算,如果数据类型不相同,会发生数据类型的转换。
Number(数据)可以将其他数据类型转换为number类型String(数据)可以将其他数据类型转换为string类型
- 隐式转换:
JS在内部运算时,自己完成的转换。
console.log(10 * '20'); // 200
// + += 会优先进行字符串拼接
console.log(10 + '20'); // '1020'
console.log(2 - '2'); // 0
显示转换
- 显示转换:程序员在书写代码时,发现数据类型不同,自己完成的转换
// console.log(Number('20'));
// console.log(10 * Number('20')); // 200
console.log(String(10));
console.log(String(10) + '20'); // '1020'
console.log(2 - Number('2')); // 0
绝大多数隐式转换都可以达到我们的目的,只要在进行+ 或 += 运算
let inventory = 100;
let num = Number(prompt('请输入本月的入库数')); // '20'
// let num = prompt('请输入本月的入库数') * 1; // '20'
// let num = +prompt('请输入本月的入库数'); // '20'
// let total = inventory + Number(num);
let total = inventory + num; //100 + 20
console.log(total); //120
小结:
- 如果数据类型不相同,会发生数据类型转换
- 隐式: 绝大多数隐式转换都是正确的
- 显示: 在进行
+与+=时,如果有一个是字符串,要搞清楚是进行数学的加还是字符中的拼接。
07.数值的提取
parseInt(字符串)
在一个字符串中,从左向右依次提取整数,直到遇到第1非数字停止提取。
console.log(parseInt('10')); // 10
console.log(parseInt('10.5元')); // 10
console.log(parseInt('RM10元')); // NaN Not a Number不是一个
parseFloat(字符串)
在一个字符串中,从左向右依次提取小数,直到遇到第1非数字停止提取。
let num = 100;
// let price = parseInt(prompt('请输入价格')); //20.5
let price = parseFloat(prompt('请输入价格')); //20.5
let money = num * price; //100 * 20.5
console.log(money); //2050
小结:
Number()字符串内全都是数字 '20' '15.3'parseInt()与parseFloat()字符串后面是非数字 '20元' '15.3元'
08.模板字符串
使用``反引号定义的字符串也称之模板字符串。
模板字符中的特点:
可以换行定义字符串
可解析变量的值 ${变量名}
可以换行定义
//可以换行定义
let str = `hello
world`;
// 可解析变量的值
let age = 28;
let str1 = `我今年${age}岁`;
console.log(str1); // 我今年 18 岁
B.数据类型型检测
如果数据是你自己定义的,你清楚知道这个数据的类型
查看数据类型
typeof
语法:typeof(数据)
返回数据的类型名
console.log(typeof(10)) //类型 'number'
console.log(typeof('hello')); //类型 'string'
console.log(typeof(true)); //类型'boolean'
console.log(typeof(undefined)); //类型'undefined'
有时数据是别人提供的,
对于prompt( )
浏览者只要是点击了 确认 接收到的就是string类型,浏览者只要是点击了 取消 接收到的就是null类型,console.log(typeof(prompt('请输入数据'))),
C.typeof( ) 获取数据类型名。
对于confirm()
console.log(confirm('请选择')); //true
D.特征记忆
console.log(typeof(null)); 'object' 对象