JavaScript入门记录
我缝合了狂神和老杜的视频,一起看的
深入浅出JavaScript-老杜JavaScript基础教程全套完整版【JavaScript从入门到实战】_哔哩哔哩_bilibili
【狂神说Java】JavaScript最新教程通俗易懂_哔哩哔哩_bilibili
JavaScript是一种弱类型的语言,代码无须经过编译,直接由浏览器解释运行
配置vscode的js环境方面。
首先是node.js的安装与配置
node.js安装及环境配置超详细教程【Windows系统安装包方式】 - 知乎
这篇文章写得很好很详细
VSCode 配置javascript环境,你知道吗?_我就是个渴望成长的小菜鸡的博客-CSDN博客_vscode配置javascript
这边讲了vscode需要下载的插件、
还有就是vscode支持es6语法的问题,可以看这篇文章
vscode无法识别es6语言_weixin_46027346的博客-CSDN博客_vscode不识别es6
js可以在html里面写
喜闻乐见的helloworld
<script>alert("Hello world!");</script>
引过来的方式和css不同
千万不要瞎搞自闭合
注意不论是在HTML里写还是引进,一定要放在body下面
语法入门
注意,脚本语言是逐行解释的,不是先编译再运行的
1.变量
var a=1;弱类型语言,只有一个var
但是还是会严格区分大小写的
甚至还能不用var关键字定义,甚至这样还默认是个全局变量,特别恐怖
加个'use strict';这句话在要strict的代码之前就行。因为脚本语言逐行解释
在es6中,我们不用var,而是用let来定义局部变量
但是有个东西叫eslink,严格检测js语法。这种注释这个地方不加空格也会报错
2.条件控制
3.调试
可以直接在浏览器的审查元素那边调试
直接在console里面写js代码就行
爱怎么搞怎么搞
在这边甚至有调试工具,比如堆栈信息什么的
可以打断点
4.数据类型
数值、文本、图形、音频、视频……
数值类型只有一个number,不区分小数和整数
字符串
let str=`大家好
我是
你爸爸
`
用这个键括起来多行字符串,那些换行空格都会保留,原封不动输出
java中sysout的模板字符串是这样的
在js里面直接可以搞
还可以指定下标,做到java做不到的事
但是当然还是改不了
方法:大小写转变、indexOf、substring
布尔类型
浮点数也有精度问题
null 空,定义了但没有值
undefined 没定义
有个绝对等于,必须类型一样,值一样
比如1=='1' ,但不===
数组
数组长度是可变的
当然可以缩短,也不会发生数组溢出的坑爹事件
可以多维数组
方法:indexOf(是绝对等于)、slice(截取数组一部分)、push、pop(以尾部为栈口的栈,返回长度,可以一次性弄进去多个参数)、unshift、shift(以头部为栈口的栈)、sort、reverse、copy、concat(拼接)、fill、find、join等等等,正常有的都有
中括号
下标越界会报错“undefined”
条件控制
循环
可以遍历数组、map、set
对象
使用大括号括起来,相当于若干个键值对
'use strict';
let obj={fieldName1:fieldValue1,fieldName2:fieldValue2,fieldName3:fieldValue3,
}
相当于一个匿名内部类,很随意的写法。更像json
每个属性之间使用,隔开
最后一个属性最好不加逗号,防止兼容性不好的浏览器报错
使用一个不存在的对象属性不会报错,只会undefined
甚至还可以动态删减属性
居然还可以直接delete了
可以动态添加属性
直接这样就行。有点跟c++的map异曲同工了
所以这样是达咩的,传"name"这样就行了
还可以索引对象键值
感受一下这两个的差别。in的话包含父类有没有。hasOwnProperty只考虑自身
Map
'use strict';let map=new Map();
map.set('Tom',80);
map.set('Tim',90);
map.set('Mary',70);
map.set('Met',100);
console.log(map.get('Tom'));
console.log(map);
map.forEach((val,key) => {console.log(`${val} ${key}`);
});
Set
'use strict';let set=new Set();
set.add(1);
set.add(2);
set.add(3);
set.add(4);
set.add(1);
set.delete(2);
console.log(set);
set.forEach(element => {console.log(element);
});
函数
方法是在对象里有的,函数在外面有
js的函数长这个样
非常简单的定义
有两种定义方式
js本身没有类型,且参数个数随意,故完全不需要重载。
如果对js使用重载的话
如上两图,不管在哪调用,都只会执行第二个函数,第一个函数被完全覆盖
感受一下函数也是变量的感觉
关键字arguments是一个数组,可以获取所有传进来的参数,包含我们函数定义上的参数。
但有时候,我们想获取除了函数定义外的其他参数,这应该不大能用arguments[参数个数]来访问,毕竟这样引入了一个未经定义的const数字。
因而,es6就有了一个新特性rest,可以获取除了函数上面的参数的参数数组。
这样写
不过其实rest可以用任意标识符表示,关键还是那三个...
变量的作用域
作用域跟别的差不多。函数体内的变量出了函数体就被清除了。
并且有个函数的嵌套。里面的可以用外面的,外面的不能用里面的,跟其他语言也差不多
说明左图y已经被定义了,就是没有赋值
说明js会提升var声明的变量的作用域,只要在一个块内进行定义,那它的作用域就是整个块而不是它之后块内的部分。但是注意,只是提前了定义,赋的值不会提前。
所以建议全部变量在块开头统一定义声明,不要虾搞
但是let定义的变量不会提升作用域
关于let、const、var JavaScript 中的 Var,Let 和 Const 有什么区别
默认全局变量绑定在全局对象window里而且系统默认只有这一个全局变量。
具体工程中,为了防止两个js文件全局变量相互覆盖的情况,我们常会自己开拓一个新的全局变量域(创建一个var类型空对象),你自己的代码都放在里面
比如说jquery就是这么干的
函数体内的变量出了函数体就被清除了。但是你如果想用那些变量咋办?这就有了js的新特性:闭包
方法
就是把函数当成一个字段,放进去
var obj={name:"aaa",ID:"123456",report:function(){console.log(this.name+" "+this.ID);},}
obj.report();
甚至这样也行
function reportMessage(){console.log(this.name+" "+this.ID);
}var obj={name:"aaa",ID:"123456",report:reportMessage,
}
obj.report();
这样的话就不能调原来那个了。。。原因:this指向使用它的对象。现在是window在使用它
但是在js中可以使用apply控制this的指向,并且使用一次apply相当于调用
Date类
直接打印date对象可以获取当前时间。
也可以用方法获取年year月month日date星期day(0~11)时hour分minute秒second等等等,
还有特殊的是时间戳
可以通过构造方法与标准时间转化
JSON
JavaScript object notation
早期,所有文件传输习惯用XML文件。那个东西的语法比较复杂,能把你学shi
于是json文件这种语法简单的就诞生了
在js中,所有东西都是对象,都可以用json来表示
json可以联系前端与后端的数据交流
json文件的格式:
1.对象/map(键值对)用{}
2.数组用[]
3.所有键值对都用key:value,
json里面的value也可以是json
value的两种访问方式
// var obj={
// name:'cat',
// ID:1234567,
// date:"today",
// }// var jsonFile=JSON.stringify(obj);
// console.log(obj)
// console.log(jsonFile)var obj=JSON.parse('{"name":"cat","ID":1234567,"date":"today"}');
console.log(obj)
json文件与obj的相互转化
、
也可以用eval函数
将json的数据读入到表格
json如此方便,因而,要进行数据传输,我们后端只需想怎么把数据加工变成json文件传输到前端就行,大大简化了
面向对象编程
js的面向对象有点区别,js里面的类是原型对象
js的继承得这样写
var vehicle={name:"vehicle",ID:"#12345",run:function(){console.log(this.name+" is running!");},
}var car={name:"car",
}
car.__proto__ = vehicle;
car.run();
而且注意只能有一个爸爸。再弄一个爸爸会造成覆盖
而且父类一定得写在子类上面
js还可以用class继承
比如说
以前的es5
function相当于类的构造器,要添加方法得像下图这样
function Student(name){this.name=name;
}
Student.prototype.report = function(){console.log("I am student "+this.name);
}new Student("Jack").report();
es6后支持以下语法了
class Student{constructor(name){this.name=name;}report(){console.log("I am student "+this.name);}
}let student = new Student("Jack");
student.report();
甚至还可以extends ,super
操作BOM对象
js的诞生就是为了能让它在浏览器中运行,可以通过BOM操纵浏览器
BS:浏览器服务端。B:浏览器
BOM:浏览器对象模型
1.window对象
代表浏览器窗口,可以获取浏览器当前的长宽、让浏览器弹窗等等
代表全局作用域,所有js脚本中的全局变量都是它的属性
开网页,第一个参数是网址,第二个参数是打开方式
关闭
确认框
有返回值
感觉常与iframe联合使用
eval函数的作用:将字符串解释为一串js代码并执行
2.navigator对象
封装了浏览器的信息,比如浏览器版本、用户电脑信息等等等
大多数时候用不上,因为会被人为修改。不建议使用这些属性来判断和编写代码。有种安全性的感觉
3.screen
电脑屏幕大小
4.location
代表当前页面的URL信息,有时候用来实现重定向
重要属性:host(主机)、href(当前地址)、protocol(协议)
方法:reload(刷新网页)
可以用这个设置一个新地址
你如果在百度代码中写上这行,然后填上你的网页网址,所有访问百度的人都会跳转到你的网站
5.document
代表当前页面(文档)信息 HTML DOM文档树
可以获取网页中的所有文档树结点
比如说
<body><dl id="app"><dt>JAVA</dt><dd>JAVASE</dd><dd>JAVAEE</dd></dl>
</body>
可以有id选择器、标签选择器、类选择器
可以获取结点就可以动态地增删结点
document还可以获取网页的cookie
6.history
代表浏览器的历史记录
这种后退前进网页
不建议使用
操作DOM对象
DOM:文档对象模型
html其实就是一棵树,我们说白了就是在操作这棵树
html实际上就是DOM树形结构
有四个操作
1.更新 更新dom结点 可以动态地用js给标签结点添加某个属性
2.遍历(查找) 得到dom结点
3.删除 删除dom结点
4.添加 添加一个新的结点
要操作一个dom结点,就必须获得这个dom结点
三种获取方式
var h1=document.getElementsByTagName("h1");
var p1=document.getElementById("p1");
var p2=document.getElementsByClassName("p2");
!!!注意,byTag和byClass都是得到的Collection,要访问其中某一个得用下标,[0]这种
获取孩子节点
下一个
这些是原生代码很烦,以后尽量使用JQuery
更新
属性使用字符串包裹,-转为驼峰命名
innerText不会被转移,innerHTML会解析文本标签
可以通过js代码操纵css效果
可以用setAttribute来赋值,key,value 这样的参数,来更新或添加标签的属性。建议以后都用这样的写法。newP.id=....这种就别用了
删除
删除节点的步骤:先获取父节点,再通过父节点删除自己
创建
我们如果获取了一个DOM节点,如果它是空的,我们可以用innerText或者innerHTML来增加元素。但是如果非空,用上面那两个就会覆盖,就不能这么搞了
把已有的节点作为子节点追加到另一个节点,一般用append追加
<body><div id="js">JAVASCRIPT</div><div id="father"><div id="JAVA">JAVA</div></div>
</body>
创建一个新标签实现插入
注意如果把append改成这一句
newP是显示不出来的,很奇怪
常用事件
注册事件的两种方式
方式1,直接在标签内事件句柄写上。
其中,事件函数被称为回调函数(callback函数)。自己写的代码,但是是其他程序调用,这种函数叫回调函数
方式2,用纯js代码实现事件的注册
相当于加一个属性。注意别加括号也别加引号
也可以使用匿名回调函数
以后事件注册的统一写法:在window.onload内统一注册
获取键值
void运算符
比如说
void的用处是,执行小括号中的表达式,但不返回任何结果。不是“”,也不是undefined,就是纯纯啥也没有
JavaScript入门记录相关推荐
- JavaScript学习记录01快速入门、基本语法、严格检查模式
文章目录 JavaScript学习记录01快速入门.基本语法.严格检查模式 1.1什么是JavaScript 1.2认识JavaScript框架 1.3快速入门 1.4基本语法入门 1.5数据类型简介 ...
- JavaScript入门(part7)--流程控制
学习笔记,仅供参考,有错必纠 参考自:pink老师教案 文章目录 JavaScript入门 流程控制 流程控制概念 顺序流程控制 分支流程控制 三元表达式 switch分支流程控制 for循环 双重f ...
- JavaScript入门笔记
第一章 JavaScript语法 1.1 初识JavaScript 1.3 数据类型 1.4 string和boolean类型 1.5 算数操作符 第二章 JavaScript流程控制语句 2.1 循 ...
- JavaScript入门 Day1
课程介绍 编程语言介绍(了解) JavaScript简介(了解) JavaScript入门 运算符(掌握) JavaScript基本语法(掌握) 位运算符(了解) 1.编程语言 1.1.什么是编程语言 ...
- 零基础JavaScript入门(第三天)
一.JavaScript 流程控制-循环 1.循环 循环目的 :实际问题中,有许多具有规律性的重复操作,因此在程序中要完成这类操作就需要重复执行某些语句 JS 中的循环 在Js 中,主要有三种类型的循 ...
- JavaScript 入门知识点总结
提示:笔者本身具有多种编程语言基础,因此本文只是简单记录一下JavaScript一些特性. 完全零接触的朋友可以绕道,也可以硬刚! 本文是参考慕课网的课程,点击链接可直达 笔者认为,学习编程最重要的必 ...
- JavaScript入门(二)
JavaScript入门(二) 哔哩哔哩链接:https://www.bilibili.com/video/BV1YW411T7GX?spm_id_from=333.999.0.0 七.代码讲解部分 ...
- JavaScript 入门(上)
目录 一.JavaScript简介 二.JavaScript的特点 1.动态改变页面内容 2.动态改变网页的外观 3.验证表单数据 4.响应事件 三.内容 1.JavaScript简介 一.JavaS ...
- 经典的JavaScript入门书
经典的 JavaScript 入门书 --<JavaScript基础教程(第7版)> 原版销售累计超过 150 000 册! 欢迎你使用 JavaScript !使用这种容易上手的程序设计 ...
最新文章
- 直播报名 | NVIDIA公开课:Style-Gan的架构与实现
- Matlab基本函数-hidden函数,matlab中hidden off有什么用?
- 30-seconds-code——math
- 这短短几行代码价值一万
- 用.net core 写后端—— c++外的另一种选择?
- 为什么TCP是三次握手
- python线程任务run_Python线程类| 带有示例的run()方法
- springboot 的 RedisTemplate 的 execute 和 executePipelined 功能的区别redis
- org.apache.catalina.LifecycleException: Protocol handler start failed
- 惠普收购Palm意在遏制同系竞争
- 基于隐式调用风格的kwic实现
- UVALive(LA) 4487 Exclusive-OR(带权并查集)
- 实现财务自由的十大步骤
- 00007__js自执行函数(function(){})()前加个分号是什么意思
- 黑帽SEO常用作弊手法分析
- 水处理过滤器运行特性及选择原则浅谈
- android 剪切板监听_Android剪贴板操作
- 营销/网赚/seo/淘宝资料收集下载
- ASP新闻发布网站(一) 首页
- 启嘉春秋:《三字经》
热门文章
- PHP登陆注册步骤,使用PHP实现用户登录和注册的功能
- 可爱的小老鼠计算机教案,中班美术《可爱的小老鼠》
- HanLP 基于SVM支持向量机 进行 ChnSentiCorp 情感分析
- 中国java水平在全世界什么水平
- Renci.SshNet.Common.ScpException: scp: error: unexpected filename
- 在微信公众号上显示指定位置的地图
- 如何在Windows 8 中关闭用户账户控制(UAC)
- 【系统集成项目管理工程师】—挣值管理
- html+css+js制作结婚倒计时网页模板(520/七夕情人节/程序员告白)
- Feeder 一款 Mac 上的 RSS 阅读器,更优雅地跟踪最新的新闻和博客文章