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 == '' ? '相等' : '不相等';
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="">
</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','')-->
<!--</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','');--> <!--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>
javascript语法 1.运算符 2. 流程控制 3. 函数 4. 四种变量 5. 数据类型的运用 6. js页面交互的更多相关文章
- Linux基础-shell脚本知识整理和脚本编写----------变量、运算符、流程控制、函数、计划任务（发送邮件）
I:知识整理:变量.运算符.流程控制.函数.计划任务 变量 系统变量:set:显示所有变量 env:环境变量 常用系统变量: path pwd lang home his ...
- flutter--Dart基础语法（二）流程控制、函数、异常
一.前言 Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台精美应用,Flutter 开源.免费,拥有宽松的开源协议,支持移动.Web.桌面和嵌入式平台. ...
- python 之 前端开发（ JavaScript变量、数据类型、内置对象、运算符、流程控制、函数）
11.4 JavaScript 11.41 变量 1.声明变量的语法 // 1. 先声明后定义 var name; // 声明变量时无需指定类型,变量name可以接受任意类型 name= " ...
- Java学习日记——基础篇（三-上）基本语法之运算符和流程控制
运算符 算术运算符 听其名而知其意,就是用于计算的,java中常用的是: + 加 - 减 * 乘 / 除 % 取模,取余——%可以用来得到两个数相除的余数 小练习——写一个ja ...
- js运算符、 流程控制 、函数、内置对象、BOM与DOM操作
运算符 # 1.算术运算符 var x=10; var res1=x++; '先赋值后自增1' var res2=++x; '先自增1后赋值' # 2.比较运算符 弱等于:自动转换类型 '5' == ...
- JS运算符，流程控制，函数，内置对象，BOM与DOM
运算符 1.算数运算符 运算符 描述 + 加 - 减 * 乘 / 除 % 取余(保留整数) ++ 递加 - - 递减 ** 幂 var x=10; var res1=x++; '先赋值后自增1' 10 ...
- Linux基础之-shell script(变量，运算符，流程控制，函数)
一.shell script Shell 脚本(shell script),是一种为shell编写的脚本程序.业界所说的shell通常都是指shell脚本,但读者朋友要知道,shell和shell s ...
- PHP（三）运算符、流程控制和函数初步
- JavaScript运算符与流程控制
JavaScript运算符与流程控制 运算符 赋值运算符 使用=进行变量或常量的赋值. <script> let username = "YunYa"; < ...
随机推荐
- 今天把自己的ocr镜像开源了
docker pull docker.io/zhangbo2008/ocr_docker_byzhang:v1 即可,欢迎下载
- 一致性Hash算法（转载）
原文地址http://blog.csdn.net/caigen1988/article/details/7708806 consistent hashing 算法早在 1997 年就在论文 Con ...
- hbase实践之flush and compaction
本文主要涉及flush流程,探讨flush流程过程中引入的问题并阐述2种解决策略,最后简要说明Flush执行策略. 对于Compaction,本文主要探讨Compaction要解决的本质问题以及由Co ...
- 第90题：子集II
一． 问题描述 给定一个可能包含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集). 说明:解集不能包含重复的子集. 示例: 输入: [1,2,2] 输出: [ [2], [1], [1, ...
- linux mint安装mysql-8.0.16
1.使用通用二进制文件在Unix / Linux上安装MySQL 下载的文件:mysql-8.0.16-linux-glibc2.12-x86_64.tar.xz 注意: 如果您以前使用操作系统本机程 ...
- 004_FreeRTOS创建与删除任务
(一)创建与删除任务函数 (二)上面的四个函数目前只用动态创建任务和删除任务 (三)动态创建任务 函数 xTaxkCreate() 1. 宏 configSUPPORT_DYNAMIC_ALLOCAT ...
- [Luogu] 软件包管理器
https://www.luogu.org/problemnew/show/P2146 几乎是一个裸题 #include<cstdio> #include<cstring> # ...
- Cogs 58. 延绵的山峰(st表)
延绵的山峰 ★★☆ 输入文件:climb.in 输出文件:climb.out 简单对比 时间限制:1 s 内存限制:512 MB 问题描述 有一座延绵不断.跌宕起伏的山,最低处海拔为0,最高处海拔不超 ...
- Hadoop Shell命令字典
转载自:https://www.aboutyun.com//forum.php/?mod=viewthread&tid=6983&extra=page%3D1&page=1&a ...
- 注解之 @RestController 和 @RequestMapping
Controller 是 Spring 中最基本的组件,主要处理用户交互,一般每个业务逻辑都会有一个 Controller,供用户请求接口进行数据访问:@RequestMapping 注解用于绑定UR ...