JavaScript的基础学习开端

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>