浅学JavaScript 笔记记录
一、JavaScript
1. JavaScript介绍
2. 快速入门
js两种引入方式
方法一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">点我呀</button>
</body>
<!--方式一 同一页面内-->
<script>
document.getElementById("btn").onclick = function () {
alert("点我干嘛");
}
</script>
</html>
方法二:
document.getElementById("btn").onclick = function () {
alert("点我干嘛");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">点我呀</button>
</body>
<!--方式一 同一页面内-->
<script src="js/my.js">
</script>
</html>
3. 基本语法
3.1 注释
//单行注释
/*
多行注释的内容
*/
alert("hello js s");
3.2 输入输出语句
//1.输入框
// prompt("请输入数据");
//2.弹出警告框
// alert("hello")
//3.控制台输出
// console.log("hello js");
//4.页面内容输出 没有换行
document.write("hello js");
document.write("<br>");
document.write("hello js");
3.3 变量和常量
//1. 定义局部变量
let name = "张三";
let age = 23;
document.write(name + "," + age + "<br>");
//2.定义全局变量 不需要写修饰符
{
let a = "aa";
b = "bb";
}
// document.write(a);
document.write(b);
//3.定义一个常量
const PI = 3.1415926;
document.write(PI);
3.4 原始数据类型
3.5 运算符
//字符串类型数字进行运算,会自动类型转换
let num = "10";
document.write(num + 5 + "<br>"); //105
document.write(num + "5" + "<br>"); //105
document.write(num - 5 + "<br>"); //5
document.write(num * 5 + "<br>"); //50
let num2 = 10;
document.write(num == num2); //true 只比较值是否相同
document.write(num === num2);//false 比较类型 然后比较值 类型不匹配直接false
3.6 流程控制语句
跟java一样
3.7 数组
//定义数组
let arr = [10, 20, 30];
arr[3] = 40;
for (let i = 0; i < arr.length; i++) {
document.write(arr[i] + "<br>");
}
document.write("--------------------<br>")
//数组高级运算符 ...
//复制数组
let arr2 = [...arr];
for (let i = 0; i < arr2.length; i++) {
document.write(arr2[i] + "<br>");
}
document.write("--------------------<br>")
//合并数组
let arr3 = [40, 50, 60];
let arr4 = [...arr2, ...arr];
for (let i = 0; i < arr4.length; i++) {
document.write(arr4[i] + "<br>");
}
document.write("--------------------<br>")
//将字符串转成数组
let arr5 = [..."heima"];
for (let i = 0; i < arr5.length; i++) {
document.write(arr5[i] + "<br>");
}
document.write("--------------------<br>")
4. 函数
//无参无返回值
function println() {
document.write("hello js" + "<br>");
}
//方法调用
println();
//有参有返回值
function getSum(num1, num2) {
return num1 + num2;
}
//方法调用
let result = getSum(10, 20);
document.write(result + "<br>");
//可变参数 对n个数字求和
function getSums(...params) {
let sum = 0;
for (let i = 0; i < params.length; i++) {
sum += params[i];
}
return sum;
}
let sumx = getSums(1, 5, 6, 4);
document.write(sumx + "<br>");
//匿名函数
let fun = function () {
document.write("hello js ");
}
fun();