01.js新体验
外部js引入
可以提高复用性
适用于js代码量比较大的情况下
行内引入
注意:内容为文字的时候必须带上英文引号
行内必须双引号和单引号一起使用
将少量的js代码写在html标签的事件属性中(以on开头)
注意单双引号的使用,在html里面我们推荐使用双引号,但是全部使用双引号会报错
(需要单双引号一起使用)、
在html里面写了大量的js代码时,不方便阅读,所以尽量不要写在html标签里面(除了事件属性
等特殊属性)
提交
内嵌式
可以把大量的js代码写在script标签中,也是我们常用的
内嵌式最好不要写在html标签中间,要写在body结束标签前
script里面不允许写html标签
02.js输入输出语句
// js里输入结果是数字时可以不带引号,文字与字母必须带引号 /* // alert 浏览器弹出警示框 alert('你好') // console.log 浏览器控制台打印输出信息 console.log('报错了') // prompt 浏览器弹出的输入框,用户可以输入 prompt('请填写你的年龄') */ // write 让浏览器在页面中输入内容
03.变量
// 变量概念:变量就是用于存储数据的容器,我们可以通过 变量名 获取数据,也可以修改数据 // 本质:就是变量是程序在内存中申请的一块用来存储数据的空间
/*
// var 来声明变量,js关键词,在使用变量时必须先声明变量名才可以使用 milk = 49.9
// age就是变量名,它就是变量 var age = 18 初始化变量 var username = '李四'
*/
// js 代码结束时需要 ; 结尾 // 变量只声明不赋值时,会出现undefined
var age = 18 初始化变量
更新变量 age=18
age=20
console.log(age);
1.变量
// 变量概念:变量就是用于存储数据的容器,我们可以通过 变量名 获取数据,也可以修改数据
// 本质:就是变量是程序在内存中申请的一块用来存储数据的空间
/* // var 来声明变量,js关键词,在使用变量时必须先声明变量名才可以使用
milk = 49.9
// age就是变量名,它就是变量
var age = 18 //初始化变量
var username = '李四' */
// js 代码结束时需要 ; 结尾
/* // 变量只声明不赋值时,会出现undefined
var age;
console.log(age); */
/* //同时声明多个变量
var age = 18, username = '李四', email = '2506794189@qq.com';
console.log(age,email,username); */
// 1、只声明不赋值时,打印的结果时undefined
var age;//只声明
console.log(age);//undefined
/* // 2、不声明,不赋值,直接使用时会报错
console.log(age); */
/* // 3、不声明,只赋值时,可以使用,但不建议
age = 18;
console.log(age); */
2.变量命名规范
//命名规范
// 由字母(大小写) 数字(0-9) 特殊符号(—¥) 例如:age username user_name
// 同样的变量名,大小写不一样,代表不同的变量username,userName是两个不同的变量
// 不能使用关键字
// 变量名不能以数字开头
// 遵循驼峰命名,首字母小写,后面单词首字母全部要大写
// 关键字:在js已经使用过的字,不能在当做变量名使用
// if else for this with typeof in throw try do catch do finally break
// 保留字:预留的关键词,目前还没有开始使用
// 基本数据类型 class const export log float input
3字面量
// 字面量:定义就已经知道是什么数据
var age = 18;//18是数字类型,控制台打印蓝色 Number var Age = '20';//字符串类型 控制台打印黑色 String var arr = [];//[]是数组 Array var obj = {};//{}是对象类型 Object
4.数据类型
1.数字类型
<script> // 数据类型 // 数据类型分为:简单数据类型,复杂数据类型(引用数据类型) /* 简单数据类型 1 Number 数字型 可以为整数,可以为小数 2 数字型的进制 八进制 0-7 进制里面的数(三个以上)只能0-7表示 */ // Infinity 无穷大 -Infinity 无穷小 /* 判断是否为数字类型的 isNaN isNaN返回值为false true false代表是数字型 true代表不是数字型 */ var age = 18; var uname = '李四'; console.log(isNaN(age)); //false age不是一个非数字类型 console.log(isNaN(uname)); //true uname是一个非数字类型 </script>
2.字符串
// 字符串:字符串需要用引号,引号里面可以是任意文本,js中,一般使用'' /* html里面一般用双引号 只要是引号里面的东西都可以编译出来 注意:在js中如果字符串不加引号,浏览器会解析成js代码(也可以理解为是一个变量) 其实不是变量,所以会报错 */ // 字符串的转义符 \n 换行 // 字符串的拼接 使用+拼接 console.log('你的名字' + '毁灭之主'); // 数字之间连接时会加上 字符串与数字连接时只是连接在一起
3.布尔值
// 布尔值 boolean 有两个值 true是真 false是假 // true是1 false是0 var bool=true; var bools=false; console.log(bool) console.log(bool+1)
4.undefined和null
<script> // 声明变量后没给变量赋值,未定义 /* // null 就是占位符,不知道此时这个数据是什么类型,就会先复制为null(空) 底层原理就是一个空对象 */ </script>
5.数据类型转换
// parseInt 把数值保留为整数
var num1=18;
var num2=155.25;
console.log(parseInt(num1));
console.log(parseInt(num2));
// parseFloat 保留数值的浮点数(小数)
var num3=15.9897489;
console.log(parseFloat(num3))
// parseInt 可以把字符串型的数字转换为数字类型 // 前提开头必须是数字,否则会是NaN
6判断数据类型
<script> // 判断数据类型 typeof
var num=123;
var str='李四';
var flag=true;
var obj=null;
var age;
console.log(typeof num);
console.log(typeof str);
console.log(typeof flag);
console.log(typeof obj);
console.log(typeof age)
</script>
7.数据类型转换
1.转换成字符串类型
<script> // 转换为字符串类型
// 变量.toString() 转换为字符串 返回的是一个新的值,没有改变原来的值 // 可以把数值型转化为字符串
// 可以把布尔值转化为字符串
// 不能转换undefined null
var num = 123;
var str = '李四';
var flag = true;
var obj = null;
var age;
console.log(num.toString());
console.log(str.toString());
console.log(flag.toString());
var str1= num.toString();
console.log(typeof str1)
/* String() 函数 转换为字符串 返回的是一个新的值,没有改变原来的值 可以把数值型转化为字符串 可以把布尔值转化为字符串 能转换undefined null */
console.log(String(num))
console.log(typeof (String(undefined)))
</script>
2.显/隐式转换
<script> // 隐式转换 /* console.log('1234' + 123)//1234123 console.log(12 + 12)//24 console.log(12 + true)//true是数值型的1 13 console.log(12 + 'true')//12true - 后端返回的数据不知道是字符串还是数值型的时候,基本会使用-转换为数值型 console.log('1234' - 123)//1111 console.log(12 - 12)//0 console.log(12 - true)//true是数值型的1 11 console.log(12 - 'true')//NaN */ //显式转换 强制性转换 /* 字符串可以转换为数值型 布尔值转换时是1 0 undefined转换时是NaN null和空字符串会转换为0 */ var str = '123'; var flag = true; var un=undefined; var obj = null; var str1=""; console.log(Number(str)) console.log(Number(flag)) console.log(Number(un)) console.log(Number(obj)) console.log(Number(str1)) </script>
3.布尔值转换
<script> // 布尔值 Boolean() false true // 空字符、undefined、null等空的值返回false console.log(Boolean(true)) console.log(Boolean("")) console.log(Boolean(1222)) console.log(Boolean(undefined)) </script>
8.判断字符串的长度
<script> // 字符串是由若干个字符组成的,字符总的数量就是字符串的长度,想要获取字符串的长度 // 打印的结果是数字 字符串的长度包括所有字符(只要在引号内都是字符) var str = '1245634' console.log(str.length) var str1 = '12 34' console.log(str1.length) </script>