网页代码基础知识
文章目录
- 网页代码
-
- javascript
-
- 函数
- 打印
- 关键字
- 作用域
- 数据类型
- 对象
- 事件
- 字符串
- 数组
- 比较
- 正则表达式
- *箭头函数
- JSON
- 调试
- JavaScript HTML DOM
-
- 方法
- 文档
- 元素
- 表单
- 事件
- 事件监听程序
- AJAX
-
- 如何工作
- XMLHttpRequest对象
- JQuery
-
- 查找
- 内容
- 隐藏和显现
- BUG
- reference
网页代码
javascript
web浏览器执行
函数
函数相关的，则牵涉到使用和实现。函数实现怎么写？有以下三种写法：
-
head
DOCTYPE html> <html> <head> <script> function myFunction() { document.getElementById("demo").innerHTML = "段落被更改。"; } script> head> <body> <h1>一张网页h1> <p id="demo">一个段落p> <button type="button" onclick="myFunction()">试一试button> body> html> -
body
DOCTYPE html> <html> <body> <h1>A Web Pageh1> <p id="demo">一个段落p> <button type="button" onclick="myFunction()">试一试button> <script> function myFunction() { document.getElementById("demo").innerHTML = "段落被更改。"; } script> body> html> -
外部脚本xx.js
<script src="myScript1.js">script> <script src="/js/myScript1.js">script> <script src="https://www.w3school.com.cn/js/myScript1.js">script>
打印
- window.alert() 警告框
- document.write() 写入HTML输出
- document.getElementById(“xxxx”).innerHTML 写入HTML元素
- console.log() 浏览器控制台
注意 元素内使用document.write()，会删除已有的HTML
DOCTYPE html>
<html>
<body>
<h1>我的第一张网页h1>
<p>我的第一个段落p>
<button onclick="document.write(5 + 6)">试一试button>
body>
html>
关键字
- var 变量
- function 函数
- return 退出函数
- let 块作用域变量
- const 常量
作用域
-
全局作用域
-
函数作用域
-
块作用域{}
必须用let声明变量，否则javascript中没有块作用域,以下例子帮助理解：
var x = 10; // 此处 x 为 10 { var x = 6; // 此处 x 为 6 } // 此处 x 为 6var x = 10; // 此处 x 为 10 { let x = 6; // 此处 x 为 6 } // 此处 x 为 10注意：
let i = 7; for (let i = 0; i < 10; i++) { // 一些语句 } // 此处 i 为 7
数据类型
-
数字、字符串、数组、对象
var length = 7; // 数字 var lastName = "Gates"; // 字符串 var cars = ["Porsche", "Volvo", "BMW"]; // 数组 var x = {firstName:"Bill", lastName:"Gates"}; // 对象 -
undefined,没有值的变量 没有找到
函数返回值默认返回值为undefined
-
null,空值 空对象
undefined和null的区别是什么？
null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。
总的来说
null和undefined都代表空，主要区别在于undefined表示尚未初始化的变量的值，而null表示该变量有意缺少对象指向。-
undefined -
- 这个变量从根本上就没有定义
- 隐藏式 空值
-
null -
- 这个值虽然定义了，但它并未指向任何内存中的对象
- 声明式 空值
-
对象
var person = {
firstName: "Bill",
lastName: "Gates",
id: 678,
fullName : function(){
return this.firstName + "" + this.lastName;
}
}
-
this
<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是？</button><button onclick="this.innerHTML=Date()">现在的时间是？</button>
事件
-
事件是发生在HTML元素上的”事情“。当在HTML页面中使用JavaScript时，JavaScript能够”应对“这些事件。
引出问题：事件和函数的区别？
事件是指开关触发，然后完成指定动作；而函数就是指定动作的定义。
字符串
-
属性
length长度
-
方法
var str = "The full name of China is the People's Republic of China."indexOf()返回指定文本首次出现的位置
var pos = str.indexOf("China"); //pos 17 var pos = str.indexOf("China", 10); //第二个参数指定位置。默认从0开始lastIndexOf()返回指定文本最后一次出现的位置
var pos = str.lastIndexOf("China"); //pos 51 var pos = str.lastIndexOf("China", 10); //第二个参数指定位置。默认从0开始search()返回指定文本匹配的位置
var pos = str.search("China"); //pos 17slice()返回指定下标的字符串，区间为左闭右开
var res = str.slice(0, 2); //"Th" [0, 2) var res = str.slice(2); //"e full name of China is the People's Republic of China." 长度不指定的时候，默认到结束 var res = str.slice(-1); //"." 负数代表从后计数，注意没有-0一说，因此最后一位为-1.substring()效果同上，但是不支持负数。
substr()返回指定下表的字符串，第二个参数为指定长度
var res = str.substr(0, 3); //"The"repalce()替换字符串中指定的值
var res = str.replace("123", "abc"); //123456123 --> abc456123 //注意：使用正则表达式，不要带引号 var res = str.replace(/123/g, "abc"); //g表示全局替换 123456123 --> abc456abctoUpperCase()字符串转换成大写
var res = str.toUpperCase();toLowerCase()字符串转换成小写
var res = str.toLowerCase();charAt()返回字符串指定下标的字符串
var res = str.charAt(0); //返回Tsplit()切割字符串，转换成数组
var res = str.split(","); // 可以直接res[i]打印
数组
var cars = ["Saab", "Volvo", "BMW"];
var cars = new Array("Saab", "Volvo", "BMW");
-
关联数组
指的是使用命名索引的数组，而所谓的命名索引就是区别于数字索引的字符串索引，详情可见示例：
var person = []; person["firstName"] = "Bill"; person["lastName"] = "Gates"; person["age"] = 62; var x = person.length; // person.length 将返回 0 var y = person[0]; // person[0] 将返回 undefinedjavascript不支持关联数组，因此这种形式是undefined的。而命名索引，可以想到对象的成员引用。
-
方法
toString() 将数组转换成数组值。(默认分隔符：逗号)
var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo").innerHTML = fruits.toString(); //Banana,Orange,Apple,Mangojoin()同上，但是可以指定分隔符(此分隔符是输出的字符串的分隔符)
var fruits = ["Banana", "Orange","Apple", "Mango"]; document.getElementById("demo").innerHTML = fruits.join(" * "); //Banana * Orange * Apple * Mangopop()出栈 删除最后一个元素，返回值为栈顶元素
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.pop(); // 从 fruits 删除最后一个元素（"Mango"）push()入栈 添加一个新的元素，返回值为长度
var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = fruits.push("Kiwi"); // x 的值是 5
比较
-
=== 比较值和类型是否相等，即严格等于（不会进行类型转换）
var a = 3; var b = "3"; /* a==b 返回 true a===b 返回 false 因为a,b的类型不一样 ===用来进行严格的比较判断 */
正则表达式
*箭头函数
只针对只有一条语句时才有效
hello = function() {
return "Hello World!";
}
hello = () => "Hello World!";
hello = (val) => "Hello " + val;
hello = val => "Hello " + val; //只有一个参数，可以省略括号
注意：
对于常规函数，this表示调用该函数的对象；
对于箭头函数，this表示函数的拥有者。
JSON
JavaScript Object Notation
{
"employees":[
{"firstName":"Bill", "lastName":"Gates"},
{"firstName":"Steve", "lastName":"Jobs"},
{"firstName":"Alan", "lastName":"Turing"}
]
}
-
语法规则
-
数据是名称/值对
-
数据由逗号分隔
-
花括号保存对象
-
方括号保存数组
-
就其形式上来看，可以看成对象数组（结构体数组）。因此json数据可以转换成本地的javascript对象。
将JSON文本转换为JavaScript对象
JSON通常用法是从web服务器读取数据，然后在网页中显示数据。
- JSON.parse()分解字符串
<script>
var text = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"Steve","lastName":"Jobs" },' +
'{"firstName":"Elon","lastName":"Musk" }]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
script>
调试
- 网页调试器，设置断点，变量的值可以直接鼠标查看。
- debugger或者断点
JavaScript HTML DOM
当页面加载时，浏览器会创建页面的文档对象模型Document Object Model
- html
- head
- title
- body
- a
- h1
- head
方法
在DOM中，所有HTML元素都被定义为对象
属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。
方法是您能够完成的动作（比如添加或删除 HTML 元素）。
在上面的例子中，
getElementById是方法，而innerHTML是属性。
文档
DOM文档对象是网页中所有其他对象的拥有者，文档对象代表着网页。如果你想访问HTML页面中的任何元素，那么你必须先从访问document对象开始。(这就是为什么所有方法调用前面总是出现document的原因了，因为所有的变化都是document对象的改变)
document.getElementById(id) //通过元素 id 来查找元素
document.getElementsByTagName(name) //通过标签名来查找元素
document.getElementsByClassName(name) //通过类名来查找元素
document.getElementById(id).onclick = function(){code} //向 onclick 事件添加事件处理程序
元素
查找所有元素
var x = document.getElementsByTagName("p");
表单
DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
script>
head>
<body>
<h1>JavaScript 验证h1>
<form name="myForm" action="/demo/html/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
form>
body>
html>
表单为空验证，如果字段为空，则required属性会组织提交此表单。
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
form>
问题：
搜索的信息提交到了哪里去了？
https://www.baidu.com/s
搜索的信息是如何传递过去的？
wd=bjsxt&rsv_spt=1
https://www.baidu.com/s?wd=bjsxt&rsv_spt=1？之前代表的是提交的地址URL
？之后代表的是携带的参数；参数和参数之间使用&进行分割；参数的形式都是name=value
- action 数据提交地址
- method 提交方式get/post
- onsubmit
事件
- onclick
- onchange
- onload/onunload
- onmouseover/onmouseout
事件监听程序
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
head>
<body>
<input id="myButton" type="button" value="点我" onclick="alert('普通事件1');">
<script type="text/javascript">
document.getElementById("myButton").onclick=function () {
alert('普通事件2'); //第二种写法 会将上面的alert('普通事件1')覆盖
}
//事件监听添加两个事件. 监听可以对同一件事情添加多个监听的事件
document.getElementById("myButton").addEventListener('click', a);
document.getElementById("myButton").addEventListener('click', b); //不能用onclick
function a() {
alert('事件监听1'); //执行
}
function b() {
alert('事件监听2');//执行
}
script>
body>
html>
JavaScript事件绑定和事件监听的区别？
1.传统注册事件：后面的事件会覆盖前面的事件 事件监听注册事件：addEventListener可以对同一个元素绑定多个事件（里面的事件类型是字符串 ，必定加引号 ，而且不带on），执行顺序从上到下依次执行
2.传统解绑方式使用的是指针指向null，举例：element.οnclick=null 事件监听采用removeEventListener来删除事件，注意事项：如果addEventListener添加的是一个匿名函数，则removeEventListener不能移除匿名函数，故可以给函数命名或使用外部函数
3.传统事件一般只能得到冒泡阶段；而事件监听有冒泡阶段，也可以有捕获阶段（有些事件是没有冒泡的，比如onblur onfocus onmouseenter onmouseleave）
HTML DOM中有两种事件传播的方法(事件流)：冒泡和捕获。
- html（外）
- body
- ul
- li
- p
- a（内）
useCapture = true 捕获 从外到内
useCapture = false 冒泡 从内到外
AJAX
Asynchronous JavaScript And XML
如何工作
- 网页中发生一个事件（页面加载、按钮点击）
- 由 JavaScript 创建 XMLHttpRequest 对象
- XMLHttpRequest 对象向 web 服务器发送请求
- 服务器处理该请求
- 服务器将响应发送回网页
- 由 JavaScript 读取响应
- 由 JavaScript 执行正确的动作（比如更新页面）
XMLHttpRequest对象
GET和POST
-
GET
获取资源，用来获取、查询数据，不会修改服务器的数据。可以缓存。
-
POST
可以向服务器发送修改请求，进行数据的修改。例如，写评论。不可以缓存。
JQuery
JavaScript库，旨在处理浏览器不兼容并简化HTML DOM操作，事件处理等。
查找
$(“#xxx”)
var myElement = document.getElementById("id01");
var myElements = document.getElementsByTagName("p");
var myElements = document.getElementsByClassName("intro");
var myElement = $("#id01");
var myElements = $("p");
var myElements = $(".intro");
内容
//设置文本内容
myElement.text("Hello China!"); //JQuery
myElement.textContent = "Hello China!"; //JavaScript
//获取其文本内容
var myText = myElement.text(); //JQuery
var myText = myElement.textContent || myElement.innerText; //JavaScript
//设置HTML内容
var myElement.html("Hello World
"); //JQuery
var myElement.innerHTML = "Hello World
"; //JavaScript
//获取HTML内容
var content = myElement.html(); //JQuery
var content = myElement.innerHTML; //JavaScript
html内容和text内容的区别？
<p title="选择你最喜欢的男孩子."><strong>你最喜欢的男孩子是？strong><p>var p_html = $("p").html(); //获取元素中的HTML代码 alert(p_html); //打印
元素的HTML代码
输出：你最喜欢的男孩子是？
var p_text = $("p").text(); //获取<p>元素的文本内容 alert(p_text); //打印<p>元素的文本内容输出：你最喜欢的男孩子是？
隐藏和显现
//隐藏HTML元素
myElement.hide(); //JQuery
myElement.style.display = "none"; //JavaScript
//显示HTML元素
myElement.show(); //JQuery
myElement.style.display = ""; //JavaScript
BUG
修改参考
reference
点击这里
此篇为学习笔记，针对问题，自上而下解决问题，比重新再学一遍，效率更高。