javaScript

惠青 · 發表於 2021-11-8 09:53:00

JavaScript

JavaScript是一门跨平台，面向对象的脚本语言，来控制网页行为的，它能够使网页可交互。
基础语法与java类似

JavaScript（简称：JS）在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准。
ECMAScript 6 (ES6) 是最新的 JavaScript 版本（发布于 2015 年)。

JavaScript引入方式

内部方式

在html文件中，使用<script>标签来编写js代码。

建议编

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

</body>
</html>
<!-- 内部引入-->
<script>
    alert("京阿");
</script>

写在<body>元素底部，可以提高显示速度，将javaScript写在body中的最后，先加载html界面。

外部方式

将js代码编写为一个后缀名为js的文件中。
在html文件中通过<script scr="js路径"></script>引入文件

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

alert("真菜");

书写语法

区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无、建议写上
注释
- 单行注释：// 注释的内容
- 多行注释：/* 注释的内容 */
一对大括号标识代码块

输出语句

windows.alert(): 写入警告框
document.write():写入到html页面
console.log();在控制台输出

<script>
    window.alert("hello js~");  //弹出警告框
    document.write("<h4>四级标题</h4>");    //写出html文档
    console.log("js log...");   //写出日志到控制台
</script>

变量介绍

JavaScript 中用var关键字(variable的缩写)类声明变量
Java是一门弱类型语言，变量可以存放不同类型的值

JavaScript

var age=10；
     age="王王"

变量

弱类型语言，变量可以存放不同类型的值，其他与Java一样

var

作用域：全局变量

let

作用域 let的关键字存在的代码快内
不允许重复声明

const

定义一个只读的常量

数据类型

number :数字（整数，小数，NAN）

string：字符，字符串，单双引皆可

boolean: 布尔。

null: 对象为空对于null会返回object，null被认为是对象占位符

undefined:未定义

typeof: 获取数据类型

运算符

类似于Java

==

1判断类型是否一样，不一样进行类型转换
再去比值

===全等于

不会进行类型转换

类型转换

其他类型转化为bumber

1 string:按照字符转的子面值，转为数字，如果字面值不是数字，转化为NAN

var str=+"adc";+号代表正数 parseInt()

2 boolean true 转换为1 false 转换为0

其他类型转换为boolean（用于简化健壮性判断）

1 number 0和NAN转换为0，其他数字为true

2 string 空字符串为false

3 null 为false

4 undefined为false0

流程控制语句

和Java一样

函数

通过function关键词进行定义，两种语法为

function functionName（参数1，参数 2...）{

要执行的代码

//不需要写返回值，形参不需要类型

//有返回值直接return

}

var functionName=function（参数1，参数2）

{

要执行代码

}

传递参数的时候传几个都能运行，但是没太意义

JavaScript对象

Array

格式一

var 变量名 = new Array(元素列表);

格式二

var 变量名 = [元素列表]; 
方法 put（E...e） splice 参考手册w3c

String

格式一

var 变量名 = new String(s);

格式二

var 变量名 = s;   // 单引、双引都可以

trim() 去除空格

自定义对象

var 对象名称 = {
属性名称1:属性值1,
属性名称2:属性值2,
...
函数名称:function (形参列表){}
...
};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义对象</title>
</head>
<body>

</body>
</html>

<script>
    var person = {
        name : "百丽",
        age : 26,
        eat:function () {
            alert("上班干活...");
        }
    };

    alert(person.name);
    alert(person.age);
    person.age = 38;
    alert(person.age);
    person.eat();
</script>

Window对象

1.BOM介绍

Browser Object Model 浏览器对象模型
JavaScript 将浏览器的各个组成部分封装为对象
- Window：浏览器窗口对象
- Navigator：浏览器对象 (了解)
- Screen：屏幕对象 (了解)
- History：历史记录对象
- Location：地址栏对象

2.Window窗口对象

获取：直接使用 window，其中window. 可以省略
属性：获取其他 BOM对象

方法

1.DOM介绍

Document Object Model 文档对象模型
将标记语言的各个组成部分封装为对象
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
JavaScript 通过 DOM，就能够对 HTML进行操作了
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式（CSS）
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素

1.document对象常用方法

getElementById(id值)：根据id属性值获取，返回一个Element对象
getElementsByTagName(标签名)：根据标签名称获取，返回Element对象数组
getElementsByName(name值)：根据name属性值获取，返回Element对象数组
getElementsByClassName(class值)：根据class属性值获取，返回Element对象数组

事件监听

事件：HTML 事件是发生在 HTML 元素上的“事情”。例如：(按钮被点击、鼠标移动移出、键盘按键按下等)。
事件监听：JavaScript 可以在事件被侦测到时执行对应的代码。

事件绑定

方式一：通过 HTML标签中的事件属性进行绑定

<input type="button" onclick='on()’>

function on(){    
    alert("我被点了");
}

方式二：通过 DOM 元素属性绑定

<input type="button" id="btn">

document.getElementById("btn").onclick = function (){
    alert("我被点了");
}

常见事件

正则表达式

定义了字符串组成规则

定义方式

直接赋值

var reg = /^\w{6,12}$/;

创建对象

var reg = new RegExp("^\\w{6,12}$");

成员方法

test(str)：用于判断是否满足指定的规则。满足为true、不满足为false。

来源：https://www.cnblogs.com/yang-qiu/p/15522856.html

javaScript

JavaScript

JavaScript引入方式

内部方式

外部方式

书写语法

输出语句

变量介绍

变量

数据类型

运算符

类型转换

流程控制语句

函数

JavaScript对象

Array

String

自定义对象

Window对象

1.BOM介绍

2.Window窗口对象

1.DOM介绍

1.document对象常用方法

事件监听

事件绑定

常见事件

正则表达式

瀏覽過的版塊