一、什么是JavaScript
1.JavaScript简介
- javascript简称js;
- javascript是一个客户端脚本语言;
- 是运行在客户端,由浏览器内核来解析;
- js代码是从上往下执行
2.JS特点
- 弱类型语言
- 解释型语言
- 基于对象(有别人给封装好了的方法)
- 安全性高
- 兼容性问题
二、js的引入方式
JS的3中引用方式使用:
- 行间事件:卸载标签内部的
- 外链式:引用外部js文件
- 嵌入式 :通过script标签将js代码嵌入到html文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js引入方式</title>
</head>
<body>
<!-- ----------------行间事件------------------- -->
<a href="JavaScript:alert('欢迎来到王者荣耀')">点我</a>
<!-- ----------------嵌入式------------------------>
<!-- -->
<script>
alert('我是嵌入式')
</script>
<!-- -------------------外链式-------------- -->
<script src="./js/1.js">
alert('我不会被执行,因为引入了外链式')
</script>
</body>
</html>
1.js
alert('我是外链式')
三、js常见的3种输出方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见的输出方式</title>
</head>
<body>
<script type="text/javascript">
alert('将信息输出的弹出框')
console.log('将信息输出到浏览器的控制台')
document.write('在页面中显示信息')
</script>
</body>
</html>
四、js的数据类型和数据类型转换
1.js的数据类型
数据类型 | 举例或定义方法 |
---|---|
数值类型 | 数字 |
字符串 | 用引号引起的 |
布尔 | boolean包括true和false,全部小写 |
对象类型 | 类似字典 |
函数类型 | function fun(){} |
未定义 | undefined |
2.查看数据类型
查看方法 | 作用或使用 |
---|---|
typeof() | 直接查看数据类型即可typeof(数据) |
instanceo() | ① 对于基本数据类型,只有通过new方式创建出来的对象,才能被正确检测② instanceof检测是否是指定的构造函数的实例 |
3.代码举例
// ------------------六种数据类型---------------------
//数值类型Number
var num1=1;
var num2=2;
// 检测数值类型
var res=typeof(num1);
console.log(res);
// 字符串类型String
var str1='123';
var str2="123";
// boolean
var bool=true; //false
//对象类型Object
var obj={
name:'小乖乖',
age:'12',
say:function(){
alert('我是小乖乖');
}
}
var arr=['1','2','3']
console.log(typeof(arr));
console.log(obj);//类似列表但属于对象类型
console.log(null,typeof(null));
// 函数类型function
var func=function(){
console.log('哈哈哈哈');
}
console.log(func);
// 未定义类型
var v=undefined;
console.log(v,typeof(v));
var x;//初始时候不给值,默认是此类型
alert(x,typeof(x));
console.log(x,typeof(x));
// ------------------instanceof--------------------------
// 对于基本数据类型,只有通过new方式创建出来的对象,才能被正确检测
// instanceof检测是否是指定的构造函数的实例
var a=new Number(1);
alert(a instanceof Number);//true
var b=5;
alert(b instanceof Number);//false
4.数据的类型转换
//-------------------Number()将字符串强制转换成数值------------
//纯数字
var str1='1234';
var res=Number(str1);
console.log(res,'类型为',typeof(res));
// 数字+字母(只有字符串中有一个非数字字符,则返回nan-no a number)
var str2='123abc';
var res2=Number(str2);
console.log(res2,'类型为',typeof(res2));
// 小数(只能有一个小数点)
var str3='1.23';
var res3=Number(str3);
console.log(res3,'类型为',typeof(res3));
// -------------------parseInt(),parseFloat()------------
/* 非强制转换,从左到右,若第一个数字不是数字则返回nan,否则返回数字部分,遇到非数字不再查找*/
console.log(parseInt(str1),typeof(parseInt(str1)));
console.log(parseInt(str2),typeof(parseInt(str2)));
// parseFloat会比parseInt多检测一个小数点
console.log(parseFloat(str3),typeof(parseFloat(str3)));
// ------------------转换成Boolean()------------------------
var num1=0;//false
var num1=NaN;//false,虽然为数字类型,但是不是一个数字
var num1='';//false
var num1=null;//false
// var num1=undefined;//false
// var num={};//true,因为继承了object
console.log(Boolean(num1));
五、js中的数组
函数 | 作用 |
---|---|
var arr=new Array(); | 通过系统自带的方法创建数组 |
var arr=[‘a’,‘b’]; | 创建数组,推荐使用此方法 |
arr.push(‘c’,‘d’); | 在原数组进行尾部添加,无返回值 |
b=arr.pop(); | 尾部弹出,返回弹出元素 |
arr.shift(); | 从前边插入元素,在原数组进行改变 |
数组.splice(开始位置,删除数量,删除位置插入的参数1,删除位置插入的参数2…) | 若只传入一个参数,是从此位置删到最后。会改变原数组,而且会返回删除的参数 |
//数组的定义
//1.使用系统内置的Array()创建一个数组
var arr=new Array();
//2.直接定义
var arr=['a','b'];
//通过索引操作数组
// arr[0]='A';
// arr[10]='c';//不会报错,但是前边没定义的都是空
// console.log(arr[9]);//undefined
// console.log(arr);
//内置方法
//1.从尾部添加push(),在原数组进行改变,无返回值
arr.push('c','d');
console.log(arr);
//2.尾部弹出,返回弹出元素
b=arr.pop();
console.log(b);
//3.从前边插入元素,在原数组进行改变
arr.unshift('A','B');
console.log(arr);
//4.只删除最前边第一个元素,有返回值(删除的数),在原数组进行改变
arr.shift();
console.log(arr);
//5.通过索引操作的内置方法
// 数组.splice(开始位置,删除数量,删除位置插入的参数1,删除位置插入的参数2...)
//若只传入一个参数,是从此位置删到最后。会改变原数组,而且会返回删除的参数
c=arr.splice(1,2,3,4);
console.log(c);//["a", "b"]
console.log(arr);//["B", 3, 4, "c"]
六、js的运算符
运算符名 | 运算符 |
---|---|
算数运算符 | +, -, * ,/ ,++, – |
赋值运算符 | =, +=, -=, *=, /=, %= |
比较运算符 | == , != , >=, >, <= ,<, = = =(全等) ,!== |
逻辑运算符 | &&(和),两条数线(或),!(非) |
//1.算数运算符 + - * / ++ --
var a=1;
a++;//自增1 算完表达式再+1 类似于a+=1
++a;//自增1 先+1再运算
--a;//自减1 类似于a-=1
console.log(a);
//2.字符串运算,拼接(注意优先级)
var res=1+'啦啦啦';
console.log(res);//字符串拼接
//练习
var res=1+1+'a';
console.log(res);//2a
var res=1+'a'+1;
console.log(res);//1a1
//3.赋值运算符 = += -= *= /= %=
//4.比较运算符 ==,!=, >=, >, <= ,<, ===(全等) ,!==
console.log(1=='1');true,因为会自动隐私转换将'1'转为1
console.log(1==='1');false,判断的是值和类型
console.log(NaN==NaN);永不相等false
//5.逻辑运算符 &&和,||或,!非
七、条件语句
<body>
<script>
//单分支
var a=5;
if(a>6){
console.log('a>6');
}
else{
console.log('a<6');
}
//多分支
/*
if(条件1){
满足条件1代码;
}else if(条件2){
满足条件2代码;
}
...
else{
此条件可加不可加,不满足其他会执行;
}
*/
//switch case----当判断成功后,后边的条件不在判断执行,使用的是===比较
var num=5;
switch(num){
case 1:console.log('1');break;
case 2:console.log('2');break;
case 3:console.log('3');break;
case 4:console.log('4');break;
default:console.log('都不满足');
}
</script>
</body>
八、循环语句
<body>
<script type="text/javascript">
//------------1.while循环---------------------
var num=0;
while(num<10){
console.log(++num);
}
//----------2.for in循环(一般遍历对象)------------
var obj={name:'1',age:12,gender:'男'}
for(i in obj){
console.log(i);//输出键
console.log(obj[i]);//输出值
}
var arr=['a','b'];
for(i in arr){
console.log(i);//输出索引
console.log(arr[i]);//输出值
}
//-----------3.for循环-------------------------
var arr=['a','b'];
console.log(arr.length);//求长度
for(var i=0;i<3;i++){
console.log(arr[i]);
}
//-------------4.do while循环-----------
//先执行一次再判断
var a=0;
do{
console.log(a);
a++;
}while{a<10}
</script>
</body>