python第五十四天 javascript语法 1.运算符 2. 流程控制 3. 函数 4. 四种变量 5. 数据类型的运用 6. js页面交互
Posted liguodeboke
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了python第五十四天 javascript语法 1.运算符 2. 流程控制 3. 函数 4. 四种变量 5. 数据类型的运用 6. js页面交互相关的知识，希望对你有一定的参考价值。
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>
以上是关于python第五十四天 javascript语法 1.运算符 2. 流程控制 3. 函数 4. 四种变量 5. 数据类型的运用 6. js页面交互的主要内容，如果未能解决你的问题，请参考以下文章
孤荷凌寒自学python第五十四天使用python来删除Firebase数据库中的文档
How Javascript works (Javascript工作原理) (十四) 解析，语法抽象树及最小化解析时间的 5 条小技巧