为什么要学习JavaScript?
js是用来实现用户交互的
有了node.js可以实现数据交互
JavaScript是 web 开发人员必须学习的 3 门语言中的一门:
1.HTML定义了网页的内容
2.css描述了网页的布局
3.JavaScript控制了网页的行为
JS的基本概念
JavaScript是弱类型的语言。
1.引用js的方式:
● 将js代码编写到外部js文件中,然后通过link标签引用
如:<link rel="stylesheet" href="css/index.css">
●使用<script></script>
标签嵌入网页,一般放在body标签内部的底部,也可放在
head内部,放在头部需要加window.οnlοad=function(){编写的js语句},这个方法是
页面加载完毕以后再执行js语句。注意:window.onload只能执行一次
●直接作为某个标签的事件代码,如: <button οnclick="del()">按钮 </button>
2.变量和常量
●常量:一些不可改变的值,字面量可以直接使用。如1,2,3等
●变量:即对"值"的引用,使用变量等同于引用某个值,变量的值是可以任意改变的。
●声明:var作用于全局;
let写在区块内,作用于局部(es6新增加的);
const声明一个常量(标识符为大写,赋值后就不能被改变)(es6新增的)
3.标识符的命名规则
标识符:在js 中所有的可以由我们自主命名的都可以称为是标识符,
如:变量名、函数名、属性名都是属于标识符。
规则:标识符中可以含有字母、数字、下划线(_)、$;
标识符不能以数字开头;
标识符不能是js中的关键字和保留字,infinity(正无穷),NaN,undefined;
严格区分大小写;
变量名最长为255个字符(实际上可以超过)
4.数据类型
五种基本类型:string(字符串类型 )最明显的就是用引号包裹的;
number(数值类型 )类似于数学中的数字;
boolean (布尔类型)true或false;
null (空值) 空类型检测不到;
underfined 未定义或者未赋值的变量
三种引入型:object (对象)、 array (数组) 、function (函数)
常用方法
//判断Number类型常用方法 isIntegert() 判断参数是否为整数 isNaN() 判断是否为NaN(not a number非数值) parseFloat() 把字符串转换为浮点数 parseInt() 把字符串转换为整数 prompt() 可输入弹出框 如:=prompt('请输入内容') //使用typeof(变量)判断来检查一个变量类型 //1.数值、字符串、布尔类型的返回类型分别为number、string、boolean //2.函数,返回类型为function //3.undefined,返回类型为undefined //4.除此之外的返回类型为object。 a="123"; console.log(typeof(a)); //JS预测某个位置应该为布尔值,会将该位置上现有的值自动转化为布尔值除了以下6个值被转换为false, //其他均为true undefined、null、false、0、NaN、""(空字符串)
5. 类型转换
类型转换:指将一个数据类型转换为其他的数据类型
● 数字转换成字符串
方式一:调用被转换数据类型的toString()方法。如:a.toString(),该方法不会影响到 原变量的数据类型,它会将结果返回,注意:null和undefined没有toString方法。
方式二:调用String()函数,并将被转换的数据作为参数传递给函数,使用String() 函数做强制转换时,对于Number和boolean实际上就是调用的toString()方法,但 是对于null和undefined,就不会调用toString()方法,它会将null 直接转换为“null” 如:String(a)
● 字符串转换成数字
方式一:调用number()函数。 如:number(a)
方式二:专门用来转换字符串的,
parseInt( )把一个字符串中有效的整数内容取出来;parseInt(a)
parseFloat( )把一个字符串转换为一个浮点数
注意:它只会把字符串开头是数字的转换,开头不是数字的会返回一个NaN
转换进制:将一个字符串转换成十进制,parseInt(a,10);将一个字符串转换成2、8、16 进 制,parseInt(a,2或8或16)
● 其他数据类型转换为Boolean
调用Boolean(a)函数。
数字—>布尔,除了0和NaN,其余的都是true;
字符串—>布尔,除了空字符串,其余都是true;
null和Undefined都会转换为false; 对象会转换为true
6.JS中进制的表示
● 表示一个16进制的数字,则需要以0x开头。如:0xff 255
● 表示一个8进制的数字,则需要以0开头。如:0123
● 表示一个2进制的数字,则需要以0b开头,但不是所有的浏览器都支持,。如0b101
7.运算符(也称操作符)
● 运算符可以对一个或多个值进行运算,比如:typeof就是运算符,可以获得一个值的类型。
● 任何值和字符串相加都会转换成字符串,再做拼接操作。如:123+“12”=12312
● 任何值和字符串除了(+)会转换成String外,其他(-、*、/)都会自动转成number
● a++的值等于原变量的值(自增前的值);++a的值等于原变量的新值(自增后的值)
. ● 任何值和NaN 做比较都是false,包括它自己本身
算术运算符:加(+),减(-),乘(*),除( /),取余(%),自增(++),自减(--)
逻辑运算符 :与(&&)、或( ||)、 非( !)
关系运算符:大于号(>)、大于等于(>=)、小于号(<)、小于等于(<=)
相等运算符:等于(==)、不等于(!=)、全等于(===)、不全等于(!==)
条件运算符(三元运算符): 语法:表达式?语句1:语句2 。
含义:如果表达式为真,则执行语句1,否则执行语句2
注意:
强制转换:
布尔值和数值进行比较的时候,强制转化为了0和1
隐式转换:
字符串+数值类型=字符串类型
数值类型+布尔类型=数值类型,true转换1 false转换0
布尔类型+字符串类型=字符串类型
8.函数
函数的作用:把重复的代码封装起来,在需要的时候执行
(1)创建一个函数对象。如:var fun=new Function( ) (少用,基本不用)
(2)使用函数声明来创建一个函数对象,
语法:function 函数名([形参1,形参2,……,形参n]){ 语句…. }
(3)使用函数表达式来创建一个函数
语法:var 函数名=function([形参1,形参2,……,形参n]){ 语句…. };
(4)调用函数语法:函数名字(参数 )
如:fun( ) 当调用函数时,函数中封装的代码会按照循序执行
9.数组
数组:用一个变量名存储所有的值,并且可以用变量名访问任何一个值,数组中的每个 元素都有自己的ID,以便它可以很容易地被访问到。
数组的特点:●数组下标从0开始。
● 虽然创建数组时,指定了长度,但实际上数组都是可变长度的,
即使超出指定长度也不会有任何问题。
●数组存储的数据可以是任何类型。
创建数组的方式:
(1)创建数组不指定长度 , 如: var arr=new Array();
(2)创建数组指定长度, 如:arr2=new Array(10);
(3)创建函数时直接赋值, 如:var arr2=new Array ("Saab","Volvo","BMW");
(4)使用字面量来创建数组 语法:[ ] 如:var arr=[ ];var arr=[1,2,.3,5,10,15];
(5).创建一个数组数组中只有一个元素10 如:arr=[10];
(6)数组中的元素可以是任意的数据类型。 如:arr=[“hello”,1,true,null,undefined];
也可以是对象,如:arr=[{name:”赵丽颖”},{ name:”陆贞”},{ name:”楚乔”}];
是一个函数 ,如:arr=[function( ){alert(1)},function( ){alert(2)}];
数组中也可以放数组,如下这种数组我们称为二维数组
如:arr =[[1,2,3],[3,4,5],[5,6,7]];
数组中的方法
常用的方法案列
<script>
var arr=new Array();
//push()将新元素添加到一个数组的尾部,并返回数组的新长度值
arr.push(5);
console.log(arr);
//sort()对数字排序
arr.sort();
console.log(arr);//未能成功完成排序[1, 12, 3, 4, 5]
//解决方法
arr.sort(rule);
function rule(num1,num2){
return num1-num2;
}
console.log(arr);//排序成功[1, 3, 4, 5, 12]
//join()把数组所有元素放入一个字符串中,通过一个分隔符进行分割
arr = [2021,8,23];
let result = arr.join('/');
console.log(result);//2021/8/23
// splice()可以对数组元素做删除、插入等多种操作
// 从数组中间删除元素splice(开始位置,删除元素长度)
arr=[1,2,3,4,5,6,7];
arr.splice(0,3);
console.log(arr);//[4, 5, 6, 7]
//在数组中间插入元素:splice(开始位置,删除元素长度,新插入元素… …)
arr=[1,2,3];
arr.splice(1,0,'a','b','c');
console.log(arr); [1, "a", "b", "c", 2, 3]
//替换数组中某个元素:splice(开始位置,要替换的元素长度,替换元素… …)
arr=[1,2,3];
arr.splice(1,1,'a');
console.log(arr);//[1, "a", 3]
</script>
遍历数组
<script>
//遍历数组
let arr =[1,2,3,4];
for(let i=0;i<arr.length;i++){
console.log(arr[i])
}
</script>