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"; < ...
随机推荐
- PhpStudy升级MySQL版本到5.7
1:备份当前数据库数据. 最好是导成 SQL 文件 2:备份 PhpStudy 下的 MySQL 文件夹.以防升级失败.还可以使用旧版本的数据库 3:下载MySQL5.7.解压.然后放在 PhpStu ...
- git中的基本命令
工作区: 当前的编辑位置 缓存区: add 之后的区域 版本库: commit之后的区域就是版本库 git init . 初始化 git add . ...
- Python中的猴子补丁
monkey patch指的是在运行时动态替换,一般是在startup的时候.用过gevent就会知道,会在最开头的地方gevent.monkey.patch_all();把标准库中的thread/s ...
- JS客户端类型的判断
**第一种:通过判断浏览器的userAgent,用正则来判断是否是ios和Android客户端.代码如下:** <script type="text/javascript"& ...
- BZOJ 4008 亚瑟王(概率DP 奥妙重重)
题意 中文题面,就不解释了 分析 显然这道题直接求期望太麻烦,想想转化问题(这转化太神了). 定义f(i,j)f(i,j)f(i,j)表示第iii张卡总共被经过jjj次的概率,有转移方程式 f(i,j ...
- 用jackson的@JsonProperty注解属性名,会多出一个字段
遇见了这个情况,我的字段定义是xVal,yVal,用的lombok的@Data注解.然后查询到了下面这偏文章,https://bbs.csdn.net/topics/392305619,里面的回答是图 ...
- Python3使用openpyxl读写Excel文件
Python中常用的操作Excel的三方包有xlrd,xlwt和openpyxl等,xlrd支持读取.xls和.xlsx格式的Excel文件,只支持读取,不支持写入.xlwt只支持写入.xls格式的文 ...
- 顺序模型api
Compile:配置模型,然后进行训练 compile(optimizer, loss=None, metrics=None, loss_weights=None, sample_weight_mod ...
- redis之订阅功能
redis订阅 Redis 通过 PUBLISH . SUBSCRIBE 等命令实现了订阅与发布模式. 举例1: qq群的公告,单个发布者,多个收听者 发布/订阅 实验 命令 PUBLISH chan ...
- 文件对比工具 Beyond Compare 4.2.9中文破解版for win 附通用注册码
链接: https://pan.baidu.com/s/1yYxPo8nNv0PuOA1ZC9-F1w 提取码: v76g 注册码: --- BEGIN LICENSE KEY --- H1bJTd2 ...