JS狂神说

武托邦

已于 2022-08-14 12:21:18 修改

阅读量183

点赞数

分类专栏： java初识文章标签： javascript 前端开发语言

于 2022-08-03 12:53:53 首次发布

本文链接：https://blog.csdn.net/m0_62953927/article/details/126137351

版权

java初识专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1什么是js

1.1

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

javascript组成一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：
JavaScript核心（ECMAScript）、文档对象模型（Document Object Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM）。

2基础语法

2.1标签

<script>	</script>

2.1外部引入

abc.js
js里面只写位于script你里面的文件。
引入文件放在同一目录下，不用写包名。

<script scr="abc.js"></script>

2.2浏览器

在这里插入图片描述

2.3数字

js划分不细致

123  //整数123
123.5  //小数123.5
1.2555e5  //科学计数法
-5213   //负数
NaN   //not a number
Infinity  //表示无限大

2.4、数据类型

数值、文本、图形、音频·、视频…

=&&   全真为真。全假为假

||	 一个为真结果为真

!	 真即是假，假即为真


==		等于(类型不一样，值一样也会判断为true)

=== 	绝对等于(类型一样，值一样，结果为true)
  1. NaN==NaN，这个和所有的数值都不相等，包括自己
     2. 只能通过isNaN(NaN)来判断这个数是否为NaN

2.5字符

''  ""两种格式包括，
其他的类型用“\.”

\’	输出特殊符号
\n	换行
\t	tab同功能
\u4e2d	\u#### Unicode字符
\x41	Ascll字符

多行字符串

//在tab键的上面  esc键下面
'use scrict';
let msg = `你好呀
hello
world`
console.log(msg);

模板字符串

let name = "sunwukong";
let age = 3;
let mes = `你好呀 ${name}`

字符串常量不可变

长度
 console.log(student.length)
 大小写转换
 console.log(student.toUpperCase())   //STUDENT
    
console.log(student.toLowerCase())    //student
student.indexOf(‘t’) 输出在字符串中的位置

substring 截取字符串
student.substring(1)    //从第一个字符串截取到最后一个字符串
student.substring(1,3)   //[1,3)  含头不含尾

2.6浮点数

防止出现的精度问题

console.log((1/3)===(1-(2/3)))      //false
console.log(Math.abs(1/3-(1-2/3))<0.000001);         //true

3数组

（可以包含所有数据类型）
null 空
undefined 未定义（但凡对于编译器来说未知的就undefined）
//为了保证代码的可读性，尽量使用[]

 var arr = [1,2,3,null,true,'hello'];

 new Array (1,12,15,166,255,'world');

arr.length

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

arr.indexOf(3)  //2  indexOf 通过元素获得下标索引
字符串的“1”和数字1是不一样的

slice() 截取Array的一部分，返回一个新数组，类似于String里的substring

pash() , pop 尾部
pash: 压入到尾部
pop : 弹出尾部的一个元素
pash: 压入到尾部
pop : 弹出尾部的一个元素

unshift() ,shift() 头部

unshift: 压入到头部
shift:  弹出头部的一个元素
排序
arr
(3) ["b", "c", "a"]
arr.sort()
(3) ["a", "b", "c"]
元素反转 resverse
(3) ["a", "b", "c"]
arr.reverse()
(3) ["c", "b", "a"]
concat()
arr.concat([1,2,3])
(6) ["c", "b", "a", 1, 2, 3]
arr
(3) ["c", "b", "a"]
concat()并没有修改数据，只是会返回一个新的数组
连接符 join
(3) ["a", "b", "c"]
arr.join('-')
"c-b-a"


多维数组
var arr = [[1,2],[3,4],[5,6]]
undefined
arr[1][1]
4
arr
(3) [Array(2), Array(2), Array(2)]
0: (2) [1, 2]
1: (2) [3, 4]
2: (2) [5, 6]
length: 3

4严格检查模式

’use strict’; 严格检查模式，预防JavaScript的随意性产生的一些问题
必须写在JavaScript的第一行

局部变量建议使用let去定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    前提：IEDA需要设置支持es6语法
    'use strict';严格检查模式，预防JavaScript的随意性产生的一些问题
    必须写在JavaScript的第一行
    局部变量建议使用let去定义
    -->
    <script>
        'use strict';
        
        let j = 1;

    </script>

</head>
<body>

</body>
</html>

5对象

对象是大括号。数组是中括号

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

var 对象名 = {
    属性名1 : 属性值1,
    属性名2 : 属性值2,
    属性名3 : 属性值3
}

//定义了一个person对象，它有四个属性
 var person = {
            name : "xiaoming",
            age : 5,
            email : "378214218@qq.com",
            score : 60

        }

JavaScript中对象，{…}表示一个对象，键值对描述属性 xxx ： xxx 多个属性之间使用逗号隔开，最后一个不加逗号

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

person.age = 76
76
person.age
76

使用一个不存在的属性时，不会报错

person.haha
undefined

动态的删减属性，通过delete删除对象的属性

delete person.score
true
person
{name: "xiaoming", age: 76, email: "378214218@qq.com"}

动态的添加属性，直接给新的属性添加值即可

person.haha = "haha"
"haha"
person
{name: "xiaoming", age: 76, email: "378214218@qq.com", haha: "haha"}

判断属性值是否在这个对象中！ xxx in xxx

'age' in person
true

//继承
'toString' in person
true

判断一个属性是否是这个对象自身拥有的

person.hasOwnProperty('age')
true

person.hasOwnProperty('jah')
false

6循环判断

与java一致
forEach

        var age=[1,45,5,45,5,3453];
        //函数
        age.forEach(function (value){
            console.log(value)
        })

forin
age是索引而已

  for(var index in object){}
        for(var num in age)
        {
            if(age.hasOwnProperty(num))
            {
                console.log("ok");
                console.log(age[num]);
            }

7map和set

        //map=字典
        var map=new Map([['tom',100],['jack',30]]);//相当于pythen里面的字典
       var name= map.get('tom');//通过key获得value的值
       map.set('zhongshan',45);//增加或修改
        map.delete("tom");
        console.log(name);
        console.log(map);

set

   //     set    去重
        var set=new Set([4,3,2,1,1,1]);
        // console.log(set);
     
       set.delete(1);//删除
        set.add(7);//添加
        set.has(3);//是否包含某元素

8iterator

遍历数组

//通过for of / for in 下标
    let arr = [3,4,5]
    for(let x of arr){
        console.log(x);
    }

map

    let map = new Map([['tom',100],['jerry',90],['andy',80]]);
    for(let x of map ){
        console.log(x);
    }

遍历set

    let set = new Set([5,6,7]);
    for(let x of set){
        console.log(x);
    }

3函数及其对象

关键字function
方式1。

  function abs(x){
      if(x >= 0){
          return x;
      } else {
           return -x;
      }
  }

方式2

  var abs = function(x){
      if(x >= 0){
          return x;
      } else {
           return -x;
      }
  }

在GS中一般不会主动报错。即便传了多个参数也不会。如何规避或者知道传进来的参数有哪些？

手动抛出异常。

var abs = function (x){
    //手动抛出异常来判断
    if(typeof x!== 'number'){
      throw 'Not a Number';
    }
    if(x >= 0){
      return x;
    } else {
      return -x;
    }
  }

arguments
arguments是一个JS免费赠送的关键字；
代表，传递进来的所有的参数，是一个数组！

  var abs = function (x){
    console.log("x=>"+x);

    for(let i = 0; i< arguments.length;i++){
      console.log(arguments[i]);
    }

    if(x >= 0){
      return x;
    } else {
      return -x;
    }
  }

rest 获取除了已经定义的参数之外的所有参数~

function aaa(a,b,...rest){
        console.log("a=>"+a);
        console.log("b=>"+b);
        console.log(rest);
    }

1变量作用域

在javascript中，var定义变量实际是有作用域的。假设在函数体中声明，则在函数体外不可以使用

  function qj(){
        var x = 1;
        x = x + 1;
    }
    x = x + 2; //Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突（内部函数可以访问外部函数的成员，反之则不行）

   function qj(){
        var x = 1;
        x = x + 1;
    }
    
    function qj2(){
        var x = 'A';
        x = x + 1;
    }

假设在JavaScript 中函数查找变量从自身函数开始~，由’内’ 向 '外’查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
定义变量要定义在函数的最前面。虽然GS会自动提升。但不会提升变量的赋值

   function qj(){
        var x = 1;

        //内部函数可以访问外部函数的成员，反之则不行
        function qj2(){
            var y = x + 1;  //2
        }

        var z = y + 1; //Uncaught ReferenceError: y is not defined
    }

全局变量

  //全局变量
    x = 1;

    function f(){
        console.log(x);
    }
    f();
    console.log(x);

全局对象window

var x = 'xxx';
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下;

alert()这个函数本身也是一个window的变量

var x = 'xxx';

window.alert(x);

var old_alert = window.alert;

//old_alert(x);

window.alert = function(){

};
//发现 alert() 失效了
window.alert(123);

//恢复
window.alert = old_alert;
window.alert(456);

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

    }
    qj();
javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错Refrence

2方法

方法就是把函数放在对象里面。this默认指向调用他的那个对象。

let zhang = {
    name:'张',
    birth:2000,
    age:function (){
        //今年-出生的年
       let now =  new Date().getFullYear()
        return now - this.birth;
    }
};
//属性
zhang.name
//方法,一定要带()
zhang.age()

this

function getAge(){
        //今年-出生的年
       let now =  new Date().getFullYear()
        return now - this.birth;
    }

let zhang = {
    name:'张',
    birth:2000,
    age:getAge
};

//zhang.age()  OK
//getAge()   NaN  this指向window，不存在getAge()函数

function getAge(){
        //今年-出生的年
       let now =  new Date().getFullYear()
        return now - this.birth;
    }

let zhang = {
    name:'张',
    birth:2000,
    age:getAge
};

//zhang.age()    OK


//this指向了zhang，参数为空
getAge.apply(zhang,[]);

3内部对象

Data

let date = new Date();

date.getFullYear(); //年
date.getMonth();    //月 0~11
date.getDate();     //日
date.getDay();      //星期几
date.getHours();    //时
date.getMinutes();  //分
date.getSeconds();    //秒
date.getTime();     //时间戳 毫秒数
转化
//时间戳转换为本地时间
console.log(new Date(121232121231321));
Date Wed Sep 11 5811 21:13:51 GMT+0800 (中国标准时间)

date.toLocaleString()
"2021/4/13 下午7:28:31"
date.toLocaleDateString()
"2021/4/13"

记时

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

clearInterval() - 方法用于停止 setInterval() 方法执行的函数代码。

setTimeout() - 在指定的毫秒数后执行指定代码。

4JSON

JSON(JavaScript Object Notation,JS对象简谱)是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

let user = {
    name:'zhang',
    age:3,
    sex:'男'
};

//对象转换为JSON字符串
let jsonUser = JSON.stringify(user)
console.log(jsonUser);      //{"name":"zhang","age":3,"sex":"男"}

//JSON字符串转换为对象，参数为JSON字符串
let json = JSON.parse('{"name":"zhang","age":3,"sex":"男"}');
console.log(json);    //Object { name: "zhang", age: 3, sex: "男" }

区别

var obj = {a:'hello',b:'springmvc'}
var json = {"a":"hello","b":"springmvc"}

4面向对象编程

1面向对象class继承

<script>
    'use strict'

class Student {
    //有参构造
    constructor(name) {
        this.name = name;
    }

    //方法
    hello(){
        alert("hello")
    }
}

let xm = new Student("小明")
xm.hello()
</script>

继承

<script>
    'use strict'

    class Student {
        //有参构造
        constructor(name) {
            this.name = name;
        }

        //方法
        hello(){
            alert("hello")
        }
    }

    class xiaoStudent extends Student{
        constructor(name,grade) {
            super(name);
            this.grade = grade;
        }

        MyGrade(){
            alert("小学生")
        }
    }

    let xxs = new xiaoStudent("zfstart",21)


</script>

5BOM对象

JS的诞生就是为了能够让他在浏览器中运行

BOM：浏览器对象模型

winder

//浏览器外部高度
window.outerHeight
804
//浏览器外部宽度
window.outerWidth
699
//浏览器内部高度
window.innerHeight
101
//浏览器内部宽度
window.innerWidth
688

navigator
navigator，封装了浏览器的信息
一般情况下我们不会用，因为会被人修改。

navigator.appName 

"Netscape" 

navigator.userAgent 

"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:87.0) Gecko/20100101 Firefox/87.0" 

navigator.platform 

"Win32"

screen

screen.width
1536 px
screen.height
864 px

location（重要）
location代表当前页面的URL信息

host:"www.baidu.com"  //主机
href:"https://www.baidu.com/"  //当前指向的位置
protocol:"https:"  //协议
reload:f reload()	//刷新页面
location.assign("https://www.qq.com")   //转向新的地址

document
document代表当前页面

document.title
"百度一下，你就知道"
document.title='狂神说'
"狂神说"

获取具体的文档树节点

<dl id = "app">
    <dt>JAVA</dt>
    <dd>javaSE</dd>
    <dd>javaEE</dd>
</dl>
<script>
	let dl = document.getElementById("app");
</script>

获取cookie

document.cookie
劫持cookie原理
<script src = "劫持js"></script>
恶意人员的页面，它引入一个js文件，里面有获取你浏览器的cookie的js代码，然后发送到他的服务器

history
history代表浏览器的历史记录

history.back()  //返回前一个页面
history.forward()  //前进

创建和插入dom节点

添加已经存在的节点。

<body>
<p id="js">javaAcript</p>
<div id="list">
    <p id="se">JAVASE</p>
    <p id="ee">JAVAEE</p>
    <p id="de">JAVADE</p>
<!--     <p>javaME</p>-->
</div>
<SCRIPT>
    var js=document.getElementById('js');
    var list=document.getElementById('list');
    list.appendChild(js);

创建一个新的标签

<p id="js">javaAcript</p>
<div id="list">
    <p id="se">JAVASE</p>
    <p id="ee">JAVAEE</p>
    <p id="de">JAVADE</p>
<!--     <p>javaME</p>-->
</div>
<SCRIPT>
    var js=document.getElementById('js');
    var list=document.getElementById('list');
    var newp= document.createElement('p');//创建标签（只是标签）
    newp.id='newp';//定位
    newp.innerText='hellow word';//设置显示内容
    //追加位置
    list.appendChild(newp);

获取和设置表单的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="post">
    <span>
      用户名： </span>
    <input type="text" id="username">
</form>
<script>
    var inputscript=document.getElementById('username');
</script>

</body>
</html>

在这里插入图片描述

checked

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<form action="post">-->
<!--    <span>-->
<!--      用户名： </span>-->
<!--    <input type="text" id="username">-->
<p>
    <span>性别：</span>
    <input type="radio" name="sex" value="man" id="boy">男
    <input type="radio" naem="sex" value="woman" id="girl">女
</p>
</form>
<script>
var input_text=document.getElementById('username');
var boy_radio=document.getElementById('boy');
var girl_radio=document.getElementById('girl');

//查看返回结果
// girl_radio.checked
// true

input_text.value;
input_text.value='13';

</script>

</body>
</html>

操作表单

表单是什么？form-----DOM树文本框----text 下拉框----select 单选框----radio
多选框----checkbox 隐藏域----hidden 密码框----password

<body>
    <form action = "post">
        <p>
            <span>用户名：</span><input type="text" id = "username" />
        </p>
        <!--多选框的值就是定义好的value-->
        <p>
            <span>性别：</span>
            <input type = "radio" name = "sex" value = "man" id = "boy"/>男
           	<input type = "radio" name = "sex" value = "woman" id = "girl"/>女
        </p>
    </form>
    <script>
    	var input_text = document.getElementById("username");
        var boy_radio = document.getElementById("boy");
        var girl_radio = document.getElementById("girl");
        //得到输入框的值
        input_text.value 
        //修改输入框的值
        input_text.value  = "value";
        
        //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
        boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中。
        girl_radio.checked = true;//赋值
        
    </script>
</body>

提交表单。md5加密密码，表单优化

<!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>
        <!--表达绑定提交事件
			οnsubmit= 绑定一个提交检测的函数，true，false
			将这个结果返回给表单，使用onsubmit接收
		-->
        <form action = "https://www.baidu.com" method = "post" onsubmit = "return aaa()">
            <p>
            	<span>用户名：</span><input type="text" id = "username" name = "username"/>
        	</p>
            <p>
            	<span>密码：</span><input type="password" id = "password" />
        	</p>
            <input type = "hidden" id = "md5-password" name = "password"> 
            
            <!--绑定事件 onclick 被点击-->
            <button type = "submit">提交</button>
            
        </form>
        
        <script>
        	function aaa(){
                alert(1);
                var username = document.getElementById("username");
                var pwd = document.getElementById("password");
                var md5pwd = document.getElementById("md5-password");
                //pwd.value = md5(pwd,value);
                md5pwd.value = mad5(pwd.value);
                //可以校验判断表单内容，true就是通过提交，false就是阻止提交
                return false;
                
            }
        </script>
        
    </body>
</html>

jquery

初见

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<!--
公式 ： $(selector).action();
-->
<a href="" id="text-jquery">点我</a>
<script>
    document.getElementById('id');
//css选择器    -------点击-----
    $('#text-jquery').click(function ()
    {
        alert('hello');
    })


</script>
</body>
</html>

jquery事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  $('p').click();//标签选择器
  $('#id').click();//id选择器
  $('.class1').click();//class选择器


</script>
</body>
</html>

jqyery事件2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style>
    #divMove{
        width: 300px;
        height: 200px;
        color: cadetblue;
        border: 1px solid red;
    }
</style>
</head>
<body>
<!--要求：获取鼠标当前的一个坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
    in this is move mouse
</div>
<script>
    //当网页元素加载完成之后，响应时间
    $(function ()
    {
        $('#divMove').onmousemove(function(e )
        {
           $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
        })
    });
</script>
</body>
</html>

jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id ="text-ul">
  <li class="js">javasc</li>
    <li name="ps">ps</li>

</ul>

<script>
    $('#text-ul li[name=ps]').text('vvc');

    $('#text-ul').html();

</script>

</body>
</html>