<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active {
color: red;
background-color:aqua;
}
</style>
</head>
<body>
<!-- type,class普通属性，onclick时间属性 -->
<button type="button" class="default" onclick=""alert this.tagName>提交</button>
<button type="button" class="default" onclick="change(this)">提交</button>
<script>
function change(ele) {
ele.textContent ="已提交";
ele.classList.toggle("active");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 3.变量
let email = "admin @pho.con";
// console.log (email);
// (声明初始化二合一，第一次赋值叫初始化等价于以下两行),只声明不赋值默认值就是undefined.不能重复赋值会报错
// let email;
// email = 34444@qqcom;
// console.log (email);
// 虽然不能重复赋值但可以更新，第二次赋值叫更新，修改
email = "34444@qq.com";
console.log (email);
// 删除
email = null;
console.log (email);
// 常量不能被更新必须初始化,声明时有一定要赋值否则会报错，也不可更新但删除可以
const NATLON = "Chine";
// const NATLON;没有赋值
// NATLOM = "USO";
console.log (NATLON)
// 3.标识符
// 只允许字母，数字，下划线，禁止以数字开头。特殊符号也不可以。
let abc123;
let _12abc;
let $123;
// let name@;
// let name#;
// 大小写敏感
let MyName ="小明";
let myName = "小红";
console.log (MyName , myName);
// 关键字，保留字不能用,如下会报错
// let let = 100;
// console.log (let);
// 4.命名方案
// 驼峰式：每个单词的额首字母大写，也是官方推荐使用
let userName = "zhu";
function getUserEmail() {}
// 蛇形：
let user_email = "zhu@qq.com";
function get_User_email() {}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.函数
console.log(typeof 100);
function hello(a,b,c) {}
console.log(typeof hello);
console.log(hello instanceof Function);
console.log(hello);
console.dir(hello);
hello.email = "123456@qq.com";
// 3.数组
const colors = ["red", "green", "blue"];
console.log(colors);
console.table(colors);
colors.forEach(item => console.log(item));
// 2.对象
// 对象字面量：json的语法基础
const person = {
name:"zhu lao shi",
gender:"male",
job:"lecture",
getName:function() {
return this.name;
}
}
console.log (person);
console.dir(person);
console.table(person);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function getName (name) {
return"welcome to" +name;
}
console.log (getName("朱老师"));
function getName (name,city) {
return "欢迎来自" + city + "的" + name ;
}
console.log (getName("朱老师","合肥"));
// 在sum()函数声明之前调用
console.log(sum(100,200));
// 函数声明会自动提升到当前程序的顶部
function sum (a,b) {
return a+b;
}
// 函数调用不像变量，不必遵循"先声明后使用"的规范
console.log(sum(100,200));
// 使用var声明变量才会提升，使用let，不会
// 为了规范，大多数时候，推荐使用"匿名函数"来实现"先声明再使用的规范"
// console.log(sum1(100,400);)这样会报错必须先声明再使用
let sum1 = function (a,b) {
return a+b;
};
// 声明了一个变量sum1,它的值是一个函数
console.log(sum1(100,400));
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 函数都是单值返回
let sum = function (a,b){
return a + b;
};
console.log(sum());
sum = function (a = 1, b =2) {
return a + b;
};
console.log(sum());
sum = function (a = 1, b =2) {
return a + b;
};
console.log(sum(42));
sum = function (a, b, c, d, e,) {
return a + b + c + d + e;
};
console.log(sum(1, 2, 3, 4, 5));
// 如果10，20，300，个数相加？
sum = function (...arr) {
console.log(arr);
return arr.reduce ((p, c) => p + c);
}
// console.let = (sum(1, 2, 3, 4, 5));
let a1 = [1, 2, 3, 4, 5];
console.log(sum(...a1));
// ...:用在函数声明参数中，就是参数打包功能，rest
// ...:用在函数调用参数中，就是扩展，spread
// 如果返回多个值，返回数组和对象就可以
function getproduct() {
return [123, "手机",678,"Huawei"];
}
let mobile =getPrm
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>箭头函数</title>
</head>
<body>
<script>
// 匿名函数
// 只有匿名函数才可以使用箭头函数进行简化
let sum = function (a,b) {
return a + b;
};
// =>胖箭头
sum = (a,b) => {
return a + b;
};
console.log(sum(10,20));
// 如果参数大于一个，那么参数的圆括号不能省
let getName = function (name) {
return "Hello" + name;
};
// 一个参数可以不加括号
getName = name => {
return "hello" + name;
}
console.log(getName("猪猪侠"));
// 如果函数体只有一条return语句或只有一条语句，则大括号也可以不用
sum = (a,b) =>
a + b;
console.log(sum(50,20))
getName = name=> "hello" + name;
console.log(getName("小呆呆"));
// 如果没有参数，参数的圆括号就不能省
let show = () => console.log("西瓜");
show();
// 箭头函数没有自己的this,不能用来当构造函数
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>立即执行函数</title>
</head>
<body>
<script>
// 声明
function sum(a,b) {
return a + b;
};
// 调用
console.log(sum(10,20));
// 二合一，一步完成
(function sum(a,b) {
console.log(a + b);
})(20,40);
// sum (20,40)
// var username = "小猪猪";
// console.log(window);
// console.log(window.username);
// 因为函数可以创建出一个独立的作用域
(function () {
var username = "鲸";
})();
console.log(window);
console.log(window.username);
// let,const 可声明全局，只不过它放在一个单独管理的全局空间中
// 高阶函数：回调，偏函数，柯里化，纯函数
</script>
</body>
</html>
