JavaScrip

最新推荐文章于 2023-04-16 14:59:35 发布

无掺杂

最新推荐文章于 2023-04-16 14:59:35 发布

阅读量447

点赞数

文章标签： javascript webview html

本文链接：https://blog.csdn.net/weixin_53968665/article/details/122145565

版权

一.初识JS

JS是过程式语言，它的语法标准是ECMAScript。JS是一种解释性语言，没有编译和运行之分，只有运行时错误，即语法错误。对于开发者开说，一定要熟悉控制台，要查看JS错误，也需要从控制台上看。
如何进行JS编写？
1.关联在HTML（1）内部方式管理<script>JS语句</script>（2）外部方式引入<script src="JS资源的url"></script>
2.在浏览器的开发者工具的控制台进行JS编写，每行都独立执行
注释方法：//单行注释；/*多行注释*/
alert(message):弹窗（消息）；JS中的函数调用过程
window.alert(message):window是可以省略的；window是个对象（指向一个对象）,window是一个全局存在的对象；window.alert(...)执行window对象下的alert方法（函数）
prompt(message):弹出输入框，并得到用户输入的值
console.log(message):在控制台打印一条日志
console.error(message):在控制台打印一条错误日志
JS语句和Java中不同，并不要求必须出现在方法中；JS语句可以随处写

二.JS基本语法

1.JS的数据类型：

number，string，boolean，null，function，array，object，defined

number类型：Infinity正无穷；-Infinity负无穷；Nan 不是数字

string类型的字面量：用单引号或双引号，模板字符串用反引号

undefined/null：都是针对一种不存在的抽象，但分成了两个undefined（未定义）和null（空），undefined是最常见的

2.JS的变量：

只有一种（var引用类型）

数据有类型，变量无类型

JS中的变量必须先定义后使用

变量（variable）是对内存上某段空间的逻辑抽象

JS的变量（包括数组元素）没有类型（都可以视为Object）

JS是弱类型语言，动态类型语言

3.赋值操作：=

要求：等号左边类型和右边类型是同一个类型，除非以下几种特例：

左右两边都是基本数值类型(byte,short,int,long,float,double,char)之间可以相互转换，有些转换是自然的（向上转型），有些转换是需要强制类型转换的（向下转型）

左边的引用类型，右边是引用所指向的对象时List I = new ArrayList();要求，左边两边的引用处于类的继承关系层次上

左边是包装类，右边是基本类型Integer i = 1;隐含了自动装箱；反之，int a = new Integer(1);隐含了自动拆箱

4.比较：

==不要求类型一致

===要求严格相等，类型和值都相等

!=和!==同理

if(条件){....}

条件如何为true?boolean为true，number不是0，string类型不是空，其他类型不是undefined以及null

5.数组array：

几个常见方法：

.length长度

.shift(...)头删

.unshift()头插

.push(...)尾插

.pop()尾删

a.sort()排序

定义数组：var a = [];//定义了个空数组，类似JS中变量是无类型的，JS数组元素也是无类型的（元素类型可以不统一）

其中的类型可以任意

遍历数组：for(var i = 0; i<a.length; i++){....} 或者 for(var i in a){....}

6.函数function

格式：

// 创建函数/函数声明/函数定义

function 函数名(形参列表) {

函数体

return 返回值;

}

// 函数调用

函数名(实参列表) // 不考虑返回值

返回值 = 函数名(实参列表) //考虑返回值

注：

函数是JS中第一公民（函数也是是一种数据类型，可以赋值给其他变量，甚至保存在数组中）

函数可以定义在其他函数中

定义时，没有数据类型约束，所以返回值没有类型，形参类型没有

函数定义时没有return，就视为return undefined

三.JS中的对象

在 JS 中, 字符串, 数值, 数组, 函数都是对象。每个对象中包含若干的属性和方法。

使用字面量创建对象：

var a = {};     // JS 中的空对象，类似 Java 中的空的 Map
function someMethod() {
    console.log("见红太狼");
}
var person = {
    name: '灰太狼',
    age: 88,
    doing: someMethod,  // 把已经定义的函数作为 doing key 的 value
    say: function (target) {    // 把匿名函数作为 say key 的 value
        console.log("你好呀, " + target);
    }
};

JS 中的对象，像 Map 一样是开放着的，可以随时随地的动态添加 key-value 进去

//使用对象的属性和方法:
// 1. 使用 . 成员访问运算符来访问属性 `.` 可以理解成 "的"
console.log(person.name);
// 2. 使用 [ ] 访问属性, 此时属性需要加上引号
console.log(person['age']);
// 3. 调用方法, 别忘记加上 () 
student.say();

使用构造函数创建对象：

格式：

function 构造函数名(形参) {

this.属性 = 值;

this.方法 = function...

}

var obj = new 构造函数名(实参);

function Student(name, age) {
    // this 代表当前对象 ：把整个函数当成构造函数
    this.name = name;
    this.age = age;
    this.sayHello = function (target) {
        console.log("Hello，" + target);
    };
    // 不需要 return ：可以理解为整个函数是构造函数，所以没有返回值
}

var o1 = new Student('熊大', 5);
var o2 = new Student('熊二', 3);

使用构造函数可以把相同的属性和方法的创建提取出来, 简化开发过程

ES6中，引入了class作为“语法糖”存在

// 没有访问限定，认为都是 public
class Student {
    // 由于 JS 对象中的属性是开放的，可以随时随地添加，所以不规定属性
    // constructor : 构造方法，无论 class 叫什么名字
    constructor(name, age) {
        this.name = name;        //this['name'] = name;
        this.age = age;          //this.age = age;    
    }

    // 这里不用写function
    sayHello(target) {
        console.log('你好 ' + target);
    }
    introduce() {
        // 必须是 this.name，不能省略 this
        console.log(this.name + ", " + this['age']);
    }

}

var o1 = new Student('光头强', 30);
o1.introduce();

function f(o) {
    // 根本不管 o 是什么类型，只要求 o 这个对象有 key 是 say 的 value
    // 并且 value 的值是 function 就可以
    o.say();
    // 这种方式叫做鸭子类型(duck type)
}
//临时构造
//f({
//    say: function () { console.log('临时构造的对象')}
//});

function Student() {
    this.say = function() { console.log('我是学生'); }
}
var o = new Student();
f(o);

JavaScript与Java对象的区别：

JavaScript没有“类”的概念；

JavaScript对象不区分方法和属性；

JavaScript对象没有private/public等访问控制机制；

JavaScript对象没有继承；

JavaScript没有对象

四.DOM(Document Object Model)

querySeletor（选择器字符串），文档中第一个符合选择器规则的元素（和CSS中选择器规则一样）

querySelectorAll（选择器），文档中所有符合选择器规则的元素，类似数组

五.事件

事件驱动(event-driven) 当(on) 点击(click)

事件三要素：事件源（某个元素），事件，行为（函数）

// 定义当事件发生时的行为，以函数的形式体现
var button = document.querySelector('button');
button.onclick = changeH1   // changeH1 没有加括号，没发生函数调用
console.log('为 button 绑定了 changeH1 函数');
// button 被点击时，由浏览器内部调用 changeH1 函数
// JS 中的函数定义位置不重要，可以先使用，后定义
function changeH1() {
    console.log('changeH1 被调用了');
    var h1 = document.querySelector('h1');
    h1.innerText = '按钮被点击';// 修改 h1 内部的文本（它的 innerText 属性)
}