《前端》JavaScript总结
文章目录
- js的使用方法
- 变量与运算符
- let 与 const
- 变量类型
- 运算符
- 输入与输出
- 输入
- 输出
- 格式化字符串
- 判断语句
- 循环语句
- for循环
- while循环
- do...while循环
- 对象
- 数组
- 访问数组中的元素
- 数组常用属性和函数
- 函数
- 类
- 定义
- 继承
- 静态方法
- 静态变量
- 事件
- 鼠标
- 键盘
- 表单
- 窗口
js的使用方法
**使用方式:**在html标签内任意位置加上<script type="module"></script>
标签即可
几种使用方法:
- 直接在
<script type="module"></script>
标签内写js代码 - 直接引入文件
<script type="module" src="/static/js/index.js"></script>
- 将所需的代码通过import关键字引入到当前作用域(将js中的某些内容引入)
例如:
let name = "sun";
let age = 20;function print() {console.log("My name is " + name);
}export {name,print
}
我们可以使用name变量,但无法使用age变量
我们上面在 script 里面加上了 type=module 的好处会使得在script里面的变量只会在内部生效,避免了变量使用的冲突
**执行顺序:**类似于html与css,按从上到下的顺序执行;事件驱动执行
html、css、js之间的关系:
- css控制html
- JavaScript控制html与css
- 为了方便开发与维护,尽量按照上述顺序写代码。例如:不要在html中调用js中的函数
变量与运算符
let 与 const
用来声明变量,作用范围为当前作用域;let用于定义变量,const用于定义常量
例如:
let s = "sun", x = 5;let d = {name: "sun",age: 20,
}const n = 100;
js中的注释与 C++完全一样
变量类型
- number:数值变量,例如1, 2.5
- string:字符串,例如"sun", ‘yang’,单引号与双引号均可。字符串中的每个字符为只读类型(即不可修改,只可查询看);有 substr,substr(0,1)表示从下标0开始,共有一个元素;substr(2)表示从下标第二个元素开始
- boolean:布尔值,例如true, false
- object:对象,类似于C++中的指针,例如[1, 2, 3],{name: “sun”, age: 20},null(空)
- undefined:未定义的变量
运算符
js中的运算符与C++相似;不同点:① ** 表示乘方 ② === 表示相等,!==表示不相等;其他相似
输入与输出
输入
从html与用户的交互中输入信息;例如通过input、textarea等标签获取用户的键盘输入,通过click、hover等事件获取用户的鼠标输入。
例如,我们现在页面里面搞个框架
输入:<br><textarea name="" id="" cols="30" rows="10"></textarea><br><button>Run</button><br><pre></pre><script type="module">import {main} from "/static/js/index.js"main();</script>
js代码:
let input = document.querySelector("textarea");//获取textarea中的内容
let run = document.querySelector("button");//获取button的内容
let output = document.querySelector("pre");//获取pre中的内容function main() {run.addEventListener("click", function() { //给run绑定一个函数let s = input.value;//获取input的值output.innerHTML = s;//将s的内容赋值给output})
}export {main,
}
结果:
下面的pre每次都会获取输入中的内容
输出
调试用console.log,会将信息输出到浏览器控制台
格式化字符串
字符串中填入数值:
let name = "sun", age = 20;
let s = `My name is ${name}. I'm ${age} years old`;//字符串使用 ``
console.log(s);
保留几位小数问题:
let x = 1.234567;
let s = `${x.toFixed(2)}`;//保留两位小数
判断语句
js中的 if…else 与C++完全一致
例如:
let score = 90;
if (score >= 90) {console.log("S");
} else if (score >= 80) {console.log("A");
} else if (score >= 70) {console.log("B");
} else {console.log("C");
}
逻辑运算符:与C++一致;&&表示与,|| 表示或,!表示非
循环语句
js中的循环一样,都有 for、while、do…while循环
for循环
for(let i = 0; i < 10; i++) {console.log(i);}
枚举对象或数组可以这样使用:
- for-in循环:可以枚举数组的下标,以及对象中的key
- for-of循环:可以枚举数组中的值,以及对象中的value
let array = [1, 3, 5, 7];for(let i in array) {console.log(i);}console.log("hello world");for(let i of array) {console.log(i);}
while循环
let i = 0;while(i < 10) {console.log(i);i++;}
do…while循环
let i = 0;do {console.log(i);i++;}while(i < 10);
对象
英文名字是Object,类似于C++中的map,由 key、value 对构成
value 可以是变量、数组、对象、函数等等
函数定义中的this用来引用该函数的拥有者
let Person = {name: "suntong",age: 20,money: 0,add_money: function (x) {this.money += x;}}
对象中的每个key都是字符串类型,例如上面的 name,我们可以写成 “name”,但是不写引号也可以,但是如果我们在外面要使用时,记得带上引号哦;
对象属性与函数的调用方式有两种:
- Person.name、Person.add_money()
- Person[“name”]、Person [“add_money”] ()
数组
数组类似于C++中的数组,但是数组中的元素类型可以不同;可以是变量、数组、对象、函数等等
例如:
let a = [1, 2, "sun", 'abc'];let b = [1, //变量"sun", //变量[1, 2, "sun"], //数组{name: "sun", age: 20}, //对象function() { //函数console.log("hello world");}]
访问数组中的元素
通过下标来访问数组中的元素;
例如:
console.log(a[0]);
数组常用属性和函数
- 属性length:返回数组长度;这里的length是属性,而不是函数,不需要加()
- 函数push():向数组末尾添加元素
- 函数pop():删除数组末尾的元素
- 函数splice(a, b):删除从a开始的b个元素
- 函数sort():将整个数组从小到大排序
- 自定义比较函数:array.sort(cmp),函数cmp输入两个需要比较的元素,返回一个实数,负数表示第一个参数小于第二个参数,0表示相等,正数表示大于。
let a = [1, 2, 5, 3, 9];a.sort(function(a, b) {return b - a;//逆序});console.log(a);
函数
函数定义方式:有三种
function add(a, b) {return a + b;
}let add = (a, b) => {return a + b;
}let main = function() {console.log(typeof add);console.log(add(3, 4));
}
函数有返回值,则会返回返回值;若函数没有返回值,则会返回 undefined;
类
定义
class Point {constructor(x, y) { //构造函数this.x = x;this.y = y;}init() { //成员函数this.sum = this.x + this.y;}toString() { //成员函数return `(${this.x}, ${this.y})`;}
}let p = new Point(3, 4);
console.log(p.toString());
继承
class ColorPoint extends Point {constructor(x, y, color) {super(x, y); //super表示继承父类的构造函数this.color = color;//this必须要在super之后使用}toString() {return this.color + ' ' + super.toString(); //super调用父类的toString}
}
super这个关键字,既可以当作函数使用,也可以当作对象使用。作为函数调用时,代表父类的构造函数,且只能用在子类的构造函数之中。super作为对象时,指向父类的原型对象
在子类的构造函数中,只有调用super之后,才可以使用this关键字
成员重名时,子类的成员会覆盖父类的成员
静态方法
在成员函数前添加static关键字即可;静态成员不可以被对象直接调用,只能通过类来调用
class Point {constructor(x, y) { //构造函数this.x = x;this.y = y;}toString() { //成员函数return `(${this.x}, ${this.y})`;}static class_print_name() { //静态方法console.log("point");}
}let p = new Point(1, 2);
Point.print_class_name(); //正确
p.print_class_name(); // 会报错
静态变量
在ES6中,只能通过class.propname定义和访问;我们不是在类内加上static来定义静态变量,而是直接使用全局变量
Point.cnt = 0;class Point {constructor(x, y) {this.x = x;this.y = y;Point.cnt++;}toString() {return '(' + this.x + ', ' + this.y + ')';}
}let p = new Point(1, 2);
let q = new Point(3, 4);console.log(Point.cnt);//2
事件
js的代码一般通过事件来触发;可以通过 addEventListener 函数为元素绑定事件的触发函数,常见的有:
鼠标
- click:鼠标左键点击
- dblclick:鼠标左键双击
- contextmenu:鼠标右键点击
- mousedown:鼠标按下,包括左键、滚轮、右键(event.button:0表示左键,1表示中键,2表示右键)
- mouseup:鼠标弹起,包括左键、滚轮、右键(event.button:0表示左键,1表示中键,2表示右键)
event.clientX、event.clientY分别获取点击的 x 和 y 的坐标
例如:
let div = document.querySelector("div");let main = function() {div.addEventListener('click', function(event) {console.log(event.type);})
}export {main,
}
键盘
- keydown:某个键是否被按住,事件会连续触发(event.code:返回按的是哪个键,event.altKey、event.ctrlKey、event.shiftKey分别表示是否同时按下了alt、ctrl、shift键)
- keyup:某个按键是否被释放(event属性如上)
- keypress:紧跟在keydown事件后触发,只有按下字符键时触发。适用于判定用户输入的字符(event属性如上)
- keydown、keyup、keypress的关系类似于鼠标的mousedown、mouseup、click
表单
- focus:聚焦某个元素
- blur:取消聚焦某个元素
- change:某个元素的内容发生了改变
窗口
需要作用到window元素上
- resize:当窗口大小放生变化
- scroll:滚动指定的元素
- load:当元素被加载完成
《前端》JavaScript总结相关推荐
- 【AJAX】JavaScript的面向对象
Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...
- 【JavaScript总结】JavaScript语法基础:JS高级语法
作用域链: 1.JS中只有函数能够限定作用域的范围: 2.变量处理在制定的函数范围内,还有一个特殊的作用域,就是没有用var 声明的全局作用域 3.js中的作用域链是为了清晰的表示出所有变量的作用范围 ...
- 【JavaScript总结】JavaScript语法基础:DOM
->DOM的理解:文档对应dom树 ->有了DOM能做什么:DOM的操作 html文档做为DOM树模型,DOM树的节点就是对象.对象会触发事件来执行一些事件代码. C#中的事件是一个委托变 ...
- 【JavaScript总结】JavaScript语法基础:JS编码
运算符 数学:+. -. *. / 逻辑:>. < .>= .<=. == . !=.&&.|| . === .!==(完全等于) 对象相关 new delet ...
- 【JavaScript总结】JavaScript语法基础:数据类型
------>数据类型有哪些? ->基本类型:数字类型,布尔类型,字符串类型 ->引用类型:对象类型,函数类型 ->空类型:null 和 undefined ->运算符: ...
- 【JavaScript总结】JavaScript发展与学习内容
发展: 最初浏览器是为大学里浏览文档用,从地址栏输入文档地址,找到文档显示. 后来各种需求(购物网站,个人博客)出现,已有功能不能满足需求. 可人们依旧在努力满足这种需求,但实现后的效果很不尽人意. ...
- Python:模拟登录、点击和执行 JavaScript 语句案例
案例一:网站模拟登录 # douban.pyfrom selenium import webdriver from selenium.webdriver.common.keys import Keys ...
- [JavaScript] JavaScript数组挖掘,不只是讲数组哟(2)
课程来源:后盾人 上一篇的内容:[JavaScript] JavaScript数组挖掘,不只是讲数组哟 数组引用类型分析,多维数组,用Array.of为数组创建细节,类型检测与转换,在一个数组后面加一 ...
- [JavaScript] JavaScript 数组挖掘,不只是讲数组哟
课程来源:后盾人 数组引用类型分析 数组的定义 const array = new Array('hello', 'dust', 1, 2, 3, 4, 5) console.log(array) l ...
- linux下用js生成xml,js2xml:将javascript字符串转换为xml
有时候爬数据遇到像下面这种,数据在script标签中以javascript形式存在. var totalReviewsValue = 32; var averageRating = 4.5; if(t ...
最新文章
- RichTextBox实现关键字自定义颜色显示(C#)
- 17 个方面,综合对比 Kafka、RabbitMQ、RocketMQ、ActiveMQ
- kafka消息消费有延迟_消息中间件选型分析---从Kafka与RabbitMQ的对比来看全局
- 沉梦云商城系统2.1.7免授权源码+搭建教程
- Kafka会不会重复消费
- 自考计算机非笔试英语怎么考,自考中的非笔试课程是什么,怎么进行考核?
- vue页面无操作10分钟内调转到登录页面
- linux yum安装python3_linux下yum安装python3
- lock.lock()使用,与synchronized对比
- 关于GraphEasy的简单捣腾
- 华为联运游戏或应用审核驳回:检查HMS Core更新失败
- .netcore基础知识(一)
- Python该怎样学?我如何快速掌握Python的?
- 单链表的逆转:(头尾互换)
- vce数学考试能用计算机,准备VCE数学考试的诀窍,从一本出色的笔记开始!
- Zabbix 3.4配置监控项及监控Linux、Windows客户端
- Linux进程守护者: 进程监视及自动重启崩溃的进程
- 基于语义分割的身份证部件解析和文字检测
- 存款准备金率的意义,如何获取
- [附源码]java毕业设计小型银行贷款管理系统
热门文章
- 微信小程序面试题总结
- for循环打印九九乘法表
- 技术干货 | 基于 MindSpore 实现图像分割之平均表面距离
- Qt 设置背景图片
- 幅相曲线渐近线_幅相频率特性曲线.PPT
- c语言周长和面积计算
- 教资(信息技术学科知识与教学能力)13-1信息技术课程知识
- Command “python setup.py egg_info“ failed with error code 1 in /tmp/pip-build-5z0k7aoz/pynacl/
- 【矩阵乘】【DP】【codevs 1305】Freda的道路
- 统计学习第十四周-方差分析