@TOC
- 编程:就是计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程。
- 计算机程序:就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌握的语言来编写的,所以人们要控制计算机一定要通过计算机语言向计算机发出命令。
JavaScript
该网站写的笔记较好,建议看看:廖雪峰的官方网站
JavaScript = ECMAScript + DOM + BOM1、 概述
JavaScript是一门世界上最流行的脚本语言,不同于Java。开发周期:网景公司-10days
引入js文件:script标签必须成对出现不用显示定义type,页面默认是javascript<script src="js/qt.js"> 。。。 </script>
<script type="text/javascript"></script>
2、 基本语法入门
2.1 定义变量
变量就是一个容器,用来存放数据的,方便我们以后使用里面的数据
变量类型 变量名 = 变量值var num = 1; var name = "名字";
2.2 浏览器控制台使用在这里插入图片描述
分别是:Elements
:跑网页Console
:调试JSSources
:打断点调试Network
:抓包Application
:查看网站的Cookies
2.3 数据类型
1. 变量命名:以$或_开头标识
2. number:
- js不区分小数和整数
- NaN:not a number
- Infinity:表示无限大
3. 字符串:'abc',''abc''
3.1、转义字符
3.2、多行字符串编写
// tab键上esc键下的飘
var msg = `hello
world
haha
哈哈`
3.3、模板字符串
var name = “Mark”;
var msg = `h你好,${
name}`
3.4、字符串长度str.length
3.5、字符串的可变性,不可变性
3.6、大小写转换str.toUpperCase()
str.toLowerCase()
3.7、索引下标 str.indexOf('s')
3.8、截取字符串 [ )str.substring(1,3)
4. 布尔值:true,false
5. 逻辑运算:&&,||,!
18 == '18'
true
短路运算
逻辑与短路运算
若表达式1为真,则返回表达式2
若表达式1为假,则返回表达式1
逻辑或短路运算
若表达式1结果为真,则返回的是表达式1
若表达式1结果为假,则返回的是表达式2
6. 比较运算符
- == 等于(类型不一样,值一样,也会判断为true)
- === 绝对等于(类型一样,值也一样,结果为true)`尽量使用这种比较`
须知:
- NaN === NaN,这个与所有的数值都不相等,包括自己
- 只能通过isNaN(NaN)来判断这个数是不是NaN
- 尽量避免使用浮点数进行运算,存在精度问题
7. null空值和undefined未定义
8. 数组及其方法
数组就是一组数据的集合,存储在单个变量下的优雅方式。
==数组中可以放置不同类型的数据对象,取数组下标越界时报undefined==
8.1、长度arr.length
假如给arr.length赋值,数组大小就会发生变化,如果赋值过小,元素就会丢失
8.2、获得元素下标索引arr.indexOf(s)
字符串1和数字1是不同的
8.3、截取array的一部分,返回一个新数组slice()
,类似于字符串中的str.substring(1,3)
8.4、压入到尾部push
,弹出尾部的一个元素pop
8.5、压入到头部unshift
,弹出头部的一个元素shift
8.5、排序 sort()
顺序排序:a-b
逆序排序:b-a
8.6、元素反转 reverse()
8.7、拼接函数concat
concat()并没有修改数组,只是会返回一个新的数组
arr=["a","b","c"]
(3) ["a", "b", "c"]
arr.concat([1,2,3])
(6) ["a", "b", "c", 1, 2, 3]
arr
(3) ["a", "b", "c"]
8.9、连接符 join
打印拼接数组,使用特定的字符串连接
arr
(3) ["a", "b", "c"]
arr.join("-")
"a-b-c"
8.10、多维数组
arr1 = [[1,2],[2,3],[3,4]]
(3) [Array(2), Array(2), Array(2)]0: (2) [1, 2]0: 11: 2length:
arr1[2][1]
4
9. 对象,对象是大括号{ },数组是中括号[ ]
1、js中的对象,格式为{...},键值对的形式,每个属性之间用逗号隔开,最后一个不需要加逗号javascript中的所有的键都是字符串,值是任意对象!
2、对象赋值
var person = {
name:"string",
age:3,
tags:['java','js']
}
使用一个不存在的对象属性,不会报错!undefined
3、动态的删减属性,通过delete删除对象的属性
delete person.name
true
4、动态的添加,直接给新的属性添加值即可
person.haha = “haha”
“haha”
5、判断属性值是否在这个对象中!xx in xxx
'age' in person
true
6、判断一个属性是否在这个对象自身拥有的hasOwnOroperty()
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true
2.4 严格检查模式strict
,必须写在javascript的第一行在这里插入图片描述
局部变量使用let定义
<script>
// 必须写在javascript的第一行
'use strict';
let i;
i = 1;
</script>
2.5 流程控制
if 判断
循环
- while 循环
- for 循环
```java
var array = ['a', 'b', 'c'];
for(let i = 0;i<100;i++){
console.log(i)
}
- forEach循环【ES5.1特性】
```java
var array = ['a', 'b', 'c'];
array.forEach(function(element) {
console.log(element);
});
- for...of循环打印值
```java
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (x of mycars)
{
console.log(x + "
")
}
- for...in循环打印index,再利用下标index获取值
```java
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (x in mycars)
{
console.log(mycars[x] + "<br />")
}
2.6 Map和Set
Map
var map = new Map([['tom',100],['jack',95],['haha',28]]);
var name = map.get('tom');// 通过key获得value
map.set('admin',123456);// 新增或修改
map.delete('tom');// 删除
console.log(name);
// 遍历
for(let x of map){
console.log(x);
}
Set:无序不重复的集合
var set = new Set([3,1,1,1,1]);
set.add(2); // 添加
set.delete(1); // 删除
console.log(set.has(3)); // 是否包含某个元素
// 遍历
for(let x of map){
console.log(x);
}
2.7、iterator
- 遍历数组
```java
var arr = [3,4,5,6]
for (var x of arr)
{
console.log(x)
}
- 遍历map
```javascript
var map = new Map([['tom',100],['jack',95],['haha',28]]);
for(let x of map){
console.log(x);
}
- 遍历set
```java
var set = new Set([3,1,1,1,1]);
for(let x of map){
console.log(x);
}
# 3、函数及面向对象
## 3.1、函数定义
定义绝对值函数
`方法一`
```javascript
function abs(x){
if(x<0){
return -x;
}else{
return x;
}
}
一旦执行到return,代表函数结束,返回结果!如果没有执行return,函数执行完也会返回结果,结果就是undefined
方法二
var abs = function abs(x){
if(x<0){
return -x;
}else{
return x;
}
}
参数问题:javascript可以传任意个参数,也可以不传递参数
但是可以手动抛出异常:
var abs = function abs(x){
if(typeof x !== 'number'){
throw 'Not a Number';
}
if(x<0){
return -x;
}else{
return x;
}
}
arguments
表示传递进来的所有参数,是一个数组!
var abs = function abs(x){
for(var i = 0;i<arguments.length;i++){
console.log(arguments[i]);
}
}
问题:因为arguments
表示传递进来的所有参数,但是我们想要使用多余的参数来进行附加操作,需要排除已有的参数:
解决:rest
获取除去当前变量之外的所有参数。rest
参数只能写在最后面,必须用...
标识
function aaa(a,b,...rest){
console.log("a="+a);
console.log("b="+b);
console.log(rest);
}
3.2、变量的作用域
- 在javascript中,var定义变量是有作用域的,假设在函数体中声明,函数体外不可以使用的。如果两个函数使用了相同的变量名,只要在函数内部,就不冲突。
- 函数查找变量从自身函数开始,由内向外查找,假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量。
alert()
这个函数本身也是一个window
变量var x ="xxx"; window.alert(x); var old_alert = window.alert; // old_alert(x); window.alert=function(){ }; // alert(123)会失败 window.alert(123); // alert() 恢复 window.alert = old_alert; window.alert(454);
- 规范:由于所有的全局变量都会帮到我们的window上,如果不同的js文件,使用了相同的全局变量,会产生冲突->如何解决呢?我们把自己的代码全部放入自己定义的唯一空间名字中,降低全局命名冲突的问题。
// 唯一全局变量 var space = { } // 定义全局变量 space.name = '名字'; space.add = function(a,b){ return a+b; }
- 局部作用域
let
,解决局部作用域冲突问题!==建议使用== - 常量
const
,用全部大写字母命名的变量。var x ="xxx"; window.alert(x); var old_alert = window.alert; // old_alert(x); window.alert=function(){ }; // alert(123)会失败 window.alert(123); // alert() 恢复 window.alert = old_alert; window.alert(454);
3.3、方法
定义方法
方法就是把函数放在对象的里面,对象只有:属性 + 方法
var boy = {
name:"小明",
birth:2020,
// 方法,今年 - 出生的年份
age:function () {
var now = new Date().getFullYear();
return now-this.birth;
}
}
// 属性
boy.name
// 方法一定要带()
boy.age()
上边的代码可以拆分成:
function getAge(){
var now = new Date().getFullYear();
return now-this.birth;
}
var boy = {
name:"小明",
birth:2020,
age:getAge
};
// boy.age() ok
// getAge() NaN
在js中,可以控制this
指向,getAge.apply(boy,[]);
this指向了boy,参数为空
3.4、箭头函数【ES6新特性】
3.5、面向对象编程
原型对象,相当于继承
类:模板,原型对象
对象:具体的实例
原型__proto__
:
var Student ={
name = "student",
age = 3,
run = function(){
console.log(this.name+"run..."),
}
};
var xiaoming = {
name:"xiaoming"
};
// 原型对象,设置xiaoming的原型是Student
xiaoming.__proto__=Student;
var Bird = {
fly:function(){
console.log(this.name + "fly...");
}
};
//小明的原型 是Student
xiaoming.__proto__ = Bird;
3.6、class继承【ES6新特性】
1、定义一个类,属性,方法
//定义一个student类
class Student{
constructor(name){
this.name = name;
}
hello(){
alter("hello")
}
}
class xiaoStudent extends Student{
constructor(name,grade){
super(name);
this.grade = grade;
}
myGrade(){
alert("我是一名小学生")
}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong",1);
3.7、原型链——继承【难】
原型链
__proto__
4、常用对象
4.1、Data
标准对象: typeof 132——"number" typeof '132'——"string" typeof true——"boolean" typeof NaN——"number" typeof []——"object" typeof {}——"object" typeof Math.abs——"function"
基本使用
```
var now = new Date();// 获取当前日期
now.getFullYear(); // 年
now.getMonth();// 月,0-11
now.getDate();// 日
now.getDay();// 星期几
now.getHours();// 时
now.getMinutes();// 分
now.getSeconds();// 秒
now.getTime();// 时间戳,全世界统一
获取星期几的常用方法:
var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
weekday[now.getDay()];// 星期几
now=new Date()
Fri Aug 06 2021 17:18:24 GMT+0800 (中国标准时间)
now.toLocaleString()//注意:调用的是一个方法,不是一个属性
"2021/8/6下午5:18:24"
now.toGMTString()
"Fri, 06 Aug 2021 09:18:24 GMT"
## 4.2、JSON
> JSON,早期所有数据传输习惯使用XML文件!
- JSON(JavaScript Object Notation,JS对象简谱),是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得JSON成为理想的数据交换语言
- 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率
- 任何JS支持的类型都可以用JSON表示
格式:
- 对象都用{}
- 数组都用[]
- 所有的键值对都用key:value
-
```javascript
var xiaoming = {
name: '小明',
age: 14,
gender: true,
height: 1.65
};
// 对象转换为json字符串,{"name":"小明","age":14,"gender":true,"height":1.65}
var jsons = JSON.stringify(xiaoming);
// json字符串转换为对象,参数为json字符串
var obj = JSON.parse('{"name":"小明","age":14,"gender":true,"height":1.65}');
5、操作Dom元素【重点】
Dom :文档对象模型
核心:浏览器网页就是一个Dom树形结构
5.1、遍历Dom节点,获得Dom节点
<div id="father">
<h1>标题1</h1>
<p>p1</p>
<p>p2</p>
</div>
<script>
// 对应css选择器
var h1 = document.getElementByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementByClassName('p2');
var father = document.getElementById('father');
var childrens = father.children; // 获取父节点下的所有子节点
father.firstChild; // 获取节点的第几个位置的值或取到相邻节点的值
father.lastChild ;
</script>
5.2、更新Dom节点
获取Dom节点:
var div1 = document.getElementById('div1');
更新节点:操作文本,操作JS
- 操作文本
- 修改文本的值:
id1.innerText='新值'
- 解析HTML文本标签
id1.innerHTML='<strong>123</strong>'
- 操作JS,属性使用字符串格式
- 修改字体颜色:
id1.style.color = 'red';
- 修改字体大小:
id1.style.fontsize = '20px';
- 修改字体内边距:
id1.style.padding = '2em';
5.3、删除Dom节点.removeChild(self);
删除节点的步骤:现获取父节点,再通过父节点删除自己
删除节点的时候要注意:
在删除多个节点的时候,children是动态变化的,删除第0个位置children,第一个children会动态补上来
<div id="father">
<h1>标题1</h1>
<p>p1</p>
<p>p2</p>
</div>
<script>
var self = documnet.getElementById('p1');
var father = p1.parentElement;
father.removeChild(self);
</script>
5.4、创建和插入Dom节点
在我们获得了某个Dom节点之后,假设这个节点是空的,我们通过innerHTML
就可以增加一个元素了,但是这个Dom节点已经存在元素了,我们的操作就会覆盖原来的元素。
追加
.appendChild()
<p id="js">Javascript</p>
<div id ="list">
<p id="ee">JavaEE</p>
<p id="se">JavaSE</p>
<p id="me">JavaME</p>
</div>
<script>
var js=document.getElementById('js');
var list=document.getElementById('list');
list.appendChild(js); //实现追加,追加到后面
</script>
创建一个新的标签,实现插入
document.createElement('p');
创建一个标签节点,通过这个标签可以设置任意的值,格式为键值对的形式.setAttribute('type','text/javascript');
<script>
var js = document.getElementById('js'); //已经存在的节点
var list = doccument.getElementById('list');
// 通过js 创建一个新的节点
var newP = document.createElement('p'); // 创建一个P标签
newP.innerText = 'Hello,World';
// 创建一个标签节点,通过这个标签可以设置任意的值
var myScript= dcument.createElement('script'); // 创建一个空script标签
myScript.setAttribute('type','text/javascript'); // 设置标签内容
</script>
ee前插入一个新的标签js,
.insertBefore(js,ee);
insertBefore(新节点前,插入的目标节点)
<p id="js">Javascript</p>
<div id ="list">
<p id="ee">JavaEE</p>
<p id="se">JavaSE</p>
<p id="me">JavaME</p>
</div>
<script>
var ee=document.getElementById('ee');
var js=document.getElementById('js');
var list=document.getElementById('list');
list.insertBefore(js,ee); //在list中实现插入,在ee前插入js
</script>
6、操作Bom元素【重点】
BOM :浏览器对象模型
6.1、window 代表浏览器窗口
window.alert(1)
undefined
window.innerHeight
210
window.innerWidth
1488
window.outerHeight
824
window.outerWidth
1536
6.2、navigator 封装了浏览器的信息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
navigator.platform
"Win32"
大多数时候,我们不会使用navigator
对象,因为会被人修改,不建议使用
6.3、screen 代表屏幕的尺寸
screen.width
1536 px
screen.height
864 px
6.4、location 代表当前页面的URL信息
host: "www.baidu.com" //主机
href: "https://www.baidu.com/" //当前跳转的网页
protocol: "https://" //协议
reload:f reload() //重新加载,刷新页面
location.assign('https://自己的网页') //设置新的地址
6.5、Document 代表当前页面
document.title
"百度一下,你就知道"
document.title='lalalalalla'
"lalalalalla"
获取具体的文档树节点,动态增加、删除文档树节点v
<dl id="app"> <dt>Java</dt> <dd>JavaSE</dd> <dd>JavaEE</dd> </dl> <script> var dl=document.getElementById('app'); </script>
获取
cookie
document.cookie
劫持cookie原理:恶意人员获取你的cookie上传到他的服务器上。例如:淘宝账户登录之后天猫会自动登录你的账号
解决办法:服务器端可以设置cookie:httpOnly6.6、history 代表浏览器的历史记录
网页中实现的前进和后退网页,不建议使用
history.back() //后退 history.forward() //前进
7、操作表单(验证)
7.1 表单种类
- 文本框 text
- 密码框 password
- 下拉框 select
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hiddem
- ......
7.2 表单目的:提交信息
得到输入框的值:var input_text = document.getElementById('username');
修改输入框的值:input_text.value ='新值';
7.3 表单提交验证及前端密码MD5加密
表单绑定提交事件,
onsubmit = 绑定一个提交检测的函数:true,false
将结果返回给表单,使用 onsubmit 接受!
onsubmit = "return aaa()"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="https:www.baidu.com/" method="post" onsubmit="return f()">
<p>
<span>用户名:</span>
<input type="text" id="username" name="username">
</p>
<p>
<span>密 码:</span>
<input type="password" id="input-password">
</p>
<input type="hidden" id="md5-password" name="password">
<button type="submit">提交</button>
</form>
<script>
function f() {
alert(1);
var uname = document.getElementById('username');
var pwd = document.getElementById('input-password');
var md5pwd = document.getElementById('md5-password');
md5pwd.value = md5(pwd.value);
// 可以校验判断表单内容,true表示通过提交,false 表示阻止提交
return true;
}
</script>
</body>
</html>