JavaScript

JavaScript

什么是JavaScript

概述

  • JavaScript是一门世界上最流行的脚本语言

历史

ECMASctipt他可以理解为JavaScript的一个标准

基本使用

  • 内部使用
 <script>
alert('hello,world')
    </script>
  • 外部引入
    <script src="../JavaScript/js/qj.js"></script>
   
  • 默认显示定义
    <script type="text/javascript"></script>
  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- <script>
    alert('hello,world')
        </script> -->
        <script src="../JavaScript/js/qj.js"></script>
        
    </head>
    <body>
    
    
        <!-- 这里也可以存放 -->
    </body>
    </html>
    

基本语法

  • 变量类型 var
var split=a
  • 定义变量
        var score=85; 
  • 条件控制
        if(score>60 &&score<70){
            alert('还行');
        }else if(score>70&&score<90){
                alert('可以')
        }else{
            alert("很棒")
        }
  • 审查元素

1.console.log(score) 在浏览器控制台打印变量

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1uSR7yCg-1636547809145)(D:\我的文档\我的图片\Screenshots\JavaScript1.png)]

  • 网页源代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ePppnjrt-1636547809149)(D:\我的文档\我的图片\Screenshots\屏幕截图(8)].png)

数据类型

  • number

ks不区分小数和整数

123  //整数
1213.22 //浮点数
1.23e2  //科学计数法
-99 //负数
NaN  //not a number
Infinity  //表示无限大
  • 字符串
'abc'
"abc"
  • 布尔值
ture,false
  • 逻辑运算
&&    两个都为真,结果为真
||    一个为真,结果为真
!     真即真,假即假
  • 比较运算符
=   赋值符号
==  等于(类型不一样,值一样,也会为true=== 绝对等于(类型一样,值一样,结果为true
  • 须知
  1. NaN===NaN,这个与多有的数值都不相等,包括自己
  2. 只能通过自己isNaN(NaN)来判断这个数是否是NaN
  • 浮点数问题
<script>
console.log((1/3)===(1-2/3))
</script>           //false

尽量避免使用浮点数进行计算,存在精度问题

Math.abs((1/3)-(1-2/3))<0.00000001
  • null和undefined
    1. null 空
    2. undefined 未定义
  • 数组

用中括号

Java中必须相同类型的对象,JavaScript中不需要这样

var arr=[1,2,3,4.5,"hello",null,true]

1.取数组下标,如果越界了就会

undefined
  • 对象

对象用大括号

每个属性之间用逗号隔开,最后一个不需要添加

<script>
    //Person person =new Person(1,2,3,4,5);
    var person={
        name:"split",
        age:3,
        tags:['js','java','web','...']
    }
</script>
person.age
>3
person.name
>'split'
person.tags
(4) ['js', 'java', 'web', '...']

严格检查模式strict

  • ‘use strict’; 严格检查变量,预防JavaScript的随意性产生的一些问题
<script>
    //全局变量 函数内部没有声明的变量自动转化为全局变量
    'use strict';
    i=1;
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-svfzfyRg-1636547809151)(D:\我的文档\我的图片\Screenshots\屏幕截图(9)].png)

  • 局部变量都建议用let来定义
let i=1;

字符串

  1. 正常字符串我们使用单引号或者双引号来包裹
<script>
'use strict';
console.log('a')
console.log("a")
</script>
  1. 需要注意转义字符 \
<script>
'use strict';
console.log('a\'')
console.log("a")
</script>
\'  表示是一个字符串
\n   换行
\t   空格
\u4e2d  中   \u#### unicode 字符
\x41   Ascll字符
  1. 多行字符串的编写(table上面的piao键=》``)
<script>
var sh=`hello
        你好
        你是猪`
</script>
  1. 模板字符串
<script>
let name="split";
let age=3;
let mag=`你是猪,${name},${age}`
</script>
  1. 字符串长度
str.length
  1. 字符串的可变性,不可变

  2. 大小写转换(注意这里是方法,不是属性)

//大写
console.log(name.toUpperCase())
SPLIT
console.log(name.toLowerCase())
split
  1. 获取指定的下标索引
console.log(name.indexOf("t"))
VM312:1 4
  1. 截取字符串
console.log(name.substring(0,3))
VM406:1 spl

数组(如何存和如何取)

Array可以包涵任意的数据类型

var arr=[1,2,3,4,5]
  1. 长度
arr.length
arr.length=10
10
console.log(arr)
VM176:1 (10) [1, 2, 3, 4, 5, empty × 5]

注意:加入arr.length赋值,数组大小就会发生变化,如果赋值过小,元素就会丢失

  1. slice()截取array中的一部分,返回一个新数组
arr.slice(2)
(8) [3, 4, 5, empty × 5]
  1. push:压入到尾部
arr.push(1,2)
12

4.pop弹出一个尾部元素

arr.pop()
2
  1. unshift() 压入到头部一个元素
arr.unshift(1)
11
arr
(11) [1, 2, 3, 4, 5, empty × 5, 1]
  1. shift 弹出头部的一个元素
arr.shift(1)
1
arr
(10) [2, 3, 4, 5, empty × 5, 1]
  1. sort() 排序
arr.sort()
(11) [1, 1, 2, 3, 4, 5, empty × 5]
  1. reverse 元素反转
arr.reverse()
(11) [empty × 5, 5, 4, 3, 2, 1, 1]
  1. concat () 拼接
arr.concat(1,1)
(13) [empty × 5, 5, 4, 3, 2, 1, 1, 1, 1]
arr
(11) [empty × 5, 5, 4, 3, 2, 1, 1]

并没有修改数组,只是返回一个新的数组

  1. join 连接符

打印拼接数组,使用特定的字符串来连接

arr.join("-")
"-----5-4-3-2-1-1"
  1. 多维数组
arr=[[1,2],[3,4],[5,6]]
(3) [Array(2), Array(2), Array(2)]
0: (2) [1, 2]
1: (2) [3, 4]
2: (2) [5, 6]
length: 3
__proto__: Array(0)
  1. fill 填充

对象

JavaScript中的所有的键都是字符串,值都是任意对象

  1. 对象赋值
    <script>
        var 对象名{
            属性名:属性值,
                属性名:属性值,
                    属性名:属性值
        }
    </script>

//定义了一个person对象,他有四个属性
    <script>
        var person={
            name : "split",
                age:3,
                score:1
        }
    </script>
  1. 使用一个不存在的对象赋值,不会报错
person.ggg
undefined
  1. 动态的删减属性
delete person.age
true
person
{name: "split", score: 1}
  1. 动态的添加
person.pig="cyx"
"cyx"
person
{name: "split", score: 1, pig: "cyx"}
  1. 判断这个值是否在这个对象中 xx in xx
'pig' in person
true

'toString' in person
true

'tostring' in person
false
  1. 判断一个属性是否是这个对象自身拥有的hasOwnProperty
person.hasOwnProperty('toString')
false
person.hasOwnProperty('name')
true

流程控制

  • if判断
    <script>
var age=1;
if (age>3){
    alert("haha")
}else{
    alert("wuwa")
    </script>
  • while循坏 避免程序死循坏
var age=1;
while (age<100){
    age=age+1;
    console.log(age)
}


do{
    age=age+1;
    console.log(age)
}while(age<100)
  • for循坏
for (let i = 0; i <100 ; i++) {
    console.log(i)
}
  • forEach循坏
var age=[1,2,54,4,3,2];
age.forEach(function (value)){
    console.log(age)
}
  • for…in
var age=[1,3,34,5,32]
//for (var num in object){}
for (var num in age){
    console.log(age[num])
}

Map 和Set

  • Map
var map=new Map([["tom",100],["jack",80]])
var name=map.get("tom");
map.set("haha",1000)
console.log(name)
map.delete("tom")
  • Set 无序不重复的集合
var set=new Set([1,1,1,2,3,3,3,4]);
Set(4) {1, 2, 3, 4}
set.add()      //添加
set.delete()  //删除元素
set.has()   //是否含有某个元素
  • iterator

使用来遍历迭代我们Map和Set

  • 遍历数组
        var arr =[3,4,5];
        for (var x of arr){
            console.log(x)
        }
  • 遍历map
        var map=new Map([["a",2],["b",3],["c",4]]);
        for (let x of map){
            console.log(x)
        }
  • 遍历set
        var set=new Set([1,2,3]);
        for (let x of set) {
            console.log(x)
        }

函数

定义函数

定义方式一

  • 绝对值函数
function abs(x){
    if (x>=0){
        return x;
    }else {
        return -x;
    }
}

一旦执行到return代表函数结束,返回结束

如果没有执行return,函数执行完也会返回结果,结果就是undefined

定义方式二

var abs = function(x){

}

function(x){}这是一个匿名函数,但是可以把结果赋值给abs,通过abs可以调用函数

调用函数

abs(10)   //10
abs(-10)   //10
  • 参数问题:JavaScript可以传任意参数,可以不传参数

  • 假设不存在参数,该如何规避

function abs(x){
    if (typeof x!=="number"){
        throw"this is no a number"
    }
    if (x>=0){
        return x;
    }else {
        return -x;
    }
}
  • arguments : 传递进来的所有参数,是一个数组
        var abs=function (x){
            console.log(x)
        for (var i = 0; i <arguments.length; i++) {
            console.log(arguments[i])
        }}
  • rest 获取除了他之外的所有参数,作为一个新数组
        var aaa=function (a,b,...rest){
            console.log(a);
            console.log(b);
      console.log(rest)
        }

rest参数只能写在最后面,必须用…标识

变量的作用域

JavaScript,var定义的变量是由作用域的

function abs(){
    var x=1;
}
x=x+1;

假设在函数体内声明,则在函数体外不可以使用(要实现》闭包)

如果两个函数使用了相同的变量名,只要在函数内部,就不冲突

function abs(){
    var x=1;
}
function abb(){
    var x=2;
}

内部函数可以访问函数,反之则不行

function abs() {
var x=1;
function  sp(){
   var y=x+1;
} var z=y+x;
}

假设,内部函数变量和外部函数的变量,重名

在JavaScript中,函数查找变量从自身函数开始,由内向外查找.假设外部存在这个同名的函数变量,则内部函数会屏蔽外部的变量

function abs() {
var x=1;
function  sp(){
   var x='A';
   console.log("inner"+x)  //outer1
}
    console.log("outer"+x)  //innerA
}

提升变量的作用域

function abs() {
let x="x"+y;
var y="y";
}

结果xundefined

说明:自动提升了y的声明,但是不会提升变量y的赋值

这是JavaScript建立之初就存在的特性,所有的变量都定义在函数的头部,不要乱放,便于代码的防护

function abs() {
    var x=1,
        y=2,
        z,k;
}
  • 全局函数
 var x=1;
function abs() {
    console.log(x);
}
abs();
console.log(x)

全局对象 Window :默认的所有的全局变量,都会绑定在Window对象下

var x="xxx";
alert(x)
alert(window.x)

alert这个函数本身也是一个Window函数

  • JavaScript实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,报错(RefrenceError
var x="xxx";
alert(x)
var old_alert=window.alert;
window.alert=function (){
}
window.alert=old_alert;
window.alert(123)
  • 规范

由于我们所有的全部变量都会绑定到我们的Window上,如果不同的js文件,使用了相同的全局变量,冲突

//唯一全局变量
var split={};
//定义全局变量
split.name="split";
split.add=function (a,b){
    return a+b;
}

把自己的代码全部放入自己定义的唯一空间名字中,降低全局变量名字冲突的问题

jQuery

  • 局部作用域
function aaa() {
    for (var i = 0; i <100 ; i++) {
        console.log(i)
    }
    console.log(i+1);   //除了这个作用域外还可以使用

let关键字,解决局部作用域冲突问题

function aaa() {
    for (let i = 0; i <100 ; i++) {
        console.log(i)
    }
    console.log(i+1); 
  • 常量 const

在ES6之前,只有全部用大写命名的变量就是常量,建议不要修改

var PI="3.14";
PI="333";

在ES6引用常量关键字 const 只读常量

方法

  • 定义方法:方法就是把函数放在对象的里面,对象只有两个东西:属性和方法
var split={
   name:"split",
    brith:2000,
   //方法
    age:function (){
        var now =new Date().getFullYear();
        return now-this.brith;
    }
    //属性
    split.name
    //方法
    split.age()

this是无法指向的,是默认指向调用他的那个对象

  • apply
        function getage(){
            var now =new Date().getFullYear();
            return now-this.brith;
        }
var split={
   name:"split",
    brith:2000,
   //方法
    age:getage
};
        getage.apply(split,[]);

在js中控制this的指向

内部对象

  • 标准对象
typeof 123
"number"
typeof "1"
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof {}
"object"
typeof []
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

Date

  • 基本时间
        var now=new Date();
        now.getFullYear();  //年
        now.getMonth();      //月
        now.getDate();       //日
        now.getDay();       //星期几
        now.getHours();     //时
        now.getMinutes();     //分
        now.getSeconds();     //秒
        now.getTime();       //时间戳  全世界统一
        console.log(new Date(43543513))   //时间戳转为时间
  • 转换
now.toLocaleString()
"2021/11/10 下午2:53:01"
now.toGMTString()
"Wed, 10 Nov 2021 06:53:01 GMT"

JSON

  • 什么是JSON

JSON (JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。——百度百科

数据传输是我们在敲代码时,经常遇到的一个场景,前后端交互。给数据一个统一的格式有利于我们编写和解析数据。

早期,所有数据传输习惯使用XML文件

在JavaScript一切皆为对象,任何js支持的类型都可以用SON来表示

  • 格式
  1. 对象都用{}
  2. 数组都用[]
  3. 所有的键值对都用key"value
             var user ={
                 name:"split",
                 age:12,
                 sex:"man"
             }
             //对象转化为JSON字符串
            var jsonuser=JSON.stringify(user);
             //JSON字符串转化为对象 参数为字符串
             var obj=JSON.parse('{"name":"split","age":12,"sex":"man"}');

Ajax

  • 原声的js写法,xhr 异步请求
  • jQuery封装好的方法$("#name").ajax("")
  • axios请求

面向对象编程

什么是对象对象

JavaScript有些区别

类:模板

对象:具体的实例

在JavaScript这个换思维方式

proto

            var user ={
                 name:"split",
                 age:12,
                 sex:"man",
                 run:function (){
                     console.log(this.name+"run....")
                 }
             }
             var xiaoshuai={
                 name: "小帅"
             }
             xiaoshuai._proto_=user;

Class继承

  1. 定义一个类,属性,方法
            function Student(name){
                this.name=name;
            }
            //给student新增一个方法
        Student.prototype.hello=function (){
                alert("hello")
        }
        //ES6
            // 定义一个学生的类
            class Student{
                constructor() {
                this.name.name;
                }
                hello(){
                    alert("hello")
                }
            }
            
var split =new Student("split");
var xiaoshuai =new Student("xiaoshuai");
split.hello()
class oldStudent extends Student{
                constructor(name,grade) {
                    super(name);
                    this.grade=grade;
                }
                myGrage(){
                    alert("小帅是一个小学生")
                }
            }
let split=new Student("split");
let shuai=new oldStudent("shuai",23);

原型链

java中是继承

操作BOM对象

BOM:浏览器对象模型

  • JavaScript和浏览器关系

JavaScript为了能让他在浏览器中运行

  1. IE
  2. Chrome
  3. Safari
  4. FireFox
  5. Opera
  6. 三方浏览器

QQ浏览器

360浏览器

  • Window

Window代表浏览器窗口

window.innerHeight
722
window.innerWidth
982
window.outerHeight
824
window.outerHeight
824
  • Navigator
navigator.appCodeName
"Mozilla"
navigator.appName
"Netscape"
navigator.userActivation
UserActivation {hasBeenActive: true, isActive: true}

大多数时候我们不建议使用navigator 对象,因为会被人为修改

  • Screen

代表屏幕尺寸

screen.width
1536
screen.height
864
  • location

代表当前页面的URL信息

host: "localhost:63342"
href: "http://localhost:63342/JavaScript/JavaScript/1.html?_ijt=m8fmbhgsh
protocol: "http:"
reload: ƒ reload()  //刷新网页
//设置新的地址
location.assign('')
  • document

代表当前页面信息

获取具体的文档树节点

    <dl id="app">
        <dt>aaa</dt>
        <dt>bbb</dt>
        <dt>ccc</dt>
    </dl>
    <script>
var dl=document.getElementById('app');
    </script>

获取cookie

document.cookie
""

劫持cookie原理

<script src="aa.js"></script>
//恶意人员,获取你的cookie上传到他的服务器

服务器可以设置 cookie:httpOnly

  • history
history.back()  //前进
history.forward()   //后退

操作DOM对象

DOM:文档对象模型

核心

浏览器网页就是一个Dom树形结构

  • 更新:更新Dom节点
  • 遍历dom节点 得到dom节点
  • 删除:删除一个dom节点
  • 添加:添加一个新的dom节点

要操作一个dom节点,就必须先获得这个dom节点

获得dom节点

<div id="father">
<h1>标题</h1>
<p id="p1">p1</p>
<p class="p2">p2</p></div>
<script>
    //对应css的选择器
var h1=document.getElementsByTagName('h1')
var p1=document.getElementById('p1')
var p2=document.getElementsByClassName('p2')
var father=document.getElementById('father')
    var children=father.children; //获取父节点下的所有子节点
    father.firstChild;
    father.lastChild
</script>

这是原生代码,之后我们尽量都是用jQuery()

更新节点

<div id="id1">
</div>
<script>
    var id1=document.getElementById('id1');
    id1.innerText=1234;  //可以修改文本的值
    id1.innerHTML=<strong>123</strong>;  //可以解析HTML文本标签
</script>

操作js

id1.style.color='red'
id1.style.fontSize='20px'
id1.style.padding.length='22'
id1.style.paddingBottom='50px'

删除节点

删除节点的步骤:

先获取父节点,在通过父节点删除自己

var father=p1.parentElementById("pi");
father.removeChild(p1)
father.removeChild(father.children[0])

注意:删除多个节点的时候,children时候在时刻变化,删除节点的时候一定要注意

插入节点

我们获得了某个dom节点,假如这个dom节点是空的,我们通过innerHTML就可以添加一个元素了,但是这个DOM节点已经存在元素了,我们就不能这样,会覆盖

  • 追加

(已存在的一个节点)

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
var js=document.getElementById('js');
var list=document.getElementById('list');
list.appendChild(js);
</script>
  • 创建一个新的标签
var newP=document.createElement('p');
newP.id='newp';
newP.innerText='hello';
list.appendChild(newP)
  • 创建一个标签节点
var myScript=document.createElement('script');
myScript.setAttribute('type','text/javascript')
list.appendChild(myScript)
  • insertBefore
var se=document.getElementById('se');
var ee=document.getElementById('ee');
var list=document.getElementById('list');
list.insertBefore(se,ee)

操作表单(验证)

表单是什么

  1. 文本框 :text

  2. 下拉框 :

  3. 单选框 : radio

  4. 多选框 : checkBox

  5. 隐藏框 : hidden

  6. 密码框 : password

表单的目的:提交信息

  • 获得要提交的信息
<form action="post">
    <p>
    <span>用户名</span><input type="text" id="username"></p>
    <p>
        <span>性别</span>
        <input type="radio" name="sex" value="man" id="boy"><input type="radio" name="sex" value="women" id="girl"></p>
</form>

<script>
var inputname=document.getElementById('username')
var boy_radio=document.getElementById('boy')
var girl_radio=document.getElementById('girl')
inputname.value   //获取输入框的值
inputname.value='123';  //修改输入框的值

//对于单选框,多选框等等固定的值

boy_radio.checked; //查看返回值的结果是否为true,如果为true,则被选中
boy_radio.checked=true;
</script>
  • 提交表单
<form action="https://www.baidu.com/" method="post" onsubmit="aaa()">
    <p>
    <span>用户名</span><input type="text" id="username" name="username"></p>
    <p>
    <p>
        <span>密码</span><input type="password" id="input-password" name="password"></p>
<!--    绑定时间  onclick 被点击-->
    <button type="submit" id="md5-password">提交</button>
</form>

<script>



function aaa(){
    alert(1)
    var uname=document.getElementById('username')
    var pwd=document.getElementById('input-password')
    var md5pwd=document.getElementById('md5-password')

md5pwd.value=md5(pwd.value);

    return true;
}
</script>

jQuery

JavaScript

jQuery库,里面存在大量的JavaScript函数

  • 获取jQuery
  • 引入cdn
   <script src="<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>">
//公式
$(selector).action()
<a href="" id="eee">点我</a>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js">
    $('#eee').click(function (){
        alert("你是猪");
    })
</script>
  • 选择器

css中里面的选择器都能用

  • 事件 action
  1. 鼠标事件
  2. 键盘事件
  3. 其他事件
  • 获取鼠标位置
<!DOCTYPE html>
<html lang="en">
<!--表单绑定提交事件
onsubmit 绑定一个提交监测的函数  true false
将这个结果返回给表单,是哦用onsubmit 接受

-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
    #divMove{
        width: 500px;
        height: 500px;
        border: 1px solid red;
    }
</style>
</head>
<body>
        mouse:<span id="mouseMove"></span>
<div id="divMove">点击这个试试</div>

<script>
    $(function (){
        $('#divMove').mousemove(function (e){
            $('#mouseMove').text("x:"+e.pageX+"y:"+e.pageY)
        })
    })
</script>
</body>
</html>

操作DOM

  • 节点文本操作
$('#text-ul li[id=aaa]').text(); //获得值
$('#text-ul li[id=aaa]').text(123);  //设置值
$('#text-ul').html();      //获得值
$('#text-ul').html(<strong>123</strong>);      //设置值
  • css的操作
$('#text-ul').css  
$('#text-ul').css("color","red");
  • 元素的显示和影藏 本质display
$('#text-ul').show();
$('#text-ul').hide();
$('#text-ul').toggle();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值