JavaScript

JavaScript（交互）

什么是javaScript?

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

引用方式：

  1. 内部标签(可以放在任意位置)

    <script>-->
     alert("你好")-->
</script>

  2. 外部引入

    <script src="One.js"></script>

基础语法：

注意点：JavaScript有严格的大小写区分

声明变量

var：用于全局变量，可以跨块被调用

let：用于块作用域局部变量（局部变量建议都使用let），不能跨块被调用

Conset：代表常量不能变

所以同一个变量名可以定义两次

控制台输出用，console.log

<!-- 弱语言 -->
   <script>
//1.基础类型
var a=10;
var b='才';
var c="你";
var d=10.2;
var e=false;
// 2.流程控制
if (!e){
    alert(a+b+c+d)
}
switch (a){
    case 1:
        console.log("为1");
        break;
    case 10:
        console.log("为10")
        break;
}
 // 3.循环
for (let i = 0; i < 2; i++) {
    console.log("我在for循环"+i)
}
var g=3;
while(true){
    g--;
    if (g==0){
        break;
    }
    console.log("我在while循环"+g)
}

do {
    console.log("dowhile循环先执行一次")
    h=2;
} while (h==0){
  console.log("dowhile循环"+h);
    h--;
}
 </script>

数据类型：

基础数据类型：

number：

整数:10

小数:10.0

科学计数（e）:1e5=100000

字符串：

单引号：'hello，world'

双引号：“hello，world”

布尔值

true，false

Undefined和Null

默认值：Undefined，表示变量不含值

null为空值

引用数据类型：

数组Arrays：与java不同，可以存放任意类型

访问：越界的数时，会打印出Underfined默认值，而不会像java一样报异常

var shuchu=["你好",1，false]

对象Object：对象名，有声明，花括号，逗号隔开，键不能是字符串数字等

访问：对象名.键名

var duixiang={
    name='lc',
    age=20,
    tar=["aa",12]
}

运算符：

逻辑运算符：

&&

||

！

比较运算符：

=（赋值运算符）：赋值

==：等值就为等

===：等值且等类型（平时用这个就可以）

类型运算符：

typeof：返回值类型

instanceof ：判断是否是当前类型，返回布尔值

其他运算符与java差不多

严格检查模式：

必须写在第一行

避免javascript的随意性问题

'use strict';

语法详解：

字符串：

  1. 可以用单引号或者双引号

  2. 首先可以直接用索引（但是不能直接修改索引，就像java的字符串底层是用final修饰的），（不需要像java一样转数组才能用索引），

    let a="你1231啊";
console.log(a[2]);

  3. 转义符

    1. \n换行
    2. \t (tab)
    3. \ \（\）

  4. 字符串也是一个对象（java里字符串也是一个类）

  5. 常用方法和属性（基本跟java一样）

    • length
    • charat（）：返回指定字符的索引
    • indextof（）：
    • concat（）：
    • replace（）
    • substring（）：
    • trim（）
    • toLocaleUpperCase()
    • toLocaleLowerCase()

数组：

注意点：Array可以是任何类型的数据类型（不像java单类型数组）

  1. 长度

    shuzu.length;

    注意：我们可以在这里直接修改数组的长度（不像java数组声明就固定）

  2. 取值：一样通过索引，shuzhu[0];

  3. 遍历数组，for，foreach

  4. 常用方法和属性

    1. length

    2. push():添加元素，你甚至可以直接超出最大值，直接定义索引添加，真随意

       var shuzu=[1,2,'a',"你好"];
        shuzu[4]='zai';

    3. tostring（）

    4. slice（）：截取数组一部分，返回一个新数组

    5. concat（）：合并数组

    6. sort（）：排序

    7. reserve（）：反转

  5. 多维数组

    var shzuu=[[12,11],["1",true],false,10.2]

对象：

在 JavaScript 中，始终存在一种默认的全局对象。

1642401340423

  1. 语法

    声明 对象名={
    键值对1，
    键值对2
}

let duixiang={
    name:user;,
    age:20,
    email:21312@qq.com
}d

  2. 对象赋值

    person.name="asdas"
person.age=100    
person.age="ss"  //赋值时不需要类型相同

  3. 动态删除

    delete duixiang.name;

  4. 动态添加

    duixiang.zadi="别不服啊"    //直接定义赋值，就在对象里创建了这个属性

  5. 在 JavaScript 中，始终存在一种默认的全局对象。 我们一般用this当前对象来调用函数

  6. 函数是对象方法， 如果一个函数不是 JavaScript 对象的方法，那么它就是全局对象的函数

  7. 传入参数可以是任意，不需要对应行参个数

  8. 方法重用，call函数，你能通过call函数调用其他对象的方法

  9. 在 JavaScript 中，几乎“所有事物”都是对象， 所有 JavaScript 值，除了原始值，都是对象

流程控制：

  • if else if else

  • switch case

  • while

  • for

  • 这里的增强for循环跟java有些不同

    let shu=[1,23,'a'];
        for (let shuKey in shu) {    for  in 遍历索引
            alert(shu[shuKey])
        }
		for (let shukey of shu){	 for   of 遍历值
            alert(shukey)
        }

Map和Set：

  1. Map(跟java的hashMap差不多，都是键值对,且都是键值都为任意类型)

    let M= new Map();
        M.set("n",1);
        M.set(1,true);
        alert( M.get("n"));
		M.delete()
		M.entries()//获取键值数组，使用迭代器用来遍历（也可以用for  of遍历）
   for (const entry of M.entries()) {
                alert(entry)
        }
		M.keys()//获取键的数组
		M.values（）//获取值的数组

  2. Set（跟java里set接口的集合有相同特性，无序且不重复）

let S= new Set();
       S.add("1");
       S.delete("1");
       S.entries()//获取键值数组，用来遍历
	   S.keys()//获取键的数组

函数：

定义函数：

语法:

定义一： function a(){}

  定义二： var a=function(){}  //有点像java匿名内部类

  1. 当传入函数多个参数时，可以使用函数内置对象 arguments 或 rest （ 包含函数调用时使用的参数数组）代替那些参数

    function a(a,b,...rest){
            for (let i = 0; i <rest.length ; i++) {
                alert(i);
            }
        }

function a(c,d){    arguments就是你参数的数组对象
    for(let i = 0; i <arguments.length ; i++){
        
    }
}

变量的作用域：

  1. 假设在函数体中声明的，则在函数外不可以使用（但是闭包后可以使用）
  2. 两个函数内使用相同的变量名，不会冲突
  3. 函数内有和函数外一样的变量，会遵循就近原则
  4. 全局变量
  5. javascript实践上只有一个全局作用域windows
  6. 因为var定义的可以被外部访问到，所以就有了局部作用域 let
  7. var修饰的是变量，所以有了常量关键字const

方法：

定义方法

方法就是把函数丢到对象里，此时对象只有两个东西属性和方法

 var a={
          age:20,
          hobby:function (){
              console.log(this.age)
          }
     a.age;
     a.hobby();

  1. this，js万物皆对象，数组，函数等都是对象，this在哪就是谁的对象，在外面就是window对象

  2. 在js可以控制this指向谁使用apply关键字，与call方法不同就在于call是传参，apply是传参数组

    使用语法：当前对象.方法.apply(指向对象，[数组传参])

var a={
          hobby:function (){
              console.log(this.age)
          }
      }
      var b={
          age:10,
          name:"l"
      }
      a.hobby.apply(b,[])

内部对象：

Date：

  1. new Date() 用当前日期和时间创建新的日期对象：
  2. new Date(year, month, ...) 用指定日期和时间创建新的日期对象。
  3. new Date(dateString) 从日期字符串创建一个新的日期对象：
  4. new Date(milliseconds) 创建一个零时加毫秒的新日期对象： ：以1970.1.1加起，可以将时间戳转换成日期
  5. 一些获取和设置的方法：getTime（时间戳），getDate（），getfullyear，setDate（）等等

面向对象编程：

跟其他面向对象有些区别

  • 类：模板 （原型对象）
  • 对象：具体实例

原型（继承)

var a={
      name:"lc",
      play:function () {
          console.log(this.name+"在打游戏")
      }
    }
    var b={
        name:"小明"
    }
    //b的原型是a(继承),继承了a的属性和方法，此时就可以调用a的方法了
    b.__proto__=a;

calss继承

  1. 定义一个类（跟java除了构造器不一样，其他都一样）

     class student{
         name;
        constructor(name) {
              this.name=name;
        }

        method=function () {
            console.log(this.name+"")
        }
    }
    var xiaoming=new student("xiaoming");
    xiaoming.method();

  2. 继承

    class smallstudent extends student{
        constructor(name) {
            super(name);
            this._name = name;
        }

        get name() {
            return this._name;
        }

        set name(value) {
            this._name = value;
        }
    }
  
    var smallstudent1 =new smallstudent("小花");
    smallstudent1.method();

BOM对象（重点）：

浏览器对象模型（Browser Object Model (BOM)）

window对象：

  1. 它代表浏览器窗口
  2. 全局变量是window对象的属性
  3. 全局方法是window对象的方法
  4. 可以查看浏览器当前窗口的大小

Timing事件：

  1. window.setTimeout(function, milliseconds);
第一个参数是要执行的函数。

第二个参数指示执行之前的毫秒数。

  2. clearTimeout() 方法停止执行 setTimeout() 中规定的函数。

    myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

DOM对象（重点）

HTML DOM（文档对象模型），浏览器网页就是一个Dom树形结构

  • 更新：更新Dom节点
  • 遍历：得到Dom节点
  • 删除：删除一个Dom节点
  • 添加：添加一个新节点
  • 要操作一个Dom节点，必须先获取一个Dom节点

获取节点方式：

除了通过id，其他获取方式都是获取一个集合（因为不止一个）

  1. 通过 id 查找 HTML 元素

    var myElement = document.getElementById("intro");

  2. 通过标签名查找 HTML 元素

    var x = document.getElementsByTagName("p");

  3. 通过类名查找 HTML 元素

    var x = document.getElementsByClassName("intro");

更新节点：

  1. 修改文本值innerHtml

删除节点：

首先要获取它的父类，通过它的父类去删除它

    let father=document.getElementById("One");   //父类
    let child=document.getElementsByTagName("p");
    father.removeChild(father.children[0]);
删除是一个动态的删除，如果你一次性删除多个，总会有一个删除不了出错

添加节点：

let P= document.getElementsByTagName("p")
    document.getElementById("Five").appendChild(P[0]);   //实现将标签追加到另外一个节点

    let B= document.createTextNode("b");               //创建一个节点设置内容并添加到另外一个节点
   B.textContent="nihao";                              
    document.getElementById("Four").appendChild(B);

操作表单（验证）：

选中表单进行一些基本操作

let  u=document.getElementsByName("user")
    let Man=document.getElementById("man");
    let INPUT= document.getElementsByTagName("input");
    INPUT[2].checked;

MD5算法，网上下包

jQuery:

是一个JavaScript库

语法：

$(CSS选择器).事件（）：所以它的选择器很多

  1. 类 .class
  2. id #
  3. 标签 就是标签

HTML

  1. 当网页加载完后$(function(){

    })

  2. 设置HTML的内部文本 获取到的节点元素.text（”你好“）

  3. 获取 也是节点元素.text()

CSS:

  1. 隐藏一个HTML元素： 节点元素.hide();
  2. 显示： 节点元素.show()

操作DOM：

  1. 删除节点：选中节点.remove()
  2. 获取父节点：选中节点.parent（）

事件：

  1. 鼠标事件：
  2. 键盘事件
  3. 加载事件
  4. 点击事件
  5. 输入事件

总结：

  1. 首先JavaScript是一种脚本弱类型语言，是为了操作网页，也就是操作html元素

  2. 基础语法：

    1. 声明有三种：vat全局，let局部，const常量
    2. 数据类型：
      1. 基础数据类型：number，字符串（” “ 和' ' 都可以），布尔类型以及null和默认Undefined
      2. 引用数据类型：对象，数组
    3. 函数
      1. 语法：function 函数名（）
    4. 流程控制：与java基本一样
    5. 数组：
      1. 语法==》 声明 数组名=[1,'2',true]
      2. 注意点：与java不同，js的数组可以存任意类型，并且可以重复
      3. Map集合：跟java里HashMap相似，键值对，都可以为任意类型，可重复
      4. set集合 ：不可重复且无序
    6. 对象
      1. 语法：var 对象名={键值对1，键值对2} 键值对可以是属性和方法
      2. 内置对象：Date，JSON
      3. 面向对象：与一般面向对象不一样
        1. 一般面向对象：类（模板），对象（具体实例）
        2. js：类（原型对象），对象

  3. BOM对象

    1. 是浏览器对象，可以操作浏览器的一些属性
    2. 常用：window，Timing事件（设置启动浏览器后执行某些操作需要的时间）

  4. DOM对象

    1. 是HTML文档对象，顾名思义就是用来操作HTML的元素的
    2. 既然要操作肯定就要先选中，选中方式
      1. class ：
      2. ID
      3. 标签
    3. 选中完后的操作，可以增删改HTML节点
    4. 可以修改css属性
    5. 可以获取表单的信息做验证
    6. 也可以使用时间，点击，加载，鼠标划过，键盘等事件

  5. 上面的JS代码我们发现有些繁琐，所以就有了Jquery库

    1. 简化了选中语法：$(CSS选择器).事件（）
      1. class
      2. id
      3. 标签
      4. $就代表了Jquery
      5. 由于括号里是CSS选择器，所以选择器比js多很多选择

  6. 常用事件：键盘，鼠标，加载，点击，输入等等事件（文档查询即可）

posted @ 2022-03-14 18:40  又菜又ai  阅读(90)  评论(0)    收藏  举报