一、引言
1.1JavaScript简介
·JavaScript是一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。
·它的解释器被称为JavaScript引擎，作为浏览器的一部分，广泛用于客户端的脚本语言，用来给HTML网页增加动态功能。
1.2JavaScript组成部分
~ECMAScript语法
~文档对象模型
~浏览器对象模型
二、JS的引入
2.1在标签内写JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js引入</title>
</head>
<body>
<!-- 方式1：在标签内可以直接写js代码 -->
<button onclick="alert('点我了?')">按钮</button>
<button name="alert('点我了?')">按钮2</button><!--只有onclickyouyong-->
<!--
onclick是html属性，是事件属性，在这里是鼠标点击事件
属性值内部写的是js代码
alert()是js的弹窗函数
-->
</body>
</html>2.2在文件中使用<script>标签引入JS
css写样式，需要把style标签写在head标签内
但是写js代码的script标签，可以写在html页面的任何位置 ，head、body标签内都可，但建议是放在后面，越晚加载越好
<script>
alert("<script>标签内执行");
</script><!-- 方式2:将js代码写在当前页面，使用script标签 -->
<button noclick="dj()">按钮2</button>
<button noclick="dj()">按钮3</button>
<button noclick="dj()">按钮4</button>
<!-- 定义js代码 -->
<script>
function dj{
alert("又点我了？")
}
</script> 2.3独立的JS文件
1）创建一个后缀为.js的文件
2）文件内写js代码
3）在html文件内使用<script>标签引入该js文件
4）引入js文件的位置，在html中也是任意的
5）作为引入js文件的<script>标签，不能在其中间写js代码
<!-- 方案3：抽取代码写出独立的js文件，然后再引入 -->
<button onclick="dj2()">按钮5</button>
<button onclick="dj2()">按钮6</button>
<script src="1.1dj.js"></script>
三、JavaScript基本语法
3.1变量
~在JavaScript中，任何变量都用var关键字来声明，var是varible的缩写
~var是声明关键字，a是变量名，语句以分号结尾（其实可有可无）
~值得注意的是，JavaScript中的关键字，不可以作为变量名（这点跟Java很像）
var a;<script>
//单行注释
/*多行注释*/
//------变量------
//声明变量
var a;
//变量赋值
a=1;
a='a';
a=true;
//输出语句
a=1;
console.log(a);
a='a';
console.log(a);
a=true;
console.log(a);
</script>JavaScript是弱类型语言，声明时不需要设置变量的类型，赋值时就可以赋值任何类型
3.2基本数据类型
基本类型五种
~数字
~字符串
~布尔型
~未定义
~空
//----------------数据类型----------------
var b=1;//number
console.log(typeof b);
var c="字符";//string
console.log(typeof c);
var d="true";//boolean
console.log(typeof d);
var e;//undefined
console.log(typeof e);变量有不同的类型，不同类型使用的作用不一样
~number类型，数字，可以做运算，逻辑运算等
~boolean类型，用于逻辑判断，分支语句，循环。。。
~string类型，使用字符串方法。对操作符操作(同Java中String操作很像)
3.3引用类型[重点]
其实引用类型是借鉴Java中对象的思想.
JS中的引用类型是JSON（JavaScript Object Notation），即JavaScript的对象标记，也就是说，在JavaScript中，JSON是用于标记一个对象的。
前后端交互用的数据格式就是JSON
语法格式
~JSON对象使用大括号，{}
~大括号内，是键值对，键值对使用是冒号分割.{key:value}
~键正常写，值的写法区分数字、字符串、布尔值、数组、对象。。。
·{id:18}数字直接写
·{name:"哈哈哈"}字符串需要双引号
·{sex:true}布尔值直接写
·{arr:[1,2,3]}数组使用[]
·{obj:{}}对象使用{}
~大括号内，可以同时写多个键值对，中间使用逗号分隔
·{id:18,name:"张三",sex:ture}
//----------------JSON-------------------
var obj={
id:1,
username:"admin",
sex:true,
age:18,
phone:["18511116666","15366665516"],
address:{
country:"China",
province:"AnHui",
}
}
//取值：对象.key
console.log(obj.id);3.4数组类型
数组就是用来存储多个数据
·创建时可以是空数组，后面也可以继续赋值
·数组没有长度限制
·数组存储的类型没有限制
创建数组的语法
·var 名字[]
·var 名字=new Array()
取值赋值的语法
·数组名[下标]
//----------------数组----------------
var arr = [];//js的数组，长度不固定，类型不固定
console.log(arr);
arr[0]=1;
arr[1]="a";
arr[2]={id:1,name:"zmq"}
console.log(arr);
var arr1= [];
var arr2=new Array();
var arr3=[2,false,"abc"];
var arr4=new Array(2,false,"abc");
//---------------数组的API---------------
var arr5=[];
//向数组存储元素
arr5.push(1);//-------放尾部
arr5.push(2);
console.log(arr5);//打印的结果是[1,2]
arr5.unshift(3);//-----放头部
console.log(arr5);//打印的结果是[3,1,2]
//删除
arr5.shift();//-----默认删除开头第一个
console.log(arr5);//打印的结果是[1,2]
arr5.pop();//-------默认删除尾部
console.log(arr5);//打印的结果是[1]
//添加/删除---抽象
var animals=["cat","dog","fish"];
animals.splice(2,0,"sheep","pig");
//查询
var arr7=[1,2,3,4,5,6,7,8];
function getOdd(e){
return e %2 == 1;
}
var ret = arr.find(getOdd);//find是返回第一个满足条件的，所以打印1
console.log(ret);
var ret2 = arr7.filter(getOdd);//返回所有满足条件
console.log(ret2);
//遍历
for(var i = 0;i < arr7.length;i++){
console.log(arr7[i]);
}3.5日期类型
创建日期对象，
日期对象提供了方法可以获得/设置日期的信息
<script>
//创建日期对象
var date=new Date();//当前时间
console.log(date);
//创建时间时指定毫秒值
var date2=new Date(1000*60*60*24*40);
console.log(date2);
//以指定年月日创建日期，月份特殊：一月是0，十二月是11
var date3=new Date(2024,4,15);
console.log(date3);
//获得日期的方法
var year=date3.getFullYear();//获得年
var month=date3.getMonth()+1;//获得月，0-11
var day=date3.getDate();//日
var week=date3.getDay();//周，0-6 周日是0，周六6
console.log(year+"/"+month+"/"+day+"周"+week);
//设置日期
date.setFullYear();
//按照本地日期格式输出日期
var dateString=date.toLocaleString();
console.log(dateString);
</script>3.6运算符
console.log(10/2);
console.log(10/3);//输出3.33333...除不尽会保留小数
//== 判断内容是否相等
//=== 判断内容和类型
console.log(1==1);//T
console.log(1=="1");//T
console.log(1==="1");//F
console.log(1===1);//T3.7分支
·if
·if-else
·if-elseif-···-else
·switch
与java类似
// 判断数字，非0即对
//判断字符串，非空即对
if(""){
console.log("dui");
}
else{
console.log("cuo");
}3.8循环
·while
·dowhile
·for
也与java基本一致
3.9函数[重点]
函数就是java中方法的概念，用来完成某些功能的。
<script>
/*
* 函数即方法
* 1 必须有关键词function
* 2 其后直接写函数名
* 3 方法名后写参数列表
* 参数直接写参数名即可，不需要写类型，var也不需要写
* 多个参数逗号隔开即可
* 4 列表后函数{}
* 5 不需要返回值类型，也不需要void
* 6 如果想返回数据，直接在函数体{}内直接写return即可
*/
function m1(){
console.log("无参无返回值");
}
function m2(a,b){
console.log("有参无返回值"+a+"-"+b);
}
function m3(a,b){//有参有返回值
var c=a+b;
return c;
}
/**
* 方法调用，直接通过方法名即可
**/
m1();
m2(2,3);
var ret = m3(2,3);
console.log(ret);//注意，如果直接m3(2,3)则什么都打印不出
//匿名函数--单独写没意义，需要配合事件
onclick = function(){
console.log("匿名函数");
}
var arr8=[1,2,3,4,5,6,7,8];
var ret=arr8.filter(function(e){
return e%2==1;
});
var ret2=arr8.filter((e)=>{
return e%2==1;
});
var ret3=arr8.filter(e=>e%2==1);
console.log(ret3);
</script>四、常见的弹窗函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>弹框函数</title>
</head>
<body>
<button onclick="m1()">警告框</button><br/>
<button onclick="m2()">确认框</button><br/>
<button onclick="m3()">会话框</button><br/>
<script>
function m1(){
alert("服务器正忙，稍后再试")
}
function m2(){
// var ret = confirm("是否确定删除")
// console.log(ret);
if(confirm("是否确定删除")){
console.log("删除");
//将来要发请求，将数据删除
}
else{
console.log("取消删除");
}
}
function m3(){
prompt("请输入口令");
}
</script>
</body>
</html>
601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
