1.运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
let n1 = 5;
let n2 = 2;
let res = n1 / n2;
console.log(res);
// 将数字转换成整数，只取小数点前面的整数
res = parseInt(res);
console.log(res);
// 也可以提取字符串中的数字，但是只能匹配到以数字开头的字符串，并且遇到不是数字的其他字符就停止
console.log(parseInt('12abc')); // 结果 12
console.log(parseInt('12.5abc')); // 结果 12
// 自增与自减 ++自增1 --自减1
console.log(n1);
// ++ 在前优先级最高，++在后优先级最低（比赋值符=还低）
// res = n1++; 会先将 n1 的值赋值给res ,n1自身再自增1
console.log(res, n1); //结果是 res:5 n1:6
// res = ++n1; 会先将n1的值自增1.然后再将自增后的n1赋值给res
console.log(res, n1); //结果是 res:6 n1:6
//逻辑运算符
let x = 10;
// 与 0 与 ++x 一边得到false,就是false. 判断条件类似python中的and
res = 0 && ++x; // 都成立 获得 0 11
res = x > 11 && ++x; //左边不成立，获得 false 11
console.log(res, x);
// 或 100 || ++x 一边成立获得true，判断条件类似python中的or
// res = x > 11 || ++x; //true 11
res = x > 9 || x++;
console.log(res, x);
// 非 !
console.log(n=!x)
// 三元运算符
//公式 ---> 条件 ？ 结果1 : 结果2
res = 10 == '10' ? '相等' : '不相等';
console.log(res)
</script>
</html>
2.流程控制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
// 顺序 分支 循环
`if (条件) {
} else if (条件) {
} else {
}
`;
// 公式：parseInt(Math.random() * (max - min + 1)) + min
let num = parseInt(Math.random() * (40 - 10 + 1)) + 10;
if (num >= 30) {
console.log('数字超过30')
} else if (num >= 20) {
console.log('数字超过20')
} else {
console.log('数字超过10')
}
//循环
`
while (条件) {
循环体
}
`;
let count =1;
while (count < 100) {
if (count % 8 == 0){
console.log(count)
}
count++
}
`
for (循环初始值1；循环条件2；循环增量3) {
循环体4；
}
循坏顺序，设定初始值1 --> 查看循环条件2 --> 循环体4 --> 增加循环增量3
--> 查看循环条件2 --> 循环体4 --> 增加循环增量3 (此步骤只要循环条件成立会无限循环，直至条件不满足跳出)
`;
`
do {
} while (条件)
`;
count = 0;
do {
console.log('循环体，会先执行');
count++
} while (count < 3);
</script>
</html>
3.函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id="hhh">函数</h1>
</body>
<script>
(function () {
`函数的定义
function 函数名(参数列表) {
函数体;
return 返回值
}
function: 定义函数的关键字
函数名：使用函数的依据，就是一个变量，可以赋值给其他变量，也可以存储在容器中，也可以作为函数的参数与返回值
参数列表：都是按位置传，形参与实参个数不需同意，但一定是按位置赋值，（传与收都没有限制）
函数体：完成功能的主体代码
返回值：只能返回一个值
`;
function fn() {
console.log('fn run');
return 1
}
let res = fn();
console.log(res);
let func = fn;
func();
function my_fn(a,b) {
console.log('参数',a,b)
}
my_fn(); // 你收我不传，不显示
my_fn(10); // 你收我传的不够，只显示传的值
my_fn(10,20,30); // 传的比收的多，按位置赋值，溢出的值不接受
`匿名函数
function () {
// 不指定名字的函数就是匿名函数
}
`;
// 需求需要一个函数地址，就可以传入一个匿名函数
function fn100() {
fn()
}
fn100(function () {console.log('传入的匿名函数')});
//直接用变量接受匿名函数：第二种声明函数的方式，
let f = function (a,b) {
console.log('fffff')
};
f();
// 为事件提供方法
hhh.onclick = function () {
console.log('body-h1 被点击了')
};
// 匿名函数自调用：一次性私使用
(function (a,b) {
console.log('匿名函数自调用：',a,b)
})(10,20,30);
let abc = 10;
hhh.onclick = function () {
console.log(abc)
}
})()
</script>
<script>
abc = 20
</script>
</html>
4.四种变量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
// if (true) { // 块级作域
// let a = 10;
// const b = 20;
// var c = 30;
// d = 40;
// }
{
let a = 10;
const b = 20;
var c = 30;
d = 40;
}
// console.log(a); // 有{}就不能被外界访问
// console.log(b); // let和const有块级作用域，不允许重复定义
// console.log(c); // var没有块级作用域，但有局部作用域，可以重复定义
// console.log(d); // 没有关键字声明的变量是全局变量，在函数内部声明的外部也可以用
(function () {
let aa = 100;
const bb = 200;
var cc = 300;
dd = 400;
})();
console.log(dd);
</script>
</html>
5.数据类型的运用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>数据类型的应用</h1>
</body>
<script>
// 字符串
// 1) 定义:
let ss = '123abc呵呵';
let res;
console.log(ss);
// 2)索引
res = ss[0];
console.log(res);
// 3)切片,设定一个起始位置与结束位置
res = ss.slice(3,6);
console.log(res);
// 4)替换
res = ss.replace('abc','ABC');
console.log(res);
// 5)拆分 ：string => array
res =ss.split('');
console.log(res);
// 6)拼接,只能字符串拼接
res = ss + ss;
console.log(res);
// 7) 迭代
for (s of ss) {
console.log(s)
}
// 数组
// array => string
let arr = [3,1,2,4,5];
res = arr.join(''); // 默认， | '' | '自定义符合'
console.log(res);
// 迭代
for (a of arr) {
console.log(a)
}
// 排序
// arr.sort() # 正序
// arr.reverse # 反序
// 增删改查
console.log(arr[4]); // 查，按索引查找
arr[4] = 555; // 改 按索引从新赋值
console.log(arr[4]);
arr.push(100); // 从列表的尾部增加
arr.unshift(200); // 从列表的头部增加
console.log(arr);
// 重点：增删改
arr.pop(); // 从列表的尾部删除
arr.shift(); // 从列表的头部删除
console.log(arr);
// 1.起始索引 2.操作的长度 3.操作后的结果(不定长0~n个)
arr.splice(2,1,222,333,444); // 结果 [3, 1, 222, 333, 444, 4, 555]
console.log(arr);
// 不定长参数, 在函数传参的括号内输入 ... 来表示此参数是一个不定长参数
function f(...a) {
console.log(a)
}
f(1,2,3,4,5,6,7,8)
// 字典
// 增删改查
dic = {};
// 增
dic['name'] = 'owen';
dic.age = 18;
console.log(dic); // {name: "owen", age: 18}
// 改
dic.age = 20;
console.log(dic); // {name: "owen", age: 20}
// 对象的删除
delete dic.age;
console.log(dic); // {name: "owen"}
// 查,使用.方法
// console.log(dic.name);
// 字典的迭代用 for in ,只能取到key, 无法取到value. 取到的key是一个字符串
for (k in dic) {
console.log(k)
}
</script>
</html>
6.js页面交互
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1 {
background-color: orange;
}
h2 {
background-color: darkgrey;
cursor: pointer;
}
</style>
</head>
<body>
<h1 id="hhh" style="font-size: 30px" owen="Owen" >
<i>js页面交互</i>
</h1>
<h2 class="hh2">副标题1</h2>
<h2 class="hh2">副标题2</h2>
<img src="" alt="">
<input type="text" value="12345">
</body>
<script>
// 鼠标事件
// let h1 = document.querySelector('h1'); // 选择体格符合的标签,并赋值
//
// // onclick 鼠标单击时发生的事件
// // ondblclick 鼠标双击时发生的事件
// // onmouseover 鼠标移动到目标时发生的事件
// // onmouseleave 鼠标离开目标时发生的事件
// // onmousemove 鼠标移动时发生的事件
// // onmousedown 按下鼠标时发生的事件
// // onmouseup 鼠标抬起时发生的事件
//
// h1.onclick = function (ck) {
// console.log(ck); // 鼠标在点击h1时，打印包含着鼠标的相关信息
//
// // 鼠标点击h1时,会打印鼠标在页面中的坐标
// console.log(ck.clientX,ck.clientY);
//
// // 特殊按键,例如，当按下alt,ctrl,shift 的时候 会打印true 不按时会打印false
// console.log(ck.altKey,ck.ctrlKey,ck.shiftKey);
// };
//
// // 找到 h2 的位置，
// h2 = document.querySelector('h2');
//
// // 设置将鼠标放置h2标签上时，h1显示文本
// h2.onmouseover = function () {
// h1.innerText = 'h2被悬浮了';
// h1.style.color = 'green'
// };
// // 再设置将鼠标拿开时，h1再次更改文本
// h2.onmouseleave = function () {
// h1.innerText = 'h2被放开了';
// h1.style.color = 'red';
// };
//
// let count = 1;
// h2.onmousemove = function () {
// ++count;
// h1.innerText = '鼠标在h2移动' + count + '次';
// this.innerText = '鼠标在h2移动' + count + '次'; // this 表示自身标签
// };
// 为某个标签绑定事件。去控制页面中的任何一个标签(绑定事件中的this就代表自身)
// 键盘事件
// keyCode 键盘按键
//
// 只要在窗口下，点击鼠标就可以触发
// document.onkeydown = function (ck) {
// console.log(ck.keyCode);
// if (ck.keyCode == 37) {
// console.log('你按了键盘左键');
// } else if (ck.keyCode == 38) {
// console.log('你按了键盘上键');
// } else if (ck.keyCode == 39) {
// console.log('你按了键盘右键')
// } else if (ck.keyCode == 40) {
// console.log('你按了键盘下键')
// }
// console.log(ck.altKey);
// // 连接键，ctrl + keyCode==13(enter键)
// if (ck.ctrlKey && ck.keyCode == 13) {
// console.log('留言');
// }
// };
// 对input框中的输入记录键盘的操作
// let inp = document.querySelector('input');
// inp.onkeydown = function (ck) {
// console.log(ck.keyCode)
// };
// 表单事件
// let inp = document.querySelector('input');
// let h22 = document.querySelector('h2:nth-of-type(2)'); // 使用伪类选择器定位到h2标签的第二个
//
// // onchange 当input 失去焦点才会触发 oninput 内容改变时触发
//
// inp.oninput = function () { // 当input框中改变内容时，h22的文本内容一起更改
// h22.innerText = this.value;
// };
</script>
<!--<script>-->
<!--// 表单内容-->
<!--let inp = document.querySelector('input');-->
<!--console.log(inp.value);-->
<!--inp.value = 67890;-->
<!--// console.log(inp.getAttribute('value'));-->
<!--// inp.setAttribute('value','00000000000')-->
<!--</script>-->
<!--<script>-->
<!--// 1)找目标标签-->
<!--let h1 = document.querySelector('h1');-->
<!--// 2)获取样式，内容，属性-->
<!--let fontSize = h1.style.fontSize;-->
<!--console.log(fontSize);-->
<!--// 标签.style.属性名 只能获取行间式-->
<!--// getComputedStyle(ele_name,伪类选择器通常用null填充) 能获取所有方式的样式(内联与外联叫计算后样式)-->
<!--let bgColor = getComputedStyle(h1,null).backgroundColor;-->
<!--console.log(bgColor);-->
<!--console.log(h1.innerText); // 获取标签内的文本-->
<!--console.log(h1.innerHTML); // 获取标签-->
<!--console.log(h1.getAttribute('id')); // 获取id-->
<!--console.log(h1.getAttribute('owen')); // 获得标签内的属性，(此处的'owen'为自定义)-->
<!--// 3) 修改样式，内容，属性-->
<!--h1.style.color = 'red'; // js 可以直接修改样式 - 修改的是行间式-->
<!--h1.style.borderRadius = '50%'; // css的 - 链接语法对应 js 的 小驼峰命名法-->
<!--h1.innerText = '修改过后的内容';-->
<!--h1.innerHTML = '<i>修改后的内容</i>';-->
<!--h1.setAttribute('owen','00000000000000');-->
<!--let img = document.querySelector('img');-->
<!--if (Math.random() > 0.5) {-->
<!--img.setAttribute('src','https://pic4.zhimg.com/v2-62f707093a092080ba1af623315c1331_b.jpg')-->
<!--img.setAttribute('src','https://pic3.zhimg.com/v2-3939aa204cac6921931d0de026f71e4f_b.jpg')-->
<!--}-->
<!--</script>-->
<script>
// 一，js 选择器：js如何与html标签建立起联系
// 1)
// 2) 同css3 选择器, 定位标签
// querySelector就是获取一个
// h1 = document.querySelector('#hhh');
// h1 = document.querySelector('body h1#hhh'); // 按id
// console.log(h1);
// h21 = document.querySelector('#hhh~ .hh2'); // 兄弟选择器
// console.log(h21);
// querySelectorAll就是获取多个
// h2s = document.querySelectorAll('#hhh~ .hh2');// 兄弟选择器，查找所有，使用列表套起来的对象
// console.log(h2s);
// // 优势：通过id ,class 或标签，都可以快速定位到一个或某几个
// h22 = document.querySelector('.hh2:nth-of-type(2)'); // 伪类选择器，通过类名来查找所有，再使用伪类选择器选择第几个
// console.log(h22);
</script>
</html>