1. 初识JS
JS的组成
JS 初体验
JS 有3种书写位置,分别为行内、内嵌和外部
1. 行内式 JS
<input type="button" value="点我试试" onclick="alert('Hello World')" />
效果图:
- 可以将单行或少量JS代码写在HTML标签的时间属性中(以on开头的属性),如:onclick
- 注意单双引号的使用:在HTML中我们推荐使用双引号,JS中我们推荐使用单引号
- 可读性差,在HTML中编写大量JS代码时,不方便阅读
- 引号易错,引号多层嵌套匹配时,非常容易弄混
- 特殊情况下使用
2. 内嵌JS
<script>
alert('Hello World!');
</script>
- 可以将多行JS代码写到
<script>
标签中 - 内嵌JS是学习时常用的方式
3. 外部JS文件
<script src="my.js"></script>
- 利于THTML页面代码结构化,把大段JS代码独立到HTML页面之外,既美观,也方便文件级别的复用
- 引用外部JS文件的script标签中间不可以写代码
- 适用于JS代码量比较大的情况
2. JS 注释
- 单行注释 // ctrl+/
- 多行注释 /* */ shift+ctrl+/
3. JS输入输出语句
```javascript
<script>
// 这是一个输入框
prompt("请输入您的年龄");
// alert 弹出警示框 输出的 展示给用户的
alert("计算的结果是");
// console 控制台输出 给程序员测试用的
console.log("我是程序员能看到的");
</script>
效果图:
4. 变量
本质:变量是程序在内存中申请的一块用来存放数据的空间
类似我们酒店的房间,一个房间就可以看作是一个变量
变量的使用
- 声明变量
- 赋值
1. 声明变量
// 声明变量
var age; //声明一个名称为age的变量
- var是一个JS关键字,用来声明变量(variable变量的意思)。使用该关键字声明变量后,计算机会自动为变量分配内存空间,不需要程序员管
- age是程序员定义的变量名,我们要通过 变量名来访问内存中分配的空间
2. 赋值
age = 10; //给age这个变量赋值为10
- = 用来把右边的值赋给左边的变量空间中 此处代表赋值的意思
- 变量值是程序员保存到变量空间里的值
变量语法拓展
1. 更新变量
一个变量被重新赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准
2. 同时声明多个变量
同时声明多个变量时,只需要写一个var,多个变量名之间使用英文逗号隔开
var age=10,name='zs',sex=2;
3. 声明变量的特殊情况
4. 变量命名规范
- 由字母、数字、下划线、美元符号组成
- 严格区分大小写
- 不能以数字开头
- 不能是关键字、保留字
- 变量名必须有意义
- 遵循驼峰命名法 首字母小写,后面单词的首字母需要大写 例如:myFirstName
- 推荐翻译网站:有道 爱词霸
5. 数据类型
JS的变量数据类型是只有程序在运行过程中,根据等号右边的值来确定的
JS拥有动态类型,意味着相同的变量可用作 不同的类型
var x=6; //x为数字
var x="Bill"; //x为字符串
数据类型的分类
- 简单数据类型(Number,String,Boolean,Undefined,Null)
- 复杂数据类型(object)
1.数字型(Number)
(1)在JS中,八进制前加 0,十六进制前加 0x
(2)JS中数值的最大和最小值
alert(Number.MAX_VALUE); //最大值
alert(Number.MIN_VALUE); //最小值
(3)数字型的三个特殊值
alert(Infinity);
alert(-Infinity);
alert(NaN);
- Infinity 代表无穷大,大于任何数值
- -Infinity 代表无穷小,小于任何数值
- NaN Not a number,代表一个非数值
(4)is NaN()
is NaN() 这个方法用来判断非数字 并且返回一个值 如果是数字返回的是false
如果不是数字,返回的是true
2 字符串型 String
字符串型可以是引号中的任意文本,其语法为双引号“”和单引号‘’
- 字符串引号嵌套 (外双内单,外单内双)
- 字符串转义符
3. 字符串长度
字符串是由若干字符组成的,这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度
var strMsg="我是王鹤棣老婆!";
alert(strMsg.length);//显示8
4.字符串拼接
- 多个字符串之间可以使用+进行拼接,其拼接方式为字符串+任何类型=拼接之后的新字符串
- 拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新字符串
//1 字符串"相加"
alert('hello'+''+'world'); // hello world
//2 数值字符串"相加"
alert('100'+'100'); //100100
//3.数值字符串+数值
alert('11'+12); //1112
+号拼接口诀:数值相加,字符相连
- 我们经常会将字符串和变量来拼接,因为变量可以很方便地修改里面的值
- 变量是不能添加引号的,因为加引号的变量会变成字符串
- 如果变量两侧都有字符串拼接,口诀“引引加加”删掉数字,变量写中间
5. 布尔型 Boolean
布尔型有两个值:true和false,其中true表示真,false表示假
布尔型和数字型相加时,true的值为1,false的值为0
console.log(true+1); //2
console.log(false+1); //1
6. Undefined 和 Null
一个声明后没有被赋值的变量会有一个默认值undefined(如果进行相连或者相加时,注意结果)
var variable;
console.log(variable); //undefined
console.log('你好'+variable); //你好undefined
console.log(11+variable); //NaN
console.log(true+variable); //NaN
一个声明变量给null值,里面存的值为空
var vari=null;
console.log('你好‘+vari); //你好null
console.log(11+vari); //11
console.log(true+vari); //1
获取变量数据类型
1. 获取检测变量的数据类型
typeof
2. 字面量
字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值
- 数字字面量:8,9,10
- 字符串字面量:’王鹤棣‘,“虞书欣”
- 布尔字面量:true,false
数据类型转换
使用表单、prompt获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型
1. 转换为字符串
//第一种:变量.toString()
2. 转换为数字型
- 注意parseInt和parseFloat单词的大小写,这两个是重点
- 隐式转换是我们在进行算数运算的时候,JS自动转换了数据类型
console.log(parseInt('3.14')); //3 取整
console.log(parseInt('3.94')); //3 取整
console.log(parseInt('120px')); //120 会去掉这个px单位
console.log(parseInt('rem120px')); // NaN
console.log(parseFloat('3.14')); //3.14
console.log(parseFloat('120px')); //120 会去掉这个px单位
console.log(parseFloat('rem120px')); // NaN
3. 转换为布尔型
- 代表空、否定的值会被转换为false
- 其他值都会被转换为true
console.log(Boolean('')); //false
console.log(Boolean(0)); //false
console.log(Boolean(NaN)); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean('小白')); //true
console.log(Boolean(12)); //true
6. 标识符、关键字、保留字
1.标识符
指开发人员为变量、属性、函数、参数取的名字
标识符不能是关键字或保留字
2. 关键字
是指JS本身已经使用了的字,不能再用它们充当变量名、方法名
包括:break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、void、while、with等等
3.保留字
实际上就是预留的关键字
7. 运算符
1. 算数运算符
浮点数的精度问题
浮点数值的最高精度是17位小数,但是在进行算术计算时其精确度远远不如整数
var result = 0.1+0.2; //结果为0.30000000000000004
console.log(0.07*100); //7.000000000000001
不要直接判断两个浮点数是否相等
表达式和返回值
表达式:数字、运算符、变量等组成的式子
表达式最终都会有一个结果,返回给我们,我们称为返回值
2. 递增和递减运算符
前置递增运算符
++sum 先自加1,后返回值
后置递增运算符
sum++ 先返回原值,后自加1
3. 赋值运算符
4. 逻辑运算符
5. 比较运算符
8. 数组
概念:数组是一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的方式
语法:
- new关键字创建数组 -> var 数组名=new Array ();
var arr = new Array();
- 利用数组字面量创建数组 -> var 数组名= [1,2,3,4,5]
var arr[] = [1,2,3,4,5];
9. 函数
概念:封装了一段可被重复调用执行的代码块,通过此代码块可以实现大量代码的重复使用
1. 函数的使用
先声明,后调用
声明
- 自定义函数方式(命名函数) function fn() { …}
- 函数表达式方法(匿名函数) var fn =function() {…}
调用
fn ();
示例:
//声明函数
function getSum(){
var sumNum=0;
for(var i=1;i<=100;i++){
sumNum+=1; }
alert(sumNum);
}
//调用函数
getSum();
2. 形参和实参
- 声明函数时,函数名称后面的小括号中添加一些参数
- 调用该函数时,同样也需要传递相应的参数,这些参数被称为实参
- 在JS中,形参默认值是undefined
3. break、continue、return
break:结束当前的循环体(如for、while)
continue:跳出本次循环,继续执行下次循环(如for、while)
return:不仅可以退出循环,还能够返回return语句中的值,同时还可以结束当前的函数体内的代码
4. arguments
概念:当我们不确定有多少个参数传递的时候,可以用arguments来获取,在JS中,arguments实际上它是当前函数的一个内置对象,所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有实参
arguments展示形式是一个伪数组,因此可以遍历,伪数组具有以下特点:
- 具有length属性
- 按索引方式储存数据
- 不具有数组的push、pop等方法
示例:
//利用函数求任意个数的最大值
function maxValue(){
var max=arguments[0];
for(var i=0;i<arguments.length;i++)
if(max<arguments[i]){
maax=arguments[i];}
}
return max;
}
console.log(maxValue(2,4,5,9));
console.log(maxValue(12,4,9));
10. 对象
概念:对象是由属性和方法组成的。在JS中,几乎所有的事物都是对象
- 属性:事物的特征,在对象中用属性来表示(常用名词)
- 方法:事物的行为,在对象中用方法来表示(常用动词)
创建对象的三种方式
1.利用字面量创建对象
var star={
name='xby',
age:19,
sex='女’,
sayHi:function(){
alert('大家好');
}
};
2.利用new Object 创建对象
var andy= new Object();
andy.ame='xby';
andy.age:19;
andy.sex='女’,
andy.sayHi:function(){
alert('大家好');
}
3. 利用构造函数创建对象
function Person(name,age,sex){
this.name=name;
this.age=age;
this sex=sex;
this.sayHi = function () {
alert('我的名字叫:',+ this.name+',年齡:',+ this.age+',性别:'+ this.sex);
}
}
var bigbai =new Person('大白',100,'男'):
对象的调用
console. log(star.name) ;
console. log (star [ 'name ']) ;
star.sayHi ();
- 对象里面的属性调用:对象.属性名,这个小点. 就理解为“的”
- 对象里面属性的另一种调用方式:对象[‘属性名’],注意方括号里面的属性必须加引1号,我们后面会用
- 对象里面的方法调用:对象,方法名() ,注意这个方法名字后面一定加括号
new关键字
new在执行时会做四件事情:
- 在内存中创建一个新的空对象
- 让this 指向这个新对象
- 执行构造函数里面的代码,给这个信息对象添加属性和方法
- 返回这个新对象(所以构造函数里面不需要return)
内置对象
Javascript中的对象分为3种:自定义对象、内置对象、浏览器对象。
前面两种对象是Js基础内容,厲于ECMAScript;第三个浏览器对象属于我们JS独有的,我们JS AP1讲解
- 内置对象就是指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)
- 内置对象最大的优点就是帮助我们快速开发。Javascript 提供了多个内置对象:Math、Date、String、Array等
小结
通过这节课的学习,最大的收获是了解到了数组和字符串的一些应用方法
改变原数组:
- push() 末尾添加元素
- pop() 删除最后一个元素,返回该元素值
- shift() 删除第一个元素,返回该元素值
- unshift() 在数组头部添加元素。返回该数组长度
- sort() 在数组头部添加元素,返回该数组长度
- reverse() 数组中元素位置颠倒,返回该数组
- splice(start,deleteCount?,item1?) 通过删除或替换现有元素或原地添加新元素来修改数组,并以数组形式
返回被修改内容(没有删除则返回空数组)
不改变原数组:
- slice (begin?,end?)返回一个新的数组对象,这一对象是一个由begin和end决定的原数组的浅拷贝(包括begin不包括end)
- concat () 合并两个或多个数组,不改变现有数组 但返回新数组
- join () 将一个数组(or类数组对象) 的所有元素连接成一个字符串,返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符(默认使用,分隔,如果使用“”则所有元素之间都没有任何字符)
字符串
- charAt ()方法可返回宇符串中指定位置的字符
- concat () 方法用于两个or多个字符串
- indexOf ()方法可返回某个指定字符串值在字符串中首次出现位置
- includes()方法用于判断字符串是否包含指定的子字符串
- match() 方法可在字符串中检索指定的值,或找到一个或多个正则表达式的匹配,返回数组
- repeat () 方法看字符串复制的指定次数
- replace () 方法用于在字符串中用一些字符替换另一些宇符。或替换一个正则表达式匹配的子串
- replaceAll () 方法替换所有
9.search ()方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。返回与指定查找的字符串或者正则表达式相匹配的String 对象起始位置 - slice (start, end)方法提取字符串的某个部分,并以新的字符串返回被提取部分
- substring()方法提取字符串中介于两个指定下
标之间的字符 - split()方法把一个字符串分割成字符串数组
- trim()方法用于删除宇符串的头尾空白符。空白符包括:空格、制表符 tab、换行符等其他空白符