前端学习笔记|JavaScript基础

JS基础

数据类型

基于动力节点视频。
Number、String、Boolean、object

强制转换

Number 强转,boolean强转(undefined、null、NaN都是转成false),String强转

myAge = Number("123445");
Boolean(0);
String(123);

parseInt、parseFloat
遇到非数字(包括空格)为止,功能更强大。

var num1=parseInt("123A123")
var num2=parseFloat("123.123a")

运算符

  1. 数学运算±*/%,除法时整数除以整数可以得到小数
  2. 自增自减
  3. 赋值运算符=,和运算符组合+=等
  4. 比较运算符,==比较 值,如"5"==5,===全等于,比较值和类型
  5. 逻辑运算符,&&、||、!
  6. 三目运算符 条件表达式?满足条件执行:不满足条件执行
  7. +,+=可以实现字符串的拼接,字符串可以直接拼接数字

隐式转换

  1. number+基本数据类型将数据转换成number类型,数字和NaN或undefined相加结果为NaN
  2. string和number比较,string先转换成number
  3. NaN和其他任何类型比较都是false,包括NaN==NaN
  4. undefined==null为true

函数

function 函数名(逗号间隔的参数列表){}//函数表达式
var res = function (m, n) {return m * n;
}
res(2,2)

arguments对象

封装实参的对象

function add(a, b) {console.log(arguments);//实参个数console.log(arguments.length);//函数引用console.log(arguments.callee);//通过索引访问实参数据console.log(arguments[0] + " " + arguments[1] + arguments[2]);arguments[0] = 5;
}
add(1, 2, 4);

变量的作用范围

函数内部声明的变量只能在函数内部访问,在函数外声明的变量可以访问

内置对象

内置对象

数组:数组是特殊类型的对象。正因如此,可以在相同数组中存放不同类型的变量。可以在数组保存对象。您可以在数组中保存函数。你甚至可以在数组中保存数组:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;//数组遍历元素做操作
numbers.forEach(myFunction);function myFunction(item) {sum += item;console.log(sum);
}

Math:round四舍五入,ceil向上取整,abs绝对值

正则表达式

^开始,$结束
[]某个范围的单个字符
\w:单词字符,\d:数字,{m,n}至少m个,最多n个,{m,}至少m个

警告框、询问框、确认框

alert("warning");
var key = prompt("please input key");
var flag = confirm("Confirm the modification?确认修改吗?");

定时器

//定时任务,时间单位为毫秒
setInterval(myPrint, 1000);//一次性定时器
setTimeout(myPrint, 5000);function myPrint() {console.log("bang!");
}

自定义对象

var obj = new Object();
obj.name = "spike";
//注意访问对象属性时要加上this
obj.line = function () {console.log("bang" + this.name);
}
obj.line();定义对象的方法二,属性后用冒号:
var obj = {name: 'spike',age: 10,show: function () {console.log(this.name + this.age);}}

DOM

DOM文档

  1. document获取元素
//id//var ele = document.getElementById("fathers");//tag// var ele = document.getElementsByTagName("p");//class//var ele = document.getElementsByClassName("a");//name属性var ele = document.getElementsByName("bebop");
  1. element操作属性
    ELement对象
    注意:innerHTML连同标签一起获取,innerText只获取文本内容
//获取属性值
//ele.getAttribute("id");//设置属性值
// ele.setAttribute("name", "time");

操作父子节点

<div id="parent"><button id="child1">b1</button><button id="child2">b2</button></div> <script>
var ele = document.getElementById("parent");var children = ele.children;var ele = document.getElementById("child1");var pa = ele.parentNode;
//通过pa.nodeName知道节点类型为'div'</script>

插入和删除节点

//创建节点(元素节点等)并附加到其他元素上var p = document.createElement("p");p.innerText = "作为最后一个子元素添加到元素";
//appendChild() 方法将节点(元素)作为最后一个子元素添加到元素
//document.body.appendChild(p);document.getElementById("parent").appendChild(p);p.innerText = "在现有子节点之前插入子节点";  var ele = document.getElementById("parent");var title = document.getElementById("child1");       
//insertBefore() 方法在现有子节点之前插入子节点。ele.insertBefore(p, title)//removeChild() 方法删除元素的子节点。
// ele.removeChild(title);title.parentNode.removeChild(title);

dom表单

//获取或设置表单的value// var ele = document.getElementById("inputtext");// ele.value = "ZHANGSAN";//获取或设置单选框选中状态// var ele = document.getElementById("female");// ele.checked = true;//下拉框设置选中var ele = document.getElementById("fe");//ele.selected = true;//设置禁用效果ele.disabled = true;

事件

//单击事件
var ele = document.getElementById("btn");ele.onclick = function () {document.getElementById("inputpwd").value = "123455";}//焦点事件//onfocus 事件在元素获得焦点时发生。onfocus 事件最常与 < input >、<select> 和 <a> 一起使用。var ele = document.getElementById("textinput");ele.onfocus = function () {document.getElementById("hint1").innerHTML = "6-8位";}//onblur 事件发生在对象失去焦点时。//onblur 事件最常与表单验证代码一起使用(例如,当用户离开表单字段时)ele.onblur = function () {var t = /^[0-9]{6,8}$/;var flag = t.test(ele.value);if (flag) {document.getElementById("hint1").innerHTML = "succeed";} else {document.getElementById("hint1").innerHTML = "not accepted";}}//改变事件
//	当form元素的内容、选择的内容或选中的状态发生改变时,发生此事件var ele = document.getElementsByName("sex");ele[0].onchange = function () {console.log(ele[0].value);console.log(this.value);}//鼠标移入移出事件
//onmouseover 事件发生在鼠标指针移动到元素或它的子元素上时。var ele = document.getElementById("pp");ele.onmouseover = function () {ele.setAttribute("class", "overBlue");}ele.onmouseout = function () {ele.setAttribute("class", "blue");}//页面加载事件
window.onload = function () {//初始化操作}

bom操作

//location包含有关当前 URL 的信息。
//Location 对象是窗口对象的属性。
//href设置或返回整个 URL。
setTimeout(function () {location.href = "https://music.douban.com/subject/25710168/";}, 3000);//加载历史列表中的上一个 URL(页面)。
setTimeout(function () {history.back();}, 3000);

es6新语法

let

  1. let声明的变量不能重复声明
  2. let有代码块的概念,如大括号里面

const

声明(对象,数组的引用)为不能更改的常量

构造函数

 function person(name) {this.name = name;this.run = function () {console.log("running");}}var p = new person("spike");p.run();

原型对象

let stu = {name: "素子"}//原型对象stu.__proto__.jump = function () {console.log("ghost in the shell");}stu.jump();

原型继承

function student(score) {this.score = score;}student.prototype = new person("faye");var stu = new student(100);console.log(stu.score + " " + stu.name);stu.run();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/749160.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java——网络编程

网络编程基础类 InetAddress类 java.net.InetAddress类用来封装计算机的IP地址和DNS(没有端口信息),它包括一个主机名和一个ip地址,是java对IP地址的高层表示。大多数其他网络类都要用到这个类&#xff0c;包括Sorket、ServerSocker、URL、DatagramSorket、DatagramPacket等常…

15.7k stars一个实用型OCR,支持80多种语言

一个实用型 OCR,支持 80 多种语言和所有流行的书写脚本&#xff0c;包括&#xff1a;拉丁文、中文、阿拉伯文、梵文、西里尔文等。 特点 支持本地或云/API部署 准确度提高到 99% 以上 完全可定制,支持 80 多种语言 支持表格识别 二维码/条码提取识别 GitHub数据 15.7k s…

LAMP下Moodle平台安装

目录 一、虚拟机安装 二、Linux使用ubuntu 三、设置管理员root的密码: 四、注销登录 五、用root账号重新登录 六、安装vmware tools 七、更新系统 八、允许SSH客户端登录 九、实体机中安装远程管理客户端 十、实体机安装文件传输工具 十一、使用Putty登录,安装插件…

学习总结2

第二周总结 一、总结贪吃蛇制作思路 1.绘制API&#xff0c;所以需要引入graphics.h这个图形界面库。 2.游戏规则 蛇是一节一节的&#xff0c;每吃掉一个事物都会长一节蛇吃食物需要移动&#xff0c;如果需要移动那么就会有坐标的变化。蛇没吃掉一个事物都会随机产生一个食物…

鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:Column)

沿垂直方向布局的容器。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 可以包含子组件。 接口 Column(value?: {space?: string | number}) 从API version 9开始&#xff0c;该接口…

MySQL 中的自增ID及其应用场景

在MySQL中&#xff0c;自增ID主要体现在几种不同的场景下&#xff0c;每种自增ID都有其特定用途和行为特征&#xff1a; 1. Auto-Increment ID (PRIMARY KEY AUTO_INCREMENT) 场景&#xff1a;在创建表时&#xff0c;可以为某个整数字段设置AUTO_INCREMENT属性&#xff0c;生成…

LeetCode--58

58. 最后一个单词的长度 给你一个字符串 s&#xff0c;由若干单词组成&#xff0c;单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、不包含任何空格字符的最大 子字符串 。 示例 1&#xff1a; 输入&#xff1a;s "Hello W…

unity学习(57)——选择角色界面--删除角色2

1.客户端添加点击按钮所触发的事件&#xff0c;在selectMenu界面中增加myDelete函数&#xff0c;当点击“删除角色”按钮时触发该函数的内容。 public void myDelete() {string message nowPlayer.id;//string m Coding<StringDTO>.encode(message);NetWorkScript.get…

Pandas中高效选择和替换操作总结

Pandas是数据操作、分析和可视化的重要工具&#xff0c;有效地使用Pandas可能具有挑战性&#xff0c;从使用向量化操作到利用内置函数&#xff0c;这些最佳实践可以帮助数据科学家使用Pandas快速准确地分析和可视化数据。 图片 在本文中&#xff0c;我们将重点介绍在DataFram…

Docker 学习笔记一

一、什么是docker Docker 是一个基于轻量级虚拟化技术的容器&#xff0c;整个项目基于Go语言开发&#xff1b;Docker是一个C/S架构&#xff0c;后端众多模块各司其职&#xff0c;docker的daemon是运行在主机上通过client可以进行通信。 docker 由三部分组成&#xff1a;镜像(…

使用Seata实现分布式事务真香!

之前分享了六种分布式事务方案&#xff1a; 本地消息表&#xff1a;如何通过本地消息表实现分布式事务 最大努力通知&#xff1a;如何使用最大努力通知实现分布式事务&#xff1f;与本地消息表区别&#xff1f; XA模式&#xff1a;用二阶段三阶段提交实现分布式事务 TCC模式…

【820复试】数据结构面试问题

文章目录 1.用循环比递归的效率高吗2.顺序表和链表的比较3.头指针和头结点的区别4.如何区分循环队列是队满还是队空&#xff1f;5.栈在通过后缀表达式求值的算法思想6.栈在递归中的应用7.队列在层次遍历中的作用8.队列在计算机系统中的应用9.矩阵的压缩存储10.串的模式匹配11.如…

解析编程中不可或缺的基础:深入了解结构体类型

精琢博客&#xff0c;希望可以给大家带来收获~ 博主主页&#xff1a;17_Kevin-CSDN博客 收录专栏&#xff1a;《C语言》 引言 在编程中&#xff0c;结构体是一种自定义的数据类型&#xff0c;它允许开发人员将不同类型的数据组合在一起&#xff0c;并为其定义相关属性和行为。…

服务端出现大量的time_wait,如何排差和解决?

出现大量的TIME_WAIT状态通常是由于网络连接的频繁创建和关闭所导致的。TIME_WAIT状态是TCP连接关闭后的一种状态&#xff0c;在该状态下&#xff0c;连接的端口在一段时间内仍然被保留&#xff0c;以确保延迟的数据包不会在网络中出现问题。 要排查和解决大量的TIME_WAIT状态…

uniapp 跳转返回携带参数(超好用)

天梦星服务平台 (tmxkj.top)https://tmxkj.top/#/ 1.返回界面 uni.$emit(enterPeople, this.entryList)uni.navigateBack({delta: 1}) 2.返回到的界面&#xff08;接收数据界面&#xff09; onShow() {let that thisuni.$on(enterPeople,function(enterPeopledata){console.…

跳出循环及数组部分方法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 for循环forEach3、filtereverysome for循环 1、continue&#xff1b;跳出当次循环&#xff0c;进行下一个循环; function ceshi(){for(var i 0 ; i < 6 ; i){if…

YOLOv8 | 添加注意力机制报错KeyError:已解决,详细步骤

目录 添加注意力机制报错 报错的原因 注意事项 解决错误流程 代码分享 ⭐欢迎大家订阅我的专栏一起学习⭐ &#x1f680;&#x1f680;&#x1f680;订阅专栏&#xff0c;更新及时查看不迷路&#x1f680;&#x1f680;&#x1f680; YOLOv5涨点专栏&#xff1a;h…

重学SpringBoot3-ServletWebServerFactoryAutoConfiguration类

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ 重学SpringBoot3-ServletWebServerFactoryAutoConfiguration类 工作原理关键组件以TomcatServletWebServerFactory为例ServletWebServerFactory会创建webServer的时机关键…

25考研数据结构复习·3.2队列

队列&#xff08;Queue&#xff09;基本概念 定义 队列&#xff08;Queue&#xff09;时只允许在一端进行插入&#xff0c;在另一端删除的线性表。 特点&#xff1a;先进入队列的元素先出队 先进先出 First In First Out(FIFO) 重要术语 队头、队尾、空队列 基本操作 创、销 I…

页面配置、网络数据请求

1. 页面配置文件的作用 小程序中&#xff0c;每个页面都有自己的 .json 配置文件&#xff0c;用来对当前页面的窗口外观、页面效果等进行配置。 2. 页面配置和全局配置的关系 小程序中&#xff0c; app.json 中的 window 节点&#xff0c;可以全局配置小程序中每个页面的窗口…