后端速成JavaScript

前言:

JavaScript是一种属于网络的脚本语言，有它自身的基本数据类型、表达式和算术运算符及程序的基本程序框架，已经被广泛用于Web应用开发。

更重要的是JavaScript同HTML5一样具有跨平台性。

简单是JavaScript的又一大优点。

随着服务器的强壮，引擎如V8和框架如Node.js的发展，及其事件驱动及异步IO等特性，JavaScript也逐渐被用来编写服务器端程序

一个合格和后端程序员, 必须要精通javascript !

可能你在后面, 汇合js经常打交道!

全文是博主速成js记得笔记! 可能比较粗略!

后端js过一遍就好，能看懂js就行，后期直接跳到VUE

基本概念

概念

JavaScript 是脚本语言，是一种解释性脚本语言(代码不进行预编译)
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行
JavaScript 很容易入门

作用

为网页添加各式各样的动态功能,
为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的

用法

HTML页面中的JavaScript

必须在<script>标签中

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>JavaScript的用法</title> <script>alert("hello JavaScript1-1");</script><script>alert("hello JavaScript1-2");</script></head><body><script>alert("hello JavaScript2-1");</script><script>alert("hello JavaScript2-2");</script></body>
</html>
<script>alert("hello JavaScript3-1");
</script>
<script>alert("hello JavaScript3-2");
</script>

从上往下,依次显示!

外部的JavaScript

myScript.js文件 //外部js文件中不能有script标签，直接编写JavaScript脚本代码即可
function fun1(){alert("hello JavaScript");
}

<!DOCTYPE html><html><head><script src="js/myScript.js"/><!--当存在script的外链,就不能再有其他script标签--></head><body><script>fun1();//调用脚本中的内容s </script></body>
</html>
外部文件引入一次即可，在head或者body中都可以。

标签属性中的JavaScript

<a href="javascript:alert('ok')">登录</a>

浏览器控制台的使用:

特点:

IDE:

浏览器就是js的编译器!

数据类型:

字符串：

大部分在java中能用的在js中也能用

支持EL表达式!

尽力避免浮点数进行运算！

js数组是可变长的!

js一个数组就把动态数组，栈，队列都实现了。。

支持slice()

类型强转:

js真的就太随意了！

严格检查模式

    'use strict';

流程控制:

for循环遍历数组:

函数:

注意js编译的时候, 浏览器会在每一行加上一个分号, 所以有时候不要随意换行

变量作用域:

和之前的语言很像:

有个类似命名空间(namespace)的:

注意js中有一个this这个比较坑! 注意一下, 可以通过==apply()==这个方法来解决!

内部对象:

Date:

Json:

json和js对象的区别:

面向对象:

和一般的面向对象有点点区别!

有_proto_这个实例类的方式!

也有class继承这个(一般就用这个方式来)

创建类:

这样一看就是java的亲兄弟!

继承:

BOM:

分别有window navigator screen location document history这几个对象

但是大多数我们不建议使用navigator

重要的就是window和location和document

window:

location:

document:

贼牛, 下面会讲!

history:

DOM文档:

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被结构化为对象树：

对象的 HTML DOM 树:

通过这个对象模型,js可以有以下的"权力":

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

什么是 HTML DOM？

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件

就类似java中的对象, 只是网页帮你创建好了

dom的一些简单方法戳这里

例:

通过标签名查找 HTML 元素

<!DOCTYPE html>
<html>
<body>
<h1>通过 id 查找 HTML 元素</h1>
<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementsById</b> 方法。</p>
<p id="demo"></p>
<script>
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML =
"来自 intro 段落的文本是：" + myElement.innerHTML;
</script>
</body>
</html>

对元素的详细操作戳这里

通常用var x = document.querySelectorAll("p.intro");来查找元素

<!DOCTYPE html>
<html>
<body>
<h1>按查询选择器查找 HTML 元素</h1>
<p>Hello World!</p>
<p class="intro">DOM 很有用。</p>
<p class="intro">本例演示 <b>querySelectorAll</b> 方法。</p>
<p id="demo"></p>
<script>var x = document.querySelectorAll("p.intro");document.getElementById("demo").innerHTML = 'class ="intro" 的第一段（索引 0）：' + x[0].innerHTML + "<br>"+ 'class ="intro" 的第二段（索引 1）：' + x[1].innerHTML;
</script>
</body>
</html>

不经可以更新内容, 还可以更新属性

插入:先简单省略带过!

<!DOCTYPE html>
<html lang="CN-zh">
<head><meta charset="UTF-8"><title>nihao</title>
</head>
<body><p id="js">js</p>
<div id="list"><p id="java">Java</p><p id="python">Python</p><p id="scheme">Scheme</p>
</div>
<script>'use strict';var js = document.getElementById('js');var list = document.getElementById('list');console.log(list);console.log(js);list.appendChild(js);
</script>
</body>
</html>

删除通过父节点删除子节点!

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true

表单:

总结就是获取值, 然后将它提交它

方式一:通过button

方式二:通过form的属性onsubmit

笔者今日(2022年4月15日21:17:45)就暂且写到这里!

后续有补充!

欢迎点赞关注哦！
也欢迎到访我的博客！
同样欢迎友链互加!
小小的博客传送门!