一、JavaScript
1.1 JavaScript简介
JavaScript一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。
它的解释器被称为JavaScript引擎，作为浏览器的一部分，广泛用于客户端的脚本语言，用来给HTML网页增加动态功能。
1.2 JavaScript组成部分
ECMAScript语法
文档对象模型（DOM Document Object Model）
浏览器对象模型(BOM Browser Object Model)
var 全局变量 let 局部变量 const 常量 |
二 JS的引入
2.1 在标签内写js
alert(' ') 或者 alert(" ") （单引号、双引号都可以）
<body>
<!--
onclick是html的属性,是事件属性,在这里是鼠标点击事件
属性值内部写的是js代码
alert() 是js的弹窗函数
-->
<button onclick="alert('警告!!!!')">按钮</button>
</body>2.2 在文件使用<script>标签引入js
css写样式,需要把style标签写在head标签内
但是写js代码的script标签,可以写在html页面的任何位置,head标签内,body标签内都可,但是一般建议放在后面,越晚加载越好
<script>
alert("<script>标签内执行");
</script>2.3 独立的js文件
创建一个后缀为.js的文件
文件内写js代码
在html文件内使用<script>标签引入该js文件
引入js文件的位置,在html中也是任意的
作为引入js文件的<script>标签,不能在其中间写js代码
<body>
<!-- 引入js文件 -->
<script src="tk.js"></script>
</body>三 JavaScript基本语法
3.1 变量
在JavaScript中，任何变量都用var关键字来声明，var是variable的缩写。
var是声明关键字，a是变量名，语句以分号结尾(其实可有可无)。
这里值得注意的是，JavaScript中的关键字，不可以作为变量名。就像在Java中不可以写"int int=1;"一样。
JavaScript的部分关键字：
abstract、else、instanceof、super、boolean、enum、int、switch、break、export、interface、synchronized、byte、extends、let、this、case、false、long、throw、catch、final、native、throws、char、finally、new、transient、class、float、null、true、const、for、package、try、continue、function、private、typeof、debugger、goto、protected、var、default、if、public、void、delete、implements、return、volatile、do、import、short、while、double、in、static、with。 |
JavaScript是弱类型语言,声明时不需要设置变量的类型,赋值时就可以赋值任何类型
// js是弱类型，变量声明不需要数据类型，直接用var
var a = 1;
// 将结果输出到控制台
console.log(a);
a = "aa";
console.log(a);
a = 'a';
console.log(a);
a = true;
console.log(a);
a = new Date();
console.log(a);
var n = true;
console.log(typeof (n));
console.log(typeof (a));3.2 基本数据类型
基本类型有五种
数字(number)
字符串(string)
布尔型(boolean)
未定义(undefined)
空(null)
变量有不同的类型,不同类型使用的作用不一样
• number类型,数字,那就可以做算术,逻辑运算等 (后续运算时使用)
• boolean类型,那就可以用于逻辑判断,分支语句,循环等 (后续分支循环时使用)
• string类型,那就可以使用字符串的方法,对字符串操作(跟java中String操作很像)
完整的string操作,可以查看APIJavaScript 字符串方法 (w3school.com.cn)
var y = "Java-Script"; // string类型
var j = y.charAt(0); // 根据下标找字符
console.log(j);
console.log(y.indexOf("a")); // 找到第一个指定字符的下标
console.log(y.lastIndexOf("a")); // 找到最后一个指定字符的下标
console.log(y.split("-")); // 根据指定字符,拆分字符串,返回字符串数组
console.log(y.substring(5)); // 根据指定截取字符串,直到末尾
console.log(y.substring(5, 8)); // 根据指定下标截取字符串,[begin,end)
// length不是方法,是属性,调用时不用()
console.log(y.length); // 获得字符串长度3.3 引用类型
其实引用类型是借鉴Java中的对象的思想.
JS中的引用类型其实就是JSON,全称是JavaScript Object Notation，叫做JavaScript对象标记，也就是说，在JavaScript中，JSON是用于标记一个对象的。
语法格式：
JSON对象使用大括号,{}
大括号内,是键值对,键值对使用是冒号分割.{key:value}
键正常写,值得写法区分数字,字符串,布尔值,数组,对象等
{id:18} 数字直接写
{name:"张三"} 字符串需要双引号
{sex:true} 布尔值直接写
{arr:[1,2,3]} 数组使用[]
{obj:{}} 对象使用{}
大括号内,可以同时写多个键值对,中间使用逗号隔开
{id:18,name:"李四",sex:true}
// JSON对象
var jsonObj = {
id: 1,
name: "aa",
sex: false,
phone: ["110", "120", "119"],
address: {
contrary: "bb",
provinceL: "cc",
city: "dd"
}
};
// 获取对象属性
console.log(jsonObj.id);
console.log(jsonObj.sex);
console.log(jsonObj.address);
// 修改
jsonObj.id = 3;
console.log(jsonObj.id);3.4 数组类型
数组是用来存储多个数据
创建时可以是空数组,后面也可以继续赋值
数组没有长度限制
数组存储的类型没有限制
创建数组的语法：
var 名字 = []
var 名字 = new Array()
取值赋值的语法：
数组名[下标]
// 数组类型
var arr1 = [];
console.log(typeof (arr1));
arr1[0] = 2;
arr1[1] = 3;
arr1[6] = 3;
console.log(arr1);
var arr2 = new Array();
console.log(arr2);
var arr3 = new Array(1, 2, "{", { id: 1 });
console.log(arr3);
arr3[3] = 1;
console.log(arr3);
var arr4 = [1, 2, "{", { id: 1 }];
console.log(arr4);
console.log("----------------");
// js中创建的对象都有自己的方法可以调用
var arr5 = [1, 2, 3];
console.log(arr5);
// 添加元素到末尾
arr5.push(4);
console.log(arr5);
// 添加元素到开头
arr5.unshift(0);
console.log(arr5);
// 删除最后一个元素
arr5.pop();
console.log(arr5);
// 删除第一个元素并返回
arr5.shift();
console.log(arr5);3.5 日期类型
创建日期对象,
日期对象提供了方法可以获得/设置日期信息
<script>
// 创建日期对象
var date = new Date(); // 当前时间
console.log(date);
// 创建时间时指定毫秒值,时间从1970/01/01 00:00:00
var date2 = new Date(1000 * 60 * 60 * 24 * 40);
console.log(date2);
// 以指定年月日创建日期,月份特殊!!!一月是 0。十二月是11。
var date3 = new Date(2022, 10, 13);
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,周一1,周六6
console.log(year + "/" + month + "/" + day + "周" + week);
// 设置日期
date.setFullYear();
// 按照本地日期格式输出日期
var dateString = date.toLocaleString();
console.log(dateString);
</script>3.6运算符、分支、循环
此三种操作同Java：
算术运算
关系运算
逻辑运算
三目运算
if
if-else
if-elseif-elseif-else
switch
while
dowhile
for
3.9 函数(重点)
函数就是java中方法的概念,用来完成某些功能的.
定义函数的语法：
function 函数名(参数1,参数2,...) { // 执行代码 } /* 1. function是固定,每个方法都需要设置 2. 没有定义返回值类型,也没有void 3. 函数名,见名知意 4. 参数直接写参数名,没有 数据类型,也没有var 5. 如果要返回数据,通过return 值;返回 */ |
script>
// 1 无参无返回值
function fun1() {
console.log("无参无返回值...");
}
// 调用方法,方法名直接调用
fun1();
// 2 有参无返回值
function fun2(a) {
console.log("fun2执行");
console.log(a);
}
// 方法有参数,调用时不传参数,方法能执行,但是变量显示未定义
// 方法有参数,调用时实参多于形参,方法能执行,多余的参数无意义
fun2(10, 20);
// 3 无参有返回值
function fun3() {
return 200;
}
var result = fun3();
console.log(result);
// 4 有参有返回值
// 设计方法,传入2个参数,相加后返回
</script>匿名函数（直接用var接收）
// 5 匿名函数,主要用于配合事件操作
var obj = function () {
console.log("匿名函数");
};四、常见的弹窗函数
4.1 警告框（alert）
<!-- 1.内联 -->
<button onclick="alert('你干嘛~哎呦')">按钮 </button>
<!-- 2.在文件内写 -->
<script>
alert("你干嘛~哎呦");
</script>
<button id="btn-1">我是js方法写的</button>
<script>
// 1.找到btn-1
var btn = document.getElementById("btn-1");
btn.onclick = function () {
alert("第二种方案弹");
};
</script>4.2 确认框 （confirm）
<script>
function fun2() {
// 该函数有返回值,是ture/false
// 点击确定,返回true,点击取消返回fasle
if (confirm("确定要删除?")) {
alert("删除成功!!");
} else {
alert("取消删除!");
}
}
fun2();
</script>4.3 输入框（prompt）
<script>
function fun3() {
// 会弹出对话框,输入值后点击确定返回输入框的值
// 点击取消返回的就是null
var ret = prompt("请输入密码!");
console.log(ret);
}
fun3();
</script>
314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
