JavaScript学习笔记

最新推荐文章于 2021-05-17 13:36:03 发布

m0_46143221

最新推荐文章于 2021-05-17 13:36:03 发布

阅读量116

点赞数

本文链接：https://blog.csdn.net/m0_46143221/article/details/114002641

版权

JavaScript

1.什么是是JavaScript

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

EMCAScript可以理解为是JavaScript的一个标准

2.快速入门

2.1 引入JavaScript

1.内部标签

<script> 
	// 注释   
</script>

2.外部引入

    <script src=""></script>

2.2基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        //1. 定义变量： 变量类型 变量名 = 变量值；
        // let是局部变量  var是全局变量 const是常量
        var num = 1;
        var name = "Corn";
        var score = 80;
        alert(num);
        //2. 条件控制
        if (score > 60) {
            if (score > 90) {
                alert('优秀');
            } else {
                alert('良');
            }
        }else {
            alert('不及格');
        }

        // 多行注释 
        /**
         * 
         * console.long() 在控制台打印变量
        
    </script>
</head>
<body>
    
</body>
</html>

浏览器调试：

在这里插入图片描述

2.3 简单数据类型了解

数值，文本，图片，音频，视频…

变量

var a = 1;		//不能以数字开头

JS不区分小数和整数

123//整数123
123.1//浮点数
1.231e3//科学计数法
-99//负数
NaN // not a number
Infinity //表示无限大

字符串

'abc'
"abc"

布尔值

console.log(2>1)	//true
console.log(2>3)	//false

逻辑运算

&& 两个都为真，结果为真
|| 一个为真，结果为真
！ 真就是假，假就是真

比较运算符

= 赋值

== 等于（类型不一样，值一样，也会判断为true）：1 == ‘1’ :true

=== 绝对等于（类型一样，值一样，结果为true）

须知：

NaN === NaN 结果为false
只能通过isNaN()来判断这个数是否为NaN

浮点数问题：

console.log((1/3) ===(1-2/3) );

false

避免使用浮点数进行运算

存在精度问题

null和undefined

null 空
undefined 未定义

数组

JAVA : 一系列类型相同的对象

JAVAScript : 不需要一系列相同类型的对象

var arr = [1,2,3,4,5,'hello',null,true];//尽量使用这种

new Array(1,2,3,4,5,'hello',null,true);

对象

对象是大括号，数组中括号；

var person = {
    name : "陈平安",
    age : 3,
    tags : ['js','java','web']
    //每个属性逗号隔开，最后一个不需要
}

2.4严格检查模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
      'use strict';	//严格检查
       var i = 6;
      console.log(i);
    </script>
</head>
<body> 
 
</body>
</html>

3.数据类型

3.1 字符串

正常字符串我们使用单引号，双引号包裹
注意转义字符\
1. \ ’ 字符串
  
  \n 转行
  
  \t table
  
  \4ue2d ‘中’ unicode字符
  
  \x41 Ascll字符
多行字符串编写
```
var msg = `
hello
world
你好
`
```

模板字符串

let name = 'zzz''
let age = 3;

let msg = `你好呀 ,${name}`
console.log(msg) //---->你好呀,zzz

字符串长度
```
console.log(str.length)
```
字符串的不可变

字符串不能通过赋值改变
大小写转换
```
src.toUpperCase()
scr.toLowerCase()
```

str.substring() //前闭后开截取字符串

3.2 数组

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

var arr = [1,2,3,4,5,6]

长度

arr.length //长度可变 长度过长后面就是empty

indexOf，获得下标索引

字符串的"1" 和数字 1 不同
slice() 截取Array的一部分，返回新的数组

取前闭后开下标
push(),pop()

push():压入到尾部

pop():弹出尾部的元素
unshift(),shift()

unshift():压入头部

shift():弹出头部的元素
排序sort()
```
['b','c','a']
sort();
['a','b','c']
```
反转
```
['a','b','c']
reverse();
['c','b','a']
```

concat()

['c','b','a']
concat([1,2,3]) //['c','b','a',1,2,3]
//不改变原来数组

join() 打印拼接数组，使用特点的字符串连接
```
['c','b','a']
join('-');
'c-b-a'
```
多维数组

3.3 对象

var 对象名 = {

属性名：属性值，

属性名：属性值，

属性名：属性值

}

        var person = {
          name : 'zzz',
          age : 3,
          email : "123456789@qq.com",
          score : 0
        }

JS对象用{…}表示，键值对用：表示，属性之间逗号隔开

可以通过 delete 动态删除属性

也可以通过 对象名.新的属性=属性值 就可以添加属性

JavaScript中所有的键都是字符串，所有的值都可以是任何类型

判断属性是否在对象中

‘elements’ in 对象;

判断是否是这个对象自身拥有的 hasOwnProperty();

3.4 Map 和Set

var map = new Map(['tom','100'],['jack',90]);
var score = map.get(tom); //100
map.set('admin',80);	//添加成员
map.delete('tom');//删除元素

Set: 无序不重复的集合

var set = new Set([3,1,1,1,])
set.add(2)://添加元素
set.delete(1);//删除元素
set.has(1);	//判断是否有

3.5 Interator

ES6新特性

        // 数组遍历 
        var arr = [3,4,5];
        for (let x of arr) {
          console.log(x);
        }
        // Map遍历
        var map = new Map([['tom',100],['jack',90],['buck',80]]);
        for (let x of map) {
          console.log(x);
        }
          
        // Set便利
        var set = new Set([5,6,7]);
        for (const x of set) {
          console.log(x);
        }

4.函数

方法和函数的区别：方法在对象中，函数在对象外

4.1 定义函数

定义方式一

绝对值函数

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

定义方式2

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

调用函数

abs(10); //10

限定参数

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

在这里插入图片描述

如果里面是字符串要加单引号,不然会显示未定义

在这里插入图片描述

arguments

          for (let x = 0; x< arguments.length; x++) {
            console.log(x);	//arguments代表的是参数数组,x是下标, 要打印出输出的参数就要把 console.log(x) 更换为 console.log(arguments[x]);
          }

rest

获取已经定义了can’s之外的所有参数

        function abs(x,...rest){
          console.log(rest)	//如果只有一个参数,返回空数组
         if(x>=0){
            return x;
          }else{
            return -x;
          }
        }

4.2变量的作用域

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

在函数体中声明,则在函数体外不可以使用
内部函数成员可以访问外部函数成员,反之不行
内部函数成员有和外部函数成员同名的,内部函数成员会屏蔽外部的
js执行引擎会提示变量声明,但不会提升赋值,还是按顺序赋值
默认全局变量绑定在window下 ,
如果不不同的JS文件,使用了相同的全局变量就会冲突,减少冲突的方法可以定义一个自己的全局变量,然后调用这个全局变量:
```
//唯一全局变量
var Zzz = {};

//定义变量
Zzz.name = 'zzz';
Zzz.age = 18;
Zzz.add = function(a,b){
    return a+b;
}
```
降低命名冲突

var , let , const 区别

var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。
同一个变量只能使用一种方式声明，不然会报错

4.3方法

    var Z = {
      name : 'zzz',
      birth : 2000,
      age : function(){
        var now = new Date().getFullYear();
        return now-this.birth;
      }
    }
    console.log(Z.age())//调用方法一定要带括号

apply方法

    function getAge(){
        var now = new Date().getFullYear();
        return now-this.birth;
    }
    var Z = {
      name : 'zzz',
      birth : 2000,
      age : getAge
    }
    
   console.log(getAge.apply(Z,[])); 
//apply(this,[])两个参数,第一个参数执行引用对象,第二个是参数数组

5.内部对象

标准对象

1、number

typeof(10);



typeof(NaN);



//NaN在JavaScript中代表的是特殊非数字值,它本身是一个数字类型。



typeof(Infinity);

2、boolean

typeof(true);



typeof(false);

3、string

typeof("abc");

4、undefined

typeof(undefined);



typeof(a);//不存在的变量

5、object

对象，数组，null返回object



typeof(null);



typeof(window);

6、function

typeof(Array);



typeof(Date);

7、symbol

typeof Symbol() // ES6提供的新的类型

5.1 Date

基本使用

    var date = new Date();
    console.log(date.getFullYear());   //获得年
    console.log(date.getMonth());    //获得月 月份 外国0-11
    console.log(date.getDate());   //获得日期
    console.log(date.getDay());  //获得星期几
    console.log(date.getHours());      //获得小时
    console.log(date.getMinutes());    //获得分钟
    console.log(date.getSeconds());    //获得秒
    console.log(date.getTime());    //获取时间撮
    console.log(new Date(date.getTime())); //通过时间撮获取当前时区时间
    console.log(date.toDateString());   //获得星期几，月份 日期 年
    console.log(date.toLocaleString()); //获得当地时间

5.2 JSON

JSON是什么

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

在JavaScript中,一切都是对象,任何JavaScript支持的类型都可以用JSON来表示

格式

对象都用 {}
数组都用 []
所有键值对都是 key : value

    var user = {
      name : 'zzz',
      age : 3,
      sex : '男'
    }
    var test ='{"name":"ddd","age": 3,"sex":"女"}';
    // 对象转换为JSON字符串
      JSON.parse(test);
      JSON.stringify(user);

JSON.stringify是从一个对象中解析出字符串
JSON.parse是从一个字符串中解析出对象 (json键值对)

JSON字符串和JS对象的区别

 var test ='{"name":"ddd","age": 3,"sex":"女"}'; //这是JSON字符串 key值要用单引号或者双引号包裹起来,整个对象也要用单引号或者双引号包裹起来
var user = {
      name : 'zzz',
      age : 3,
      sex : '男'
    }	//这是JS对象 key值和整个对象不用包裹

6.面向对象编程

6.1什么是面向对象

面向对象两个重要东西:

类和对象:

类:模板类是对象的抽象
对象:实例对象是类的具体表现

在JavaScript

通过__proto__选择原型

以前的

    function Student(name){
      this.name = name;
    }
    
    var xiaoming = new Student('xiaoming');
    console.log(xiaoming.name) ;    //打印出小明

ES6引入的

定义一个类,属性,方法

class Student{
      constructor(name){
        this.name = name;
      }
      hello(){
          alert('hello');
        }
    }

    var xiaoming = new Student('xiaoming');
    xiaoming.hello();

继承

class Student{
      constructor(name){
        this.name = name;
      }
      hello(){
          alert('hello');
        }
    }
    class xiaoStudent extends Student{
      constructor(name,grade){
        super(name);	//继承类必须要继承父类构造器
        this.grade = grade;
      }

       myGrade() {
        console.log(this.grade);
      }
    }
    var xiaoming = new Student('xiaoming');
    xiaoming.hello();
    var xiaohong = new xiaoStudent('xiaohong',100);
    xiaohong.myGrade();

7.操作BOM对象

BOM：浏览器对象模型

**JavaScript和浏览器的关系：**JavaScript就是为了能在浏览器中运行

window

window代表浏览器窗口

window.innerHeight 内部高度

window.outerHeight 外部高度

window.innerWidth 内部宽度

window.outerWidth 外部宽度

Navigator

封装了浏览器的信息：

在这里插入图片描述

大多数时候不适合navigator对象，可能被人为修改

screen

screen.width 屏幕宽度

screen.height 屏幕高度

location

location 代表当前页面URL信息

host : 主机

href:网页

protocol : 协议

reload : 刷新（方法）

location.assign(‘URL’) ：访问新的URL

document

document 代表当前页面信息 HTML DOM文档数

document.titile : 当前页面标题

获取具体文档数节点：

  <dl id='app'>
    <dt>java</dt>
    <dd>JAVASE</dd>
    <dd>JAVASE</dd>
  </dl>
  <script> var d1 = document.getElementById('app') </script>

获取cookie

document.cookie

服务器端可以设置 cookie ： httpOnly

history

history代表浏览器的历史记录

history.back() ：后退

history.forward() :前进

8.操作DOM对象

DOM：文档对象模型

核心

整个浏览器网页就是一个DOM树型结构

更新：DOM节点
遍历DOM节点：得到DOM节点
删除一个DOM节点
添加一个新的节点

要操作一个DOM节点，就必须要先获得这个DOM节点

获得DOM节点

  var p2 = document.getElementsByClassName('p2');
   var p1 = document.getElementById('p1');
  var h1 = document.getElementsByTagName('h1');
  var childrens = document.getElementById('father').children; //获取父节点下的所有子节点
  //  childrens.lastChild() 最后一个子节点
  // childrens.firstChild() 第一个子节点

更新节点

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

删除节点

删除节点的步骤：先获取父节点

removeChild() 删除子节点

parentElement 找到父节点

**注意：**删除节点的时候children数组是在时刻变化的

插入节点

追加操作：

<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);  将js放到最后面
    var newP = document.createElement('p'); //创建一个P标签
    newP.id = 'newP';
    newP.innerText = 'Hello World';
    list.appendChild(newP);	//	向后插入
  </script>

 <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);  将js放到最后面
    var newP = document.createElement('p'); //创建一个P标签
    newP.id = 'newP';
    newP.innerText = 'Hello World';
    list.appendChild(newP);

    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');
    list.appendChild(myScript);

    var body = document.getElementsByTagName('body');
    body[0].setAttribute('style','background : red');
    
    
    //body[0].style.background = 'red';
    //list.appendChild[body];
  </script>

insert 从前插入

  <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 ee = document.getElementById('ee');
   var js = document.getElementById('js');
   var list = document.getElementById('list');
   list.insertBefore(js,ee);	//调用者要包含被调用的两个参数节点，第一个参数是插入到第二个参数前面
  </script>

9.操作表单

表单是什么：form DOM 树

文本框 text
下拉框
复选框 checkbox
单选框 radio
隐藏域 hidden
…

表单的目的:提交信息

获得要提交的信息

 <form action="post">
   <p>
    <span>用户名 ：</span><input type="text" id="username">
   </p> 
   
   <p>
    <input type="radio" value="man" id="man" name="sex">男
    <input type="radio" value="woman" id="woman" name="sex">女
   </p>

  </form>

  <script>
    var input_username = document.getElementById('username');
    var radio_man = document.getElementById('man');
    var radio_woman = document.getElementById('woman');
    var radio_checked = document.getElementsByName('sex'); 

    //对于单选框多选框这种，.value 只能获得设置好的值
    // 可以通过 .checked 判断是否被选择
  </script>

抓包

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- MD5加密算法 -->
  <!-- <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script> -->


</head>

<body>
  <form action="#" method="post">
   <p>
    <span>用户名 ：</span><input type="text" id="username" name="username">
   </p> 
   <p>
    <span>密码 ：</span><input type="text" id="password" name="password">
   </p> 
   <button type="submit" onclick="aaa()">提交</button>
 

  </form>

  <script>
    function aaa() {
      var username = document.getElementById('username');
      var password = document.getElementById('password');
      
      console.log(username.value);
      console.log(password.value);

      password.value = '123123';
      return true;
    }
  </script>

</body>
  
</html>

如果在用户名和密码那里不加name属性，就抓不到值
在这里插入图片描述

提交转换后的密码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- MD5加密算法 -->
  <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>


</head>

<body>
  <form action="#" method="post">
   <p>
    <span>用户名 ：</span><input type="text" id="username" name="username">
   </p> 
   <p>
    <span>密码 ：</span><input type="password" id="password" >
   </p> 
   <p>
     <input type="hidden" id="md5-password" name="md5-password">
   </p>
   <button type="submit" onclick="aaa()">提交</button>
 

  </form>

  <script>
    function aaa() {
      var username = document.getElementById('username');
      var password = document.getElementById('password');
      var md5_password = document.getElementById('md5-password');
      console.log(username.value);
      console.log(password.value);

      md5_password.value = md5(password);
      
    }
  </script>

</body>
  
</html>

如果想要提交失败，就需要添加return false ，并且在按钮或者表单上加上return

onclick="return aaa()"


function aaa() {
      var username = document.getElementById('username');
      var password = document.getElementById('password');
      var md5_password = document.getElementById('md5-password');
      console.log(username.value);
      console.log(password.value);

      md5_password.value = md5(password);
      return false;
      
    }

10.jQuery

JavaScript 和 jQuery 的关系

jQuery是一个库，存在大量的JavaScript函数

获取jQuery

可以在线引入 jQuery的链接，也可以下载放到项目里

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <script src="lib/jquery-3.5.1.js"></script> -->

<!-- 公式 ：$(selector).action() -->

</head>

<body>
  <a href="" id="test-jquery">点我</a>
  <script>
    // var aaa = document.getElementById('test-jquery');
    // aaa.click(function(){
    //   alert('hello')
    // }
    // );
    $('#test-jquery').click(function(){
       alert('hello');
     });
  </script>


</body>
  
</html>

选择器

    $('p')  标签选择器
    $('#id1') ID选择器
    $('.class1') 类选择器

事件

$().action()

小结

巩固JS 看游戏代码，源码

m0_46143221

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记

JavaScript1.什么是是JavaScriptJavaScript是世界上最流行的脚本语言EMCAScript可以理解为是JavaScript的一个标准2.快速入门2.1 引入JavaScript1.内部标签<script> // 注释 </script>2.外部引入 <script src=""></script>2.2基本语法入门<!DOCTYPE html><html lang="en
复制链接

扫一扫