JavaScript学习记录（一）
JS的3种书写位置：
行内：
<html >
<body>
<input type="button" value="唐伯虎" onclick="alert('秋香姐')">
</body>
</html>
内嵌：
<html>
<head>
<script>
alert('沙漠骆驼');
</script>
</head>
</html>
外部：
<html >
<head>
<script src="my.js"></script>
</head>
</html>
js文件中：
alert('如果我是DJ，你还爱我吗')
vscode注释快捷键
1、单行注释，使用“Ctrl + /”；
2、块注释，使用“Alt+Shift+A”。
快捷键可在设置中修改
JS的输入输出
<html>
<head>
<script>
//这是一个输入框
prompt('请输入你的年龄：');
//alert 弹出警示框 输出的 展示给用户的
alert('计算的结果是：');
//console 控制台输出 给程序员测试用的
console.log('我是给程序员看的QAQ');
</script>
</head>
</html>
点确定：
点确定，打开检查（F12）：
变量
<script>
var age;
age = 22,myname = '神里凌华的狗';
console.log(age);
console.log(myname);
</script>
<script>
var myname = prompt('你的名字是：');
alert(myname+'是要当海贼王的男人！');
</script>
JS当中变量可以不定义直接赋值，但会变成全局变量：
<script>
p = 3;
console.log(p);
</script>
数据类型
JS的数据类型，是在程序运行过程中，根据“=”后面的类型自动确定。并且可以改变：
<script>
var x = 10;//x是数字型
x = 'kalise';//x是字符串型
</script>
简单数据类型
数字型
进制表示：
<script>
//在数字前加'0'表示八进制
var num1 = 010;
console.log(num1);
//在数字前加'0x'表示十六进制
var num2 = 0xa;
console.log(num2);
</script>
infinity无穷大；NaN，（not a number）,非数字值；
函数isNaN()：
isNaN() 函数用于检查其参数是否是非数字值。
如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。
字符串型
'kalise’和"kalise"，单引号和双引号都可以；注意嵌套使用；
<script>
var str = '"天降"又胜"青梅"';
</script>
转义符：’'
\n 换行；\ 斜杠；’ 单引号；" 双引号；\t 缩进tab；\b 空格blank；
检测获取字符串的长度：length
<script>
var str = 'My name is kalise';
console.log(str.length);//17
</script>
字符串的拼接：‘+’
<script>
var age = 22;
console.log('kalise'+true);//kalisetrue
console.log('12'+12);//1212
console.log('kalise'+' '+'is OK');//kalise is OK
console.log('kalise今年'+age+'岁了');//kalise今年22岁了
</script>
布尔型boolean
true当1；false当0
undefined和null
如果一个变量声明未赋值，就是undefined未定义数据类型
<script>
//undefined
var variable = undefined;
console.log('kalise' + variable);//kaliseundefined
console.log(variable + 1);//NaN
//null 空值
var space = null;
console.log('kalise' + space);//kalisenull
console.log(space + 1);//1
</script>
检测变量的数据类型 typeof
<script>
var num = 10;
console.log(typeof num);//number
var str = 'kalise';
console.log(typeof str);//string
var flag = true;
console.log(typeof flag) ;//boolean
var vari = undefined;
console.log(typeof vari);//undefined
var timer = null;
console.log(typeof timer);//object
</script>
prompt 取过来的值是 字符型的
<script>
var age = prompt('请输入你的年龄:');
console.log(typeof age);//string
</script>
还可以通过浏览器的控制台输出结果判断数据类型：
圆珠笔色的是num；黑色的是字符型；墨水蓝色的是布尔型；undefined和null是浅灰色的；
数据类型转换
数字 + ‘字符串’ = ‘字符串’；
数字 - ‘字符串’ = 数字；
数字 * ‘字符串’ = 数字；
数字 / ‘字符串’ = 数字；
转换为字符串
1.toString(); 2.String()强制转换; 3.+‘字符串’
<script>
var num = 10;
console.log(num.toString());
console.log(String(num));
console.log(num+'');
console.log(num);
</script>
转换为数字型
1.parseInt()和parseFloat() 2.Number(); 3.隐式转换
<script>
//parseInt(变量)只能得到整数；parseFloat(变量)可以得到浮点型
console.log(parseInt('3.14'));//3 (数字型)
console.log(parseInt('120px'));//120 会去掉单位px
console.log(parseInt('rem120'));//NaN 开头便是字符，不能转换
console.log(parseFloat('3.14'));//3.14 (数字型)
console.log(parseFloat('120px'));//120 同上
console.log(parseFloat('rem120'));//NaN 同上
//Number(变量)
console.log(Number('123'));
//运用-*/隐式转换(不能+)
console.log('123'-0);
</script>
做两个简单的案例：计算年龄 和 简单加法器
计算年龄：
<script>
var year = prompt('请输入你的年龄：');
var age = 2022 - year;
alert('你今年'+ age +'岁了');
</script>
简单加法器：
<script>
var sum = 0;
var num = prompt('请输入加数：（直接回车结束计算）');
while(num != ''){
num = num - 0;
if(isNaN(num)){
alert('请正确输入！')
}
else{
sum=num+sum;
}
num = prompt('请输入加数：（直接回车结束计算）');
}
alert("计算结果是:" + sum ) ;
</script>
转换为布尔型
Boolean()函数
1.空字符（’’）,0,NaN,null,undefined 会转化为false;
2.其他都会转化为true
拓展阅读：
解释型语言：比如js，通过解释器直接执行
编译型语言：比如Java，通过编译器生成中间代码文件，然后执行
标识（zhi）符：
关键字：
保留字：
课后作业：
依次询问并获取用户的姓名、年龄、性别，并打印用户信息：
<script>
var stu = {
name : prompt('请输入你的姓名：'),
age : prompt('请输入你的年龄：'),
sex : prompt('请输入你的性别：')
};
alert('你的姓名是'+stu.name+'\n你的年龄是'+stu.age+'岁\n'+'你的性别是'+stu.sex);
</script>
运算符
1.算数运算符：+，-，*，/ 以及：（假设y=5）
| 运算符 | 例子 | x运算结果 | y运算结果 |
|---|---|---|---|
| % | x = y%2 | 1 | y=5 |
| ++ | x = y++ +1 | 6 | 6 |
| x = ++y +1 | 7 | 6 | |
| -- | x = y-- +1 | 6 | 4 |
| x = --y +1 | 5 | 4 |
| 运算符 | 例子 | 等同于 | 运算结果 |
|---|---|---|---|
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=0 |
3.比较运算符：==，!=，>，<，>=，<= 以及：（假设x=5）
| 运算符 | 描述 | 比较 | 返回值 |
|---|---|---|---|
| === | 绝对等于（值和类型均相等） | x==="5" | false |
| x===5 | ture | ||
| !== | 不绝对等于（值和类型有一个不相等，或两个都不相等） | x!=="5" | ture |
| x!==5 | false |
4.逻辑运算符：&&，||，!
| 优先级 | 运算符 | 顺序 |
|---|---|---|
| 1 | 小括号 | ( ) |
| 2 | 一元运算符 | ++ ， – ， ! |
| 3 | 算法运算符 | 先 * ， /， % 后 + ， - |
| 4 | 关系运算符 | > , >= , < , <= |
| 5 | 相等运算符 | == , != , === , !== |
| 6 | 逻辑运算符 | 先&&后|| |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | , |
浮点数在算数运算中会有问题，我们不能直接拿着浮点数来进行比较是否相等，如下：
<script>
console.log(0.1 + 0.2);//0.30000000000000004
console.log(0.07*100);//7.000000000000001
var num = 0.1 + 0.2;
console.log(num==0.3);//false
</script>
