1.初识js
1.1javaScript的特点:
JavaScript具有简单易用,可以跨平台,支持面向对象的特点·。
JavaScript是弱语言数据类型,只有我们赋值了才知道是什么数据类型。
在网页中,许多常见的交互效果都可以用JavaScript来实现,例如轮播图,选项卡,地图,表单验证等。
- 轮播图:通过JavaScript实现每隔一段时间自动切换图片的效果。
- 选项卡:通过JavaScript实现选项卡的切换效果。
- 地图:通过JavaScript实现地图的放大,缩小,滚动等效果。
- 表单验证:用户填写表单时,通过JavaScript检查用户填写的格式是否正确,如果格式有误,则提示用户更正。
1.2JavaScript初体验:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
alert('hello, javascript')
</script>
</body>
</html>
1.3JavaScript书写位置:
1.3.1、内部引入
定义script标签,标签体内容就是js代码
<script>
//js代码
</script>
<script>标签可以写在任意位置,推荐写在<body>的尾部。浏览器在执行时,是从下往下依次执行!
1.3.2、外部引入
<script src="js/文件名.js"></script>
1、script标签不能自闭合。
2、如果script标签使用src属性,那么浏览器将不会解析此标签体的js代码。
总结(1):
<body>
<!-- 行内式-->
<button onclick="window.alert('开学季')">请点我</button>
<!-- 嵌入式 -->
<script>window.alert('内联样式')</script>
<!-- 外链式 -->
<script src="./04-引入.js"></script>
async:异步加载
defer:延后执行
添加async或者defer属性后,即使文件下载失败,也不会阻塞后面的JavaScript文件
</body>
2.JavaScript基本语法
2.1JS输出数据的三种方式
2.1.1、浏览器弹窗
<script>
alert('浏览器弹框输出字符');
</script>
2.1.2、输出HTML页面
<script>
document.write('输出html内容到页面');
</script>
2.1.3、控制台输出
<script>
console.log('控制台输出');
</script>
<script>
//输出语句
// 用于在浏览器中弹出警告窗
alert("Hello, world!")
// 控制台输出语句
console.log("未满18岁不得进入");
// 输出语句
document.write("<h1>Hello, world!</h1>")
// 弹出输入框,并等待用户输入,用户输入的内容会以字符串的形式返回到输入框中
prompt("请输入你的名字:", "默认值")
</script>
2.2js输入语句及确认语句
// 弹出输入框,并等待用户输入,用户输入的内容会以字符串的形式返回到输入框中
prompt("请输入你的名字:", "默认值")
confirm("请确认你的数据是否满足条件")
// 弹出确认框,用户点击确认返回true,点击取消返回false
2.2.2输入输出练习小案例---总结(2):
<script>
// 笔记
// 【输出语句】
// alert() 弹出警告框
// console.log() 控制台输出
// document.write() 直接将内容写入页面的内容流
// 【输入语句】
// prompt() 弹出输入框,需要用户输入,返回用户输入的值
// confirm() 弹出确认框,用户点击确认返回true,点击取消返回false
prompt("请输入你的年龄")
confirm("你是否满24岁了吗?")
alert("未满24岁禁止使用本网站")
document.write("404错误")
console.log("Not Found")
</script>
2.3变量的声明与赋值:
<script>
// 先声明后赋值
// 声明变量
var boy ;
var girl;
// 后赋值
boy=1;
girl=2;
console.log(boy);
console.log(girl);
// 同时声明且赋值
var myAge = 18;
var myName = anger;
</script>
2.4const let var 区别
(1)初始化要求不同,
使用var和let声明变量时可以先不初始化,而使用const声明变量时必须初始化。
(2)重复声明不同,
使用var和let声明的变量可以多次被修改,其值只与最近一次赋值一致,而使用const声明的变量,在整个运行过程中不能修改初值.
(3)对块级作用域的支持不同。
(使用一对花括号括起来的代码称为一个代码块所谓块级作用域,
就是指变量起作用的范围是当前代码块,离开当前代码块,变量就失效了。
使用var声明的变量支持全局作用域,使用let和const声明的变量支持块级作用域。)
const声明常量,let与var声明变量
<script>
// let和var声明的变量都可以改变
// const声明的变量不能改变,即常量
// const也不能进行先声明再赋值
// let不允许在一个代码块里有变量和他取一样的名字,但是允许修改一个变量值。
// 一个花括号{}就是一个代码块
// 错误写法:
// const a =6;
// a = 7;
// console.log(a)
// 正确写法:
const a = 3.14;
console.log(a);
// const不能进行反复的声明
// 我们无法改变3.14这个值
let girlfriend = "张元英"
girlfriend = "林允儿"
console.log(girlfriend)
{ let girlfriend = xxx }
</script>
2.5基本数据类型
2.6隐式转换
2.6.1、什么是隐式转换
所谓隐式转换,就是我们在写代码时看不见,但是JavaScript解释器会自动帮我们转换的操作
隐式转换的本质是通过ToPrimitive将值转化为原始值,主要涉及到三种转换:
1.将值转为原始值 ToPrimitive()
2.将值转为数字 ToNumber()
3.将值转为字符串 ToString()
2.6.2、基本类型的隐式转换
1. +号
①数字+字符串 =>字符串
console.log(1+2+'3'); //'33'
//拓展其他数据类型
console.log(true + '6'); //'true6'
console.log(false + '6'); //'false6'
console.log(null + '6'); //'null6'
console.log(undefined + '6'); //'undefind6'
②数字加数字 =>数字
console.log(1+2+3); //6
//拓展其他数据类型
console.log(true + 6); //7
console.log(false + 6); //6
console.log(null + 6); //6
console.log(undefined + 6); //NaN
2. -号
(*、/、<、>)与-号同样方式转化
①数字-字符串 =>数字
console.log(10 - '20');//-10
console.log(10*'20'); //200
console.log('20'/'10'); //2
②数字-非数字字符串 =>NaN
console.log(10 - 'one' ); //NaN
console.log(10 - '100a'); //NaN
console.log('20'/'one'); //NaN
3. 有关==的隐式转换
双等符号的隐式转换很简单,只要记住,不管是什么基本类型的数据,都会转化成数字类型比较,话不多说,看代码
onsole.log('0' == 0); //true 字符串转数字
console.log(0 == false); //true 布尔转数字
console.log('0' == false); //true 两者转数字
// undefined和null比较特殊
console.log(undefined == null); //true
4. 引用类型的隐式转换
引用类型的隐式转换有些复杂,但是大致思路就是先将引用类型转化为基本类型,然后再按照基本类型的方式转化,那么,我们该怎么让引用类型转化为基本类型呢?
其实,在JavaScript中,引用数据类型的隐式转化遵循PreferredType转换策略,分为以下两种情况:
1.如果PreferredType被标记为Number
①如果输入的值已经是一个原始值,则直接返回它
②如果输入的值是一个对象,则调用该对象的valueOf()方法, 如果valueOf()方法的返回值是一个原始值,则返回这个原始值
③调用这个对象的toString()方法,如果toString()方法返回的是一个原始值,则返回这个原始值。
④否则,抛出TypeError异常
2.如果PreferredType被标记为String
①如果输入的值已经是一个原始值,则直接返回它
②如果输入的值是一个对象,则调用该对象的toString()方法, 如果toString()方法的返回值是一个原始值,则返回这个原始值
③调用这个对象的valueOf()方法,如果valueOf()方法返回的是一个原始值,则返回这个原始值。
④否则,抛出TypeError异常
注意:PreferredType的值的设置规则
1、该对象为Date类型,则PreferredType被设置为String
2、否则,PreferredType被设置为Number
来看几个特殊的例子:
// 引用数据类型的隐式转换
console.log([] + []); 结果为 "" + "" = ""
// 1.确定 [] PreferredType 为 number
// 2.确定 [] 不是原始值
// 3.调用 valueOf 方法
console.log([].valueOf(),typeof [].valueOf());
// 4.调用 toString 方法
console.log([].valueOf().toString(),typeof [].valueOf().toString());
// 5.最终 [] 隐式转换 => '' 空的字符串
console.log([] + {}); 结果为 "" + "[object Object]" = "[object Object]"
// 1.确定 {} PreferredType 为 number
// 2.确定 {} 不是原始值
// 3.调用 valueOf 方法
console.log({}.valueOf(),typeof {}.valueOf());
// 4.调用 toString 方法
console.log({}.valueOf().toString(),typeof {}.valueOf().toString());
// 5.最终 {} 隐式转换 => "[object Object]"
{} + [] 隐式转换结果为0
// {} + [] => {}; +[]
// js会将{};看成代码块略过,所以就只剩 +[]
// +[] => +"" => +false => +0 => 0
// 但是{} + []在终端的打印结果是[object Object] 是string类型
// 在浏览器控制台又输出 0
console.log({} + [],typeof ({} + []));
// {} + {} 隐式转换结果为"[object Object][object Object]"
console.log({} + {});
总结:我本人认为JavaScript的基本类型的隐式转换在日常实际练习或者项目开发中比较有用,而引用类型的隐式转换在日常的代码中几乎不会遇见,除非一些特殊的项目开发过程中会使用到,所以,我建议大家在学习JavaScript隐式转换的时候,将重点放在基本类型上,引用类型的隐式转换只需记忆PreferredType转换策略和几个特殊案例即可
2.7强制类型转换
强制类型转换
强制类型转换指将一个数据类型强制转换为其它的数据类型。一般是指,将其它的数据类型转换为String、Number、Boolean。
2.7.1、转换为String类型
将其它数值转换为字符串有三种方式:toString()、String()、 拼串。
方式一:调用被转换数据类型的toString()方法,该方法不会影响到原变量,它会将转换的结果返回,但是注意:null和undefined这两个值没有toString()方法,如果调用它们的方法,会报错。
var a = 123;
a = a.toString();
console.log(a);
console.log(typeof a);
方式二:调用String()函数,并将被转换的数据作为参数传递给函数,使用String()函数做强制类型转换时,对于Number和Boolean实际上就是调用的toString()方法,但是对于null和undefined,就不会调用toString()方法,它会将 null 直接转换为 “null”,将 undefined 直接转换为 “undefined”。
var a = 123;
a = String(a);
console.log(a);
console.log(typeof a);
var b = undefined;
b = String(b);
console.log(b);
console.log(typeof b);
var c = null;
c = String(c);
console.log(c);
console.log(typeof c);
方式三:为任意的数据类型 +""
var a = 123;
a = a + "";
console.log(a);
console.log(typeof a);
2.4.2、转换为Number类型
有三个函数可以把非数值转换为数值:Number()、parseInt() 和parseFloat()。Number()可以用来转换任意类型的数据,而后两者只能用于转换字符串。parseInt()只会将字符串转换为整数,而parseFloat()可以将字符串转换为浮点数。
方式一:使用Number()函数
字符串 --> 数字
如果是纯数字的字符串,则直接将其转换为数字
如果字符串中有非数字的内容,则转换为NaN
如果字符串是一个空串或者是一个全是空格的字符串,则转换为0
布尔 --> 数字
true 转成 1
false 转成 0
null --> 数字
null 转成 0
undefined --> 数字
undefined 转成 NaN
方式二:这种方式专门用来对付字符串,parseInt() 把一个字符串转换为一个整数
var a = "123";
a = parseInt(a);
console.log(a);
console.log(typeof a);
方式三:这种方式专门用来对付字符串,parseFloat() 把一个字符串转换为一个浮点数
var a = "123.456";
a = parseFloat(a);
console.log(a);
console.log(typeof a);var a = "123.456";
a = parseFloat(a);
console.log(a);
console.log(typeof a);
注意:如果对非String使用parseInt()或parseFloat(),它会先将其转换为String然后在操作
2.4.3、转换为Boolean类型
将其它的数据类型转换为Boolean,只能使用Boolean()函数。
使用Boolean()函数
数字 —> 布尔
除了0和NaN,其余的都是true
字符串 —> 布尔
除了空串,其余的都是true
null和undefined都会转换为false
对象也会转换为true
2.5、运算符
运算符也叫操作符,通过运算符可以对一个或多个值进行运算并获取运算结果。
比如:typeof就是运算符,可以来获得一个值的类型,它会将该值的类型以字符串的形式返回(number string boolean undefined object)
2.8流程控制语句
if else语句
<script>
let grades =prompt("请输入你的成绩")
if(grades>=100){
alert("拿奖学金")
}else if(grades>=80 && grades<=90){
alert("成绩优秀")
}else if(grades>=60 && grades<80){
alert("成绩合格")
}else if(grades>=40 && grades<60){
alert("有补考机会")
}else if(grades>=20 && grades<40){
alert("挂科")
}else{
alert("没别的了")
}
</script>