JavaScript是一种属于网络的脚本语言,有它自身的基本数据类型、表达式和算术运算符及程序的基本程序框架,已经被广泛用于Web应用开发。
更重要的是JavaScript同HTML5一样具有跨平台性。
简单是JavaScript的又一大优点。
随着服务器的强壮,引擎如V8和框架如Node.js的发展,及其事件驱动及异步IO等特性,JavaScript也逐渐被用来编写服务器端程序
一个合格和后端程序员, 必须要精通javascript !
可能你在后面, 汇合js经常打交道!
全文是博主速成js记得笔记! 可能比较粗略!
后端js过一遍就好,能看懂js就行,后期直接跳到VUE
JavaScript 是脚本语言,是一种解释性脚本语言(代码不进行预编译)
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行
JavaScript 很容易入门
HTML页面中的JavaScript
必须在标签中
<!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>
浏览器控制台的使用:
浏览器就是js的编译器!
字符串:
大部分在java中能用的在js中也能用
支持EL表达式!
尽力避免浮点数进行运算!
js数组是可变长的!
js一个数组就把动态数组,栈,队列都实现了。。
支持slice()
类型强转:
js真的就太随意了!
'use strict';
for循环遍历数组:
注意js编译的时候, 浏览器会在每一行加上一个分号, 所以 有时候不要随意换行
和之前的语言很像:
有个类似命名空间(namespace)的:
注意js中有一个this这个比较坑! 注意一下, 可以通过==apply()==这个方法来解决!
json和js对象的区别:
和一般的面向对象有点点区别!
有_proto_
这个实例类的方式!
也有class
继承 这个(一般就用这个方式来)
创建类:
这样一看就是java的亲兄弟!
继承:
分别有window navigator screen location document history
这几个对象
但是大多数我们不建议使用navigator
重要的就是window和location和document
window:
location:
document:
贼牛, 下面会讲!
history:
当网页被加载时,浏览器会创建页面的文档对象模型(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 的标准对象模型和编程接口。它定义了:
就类似java中的对象, 只是网页帮你创建好了
dom的一些简单方法戳这里
例:
通过标签名查找 HTML 元素
DOCTYPE html>
<html>
<body>
<h1>通过 id 查找 HTML 元素h1>
<p id="intro">Hello World!p>
<p>本例演示 <b>getElementsByIdb> 方法。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>querySelectorAllb> 方法。p>
<p id="demo">p>
<script>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = 'class ="intro" 的第一段(索引 0):' + x[0].innerHTML + "
"+ 'class ="intro" 的第二段(索引 1):' + x[1].innerHTML;
script>
body>
html>
不经可以更新内容, 还可以更新属性
插入:先简单省略带过!
DOCTYPE html>
<html lang="CN-zh">
<head>
<meta charset="UTF-8">
<title>nihaotitle>
head>
<body>
<p id="js">jsp>
<div id="list">
<p id="java">Javap>
<p id="python">Pythonp>
<p id="scheme">Schemep>
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)就暂且写到这里!
后续有补充!
欢迎点赞关注哦!
也欢迎到访我的博客!
同样欢迎友链互加!
小小的博客传送门!