本笔记没有Web APIs的DOM BOM操作！
此笔记仅仅是js基础。
学习自B站黑马程序员的JS0基础教程

JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。
Java（由 Sun 发明）是更复杂的编程语言。

常用函数

`<script>`

JS，JavaScript当然要用到这个标签啦~

<script>标签

在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

<script>
alert("我的第一个 JavaScript");
</script>

浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

写标签`document.write()`

直接写标签，

可以直接在js标签中写入html标签及内容。

弹窗提示`alert()`

弹窗提示，对用户不友好，

但是对测试，编程人员很管用。

输入`prompt()`

弹出阻断用户操作的弹窗，让用户输入数据

输出`console.log()`

控制台输出语句

查找页面元素`document.getElementById()`

查找页面元素，

参数可以填html中的id标签内容。

用于更改id的内容信息属性等。

已知可以更改内容(innerHTML)，图片链接属性(src)，样式表中的属性如颜色style.color

字符串匹配`str.match()`

可以在字符串中匹配参数中的字符串，如果存在则为True真，不存在则为False假

属性：`innerHTML`

返回值是一个object类型，可以使用返回值的innerHTML属性改变其标签内容。

`onclick:`属性

存在于button按钮中，此写法为行内式的写法

里面可以放弹窗测试等等，

可以放js函数，语句等。

为什么学习 JavaScript?

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

document.write 直接写入 HTML 输出流

您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。

<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>

alert() 弹窗测试

alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。

alert('欢迎!')

对事件的反应

<button type="button" onclick="alert('欢迎!')">点我!</button>

改变 HTML 内容

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

x=document.getElementById("demo");  //查找id元素
x.innerHTML="Hello JavaScript";    //改变内容

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
    
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
    x=document.getElementById("demo");  // 找到元素
    alert(x.innerHTML)
    x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
    
</body>
</html>

您会经常看到 document.getElementById("some id")。这个方法是 HTML DOM 中定义的。

DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。

JavaScript：验证输入

JavaScript 常用于验证用户的输入，验证输入是否为数字。

<script>
function myFunction()
{
    var x=document.getElementById("demo").value;
    if(x==""||isNaN(x))
    {
        alert("不是数字");
    }
}
</script>

以上实例只是普通的验证，如果要在生产环境中使用，需要严格判断，如果输入的空格，或者连续空格 isNaN 是判别不出来的。可以添加正则来判断

<script>
function myFunction()
{
    var x=document.getElementById("demo").value;
    if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
        alert("不是数字");
    }
}
</script>

JavaScript 用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

您可以在 HTML 文档中放入不限数量的脚本。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。

`<body>` 中的 JavaScript

使用document.write写到<body> 标签中。

<body>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
</body>

`<head>` 中的 JavaScript 函数

和body中的js函数两者没有区别。

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
    
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
<script src="myScript.js"></script>
    
</body>
</html>

myScript.js 文件代码如下：

function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}

变量

和C差不多啦

一次声明多个变量并且赋值

var a = 9, b = 10, c = 11;
// 多个变量赋值 声明 时  需要使用逗号分割

变量声明但未赋值

此时输出的是undefined（未定义的）

不声明不赋值直接使用会报错
不声明直接赋值可以使用！

数据类型

JS是弱类型的脚本语言，

其变量的数据类型是根据欲赋值的变量来确定的。

变量的数据类型在运行中是可以改变变化的。

简单数据类型

Nubmer 数字类型
- 八进制：var num1 = 010; //零开头的是八进制
- 十六进制： var num2 = 0xa; //0x开头的是十六进制
- 数值的最大值：Number.MAX_VALUE 最小值：Number.MIN_VALUE
- 无穷大： Infinity 大于任何数值
- 无穷小： -Infinity 小于任何数值
- NaN ， Not a number，代表一个非数值
String 字符串类型
Boolean 布尔值
Undefined 未声明
Null 空值类型

复杂数据类型

object 对象类型

三元表达式

和c一样

x?t:f

断点调试

数组

关键字 Array
数组就是一组数据的集合

创建数组

new 创建

var arr = new Array();

字面量直接创建

var arr = [1,2,3,4];

var arr = [true,"2",3,"4"];

使用

利用索引下标从0开始

遍历拼接

        var arr = [1, 2, 3, 34, 5, 346, 47, 35, 3, 767, 8, 345, 57];
        var str = "";
        arr.forEach((val, ind, arr) => {
                if (ind === (arr.length - 1)) {
                    str += val;
                } else
                    str += val + "|";
            }
        )
        console.log(str);

添加新元素

修改length长度

修改数组索引号

通过数组对象方法push

        var arr = [1, 2, 3, 34, 5, 346, 47, 35, 3, 767, 8, 345, 57];
        arr.push(1);
        console.log(arr);

案例

去重

let arr = [1, 2, 3, 4, 5, 5, 1, 1, 1, 14, 6];
let newarr = [];
let j = arr[0];
for (let i = 0; i < arr.length; i++) {
    if (newarr.indexOf(arr[i]) === -1)
        newarr[newarr.length] = arr[i];
}
console.log(arr);
console.log(newarr);

颠倒

let arr = [1, 2, 3, 4, 5, 5, 1, 1, 1, 14, 6];
let newarr = new Array();
for (let i = (arr.length - 1); i >= 0; i--) {
    newarr[newarr.length] = arr[i];
}
console.log(arr);
console.log(newarr);

升序

let arr = [1, 2, 3, 4, 5, 5, 1, 1, 1, 14, 6];
console.log(arr);
arr.sort((a, b) => {
    return a - b;
});
console.log(arr);

降序

let arr = [1, 2, 3, 4, 5, 5, 1, 1, 1, 14, 6];
console.log(arr);
arr.sort((a, b) => {
    return b - a;
});
console.log(arr);

转换字符串

let arr = [1, 2, 3, 4, 5, 5, 1, 1, 1, 14, 6];
arr.join('|');

函数

包装功能相似的代码经常使用

1. 函数定义

function f(a, b) {
    console.log(a, b);
}

函数定义使用关键字function声明

声明调用和c一样

1. 函数表达式

var fun = function(){};

参数匹配问题

如果参数匹配一致，则[正常输出结果]
如果实参的个数多余形参的个数，[不会报错，会取到形参的个数]
如果实参的个数小于形参的个数，
1. 形参可以是看做不用声明的变量如果没有接受到值那么就是undefined
2. 返回[NaN]

返回值

C

如果没有return 则返回的是undefined

arguments的使用

他是伪数组

f(12, 32);

function f(a, b) {
    console.log(a, b, arguments.length);
}

实参长度 arguments.length

可以使用它来定义无限形参的函数

预解析

运行顺序：

预解析
执行代码

预解析
js引擎会把js里面所有的var 还有 function 提升到当前作用于的最前面

变量预解析变量提升
- 就是把所有的变量声明提升到作用于最前面不提升赋值操作

函数预解析函数提升
- 就是把所有的函数声明提升到作用于最前面不进行调用

对象

对象是一组无序的相关属性和方法的集合

对象 = 属性 + 方法
属性：特征
方法：行为

创建

对象字面量：就是花括号{ }里面包含了表达这个具体事物的属性和方法

空对象let obj = {};

new Object()创建

let obj = new Object();//创建一个空对象
obj.name = '张三丰';
obj.age = 18;

使用构造函数创建

语法格式

function 构造() {
    this.name = '';
    this.fun = function () {

    }
}
new 构造();

function Star(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
}

let str1 = new Star('刘德华', 18, '男');
console.log(str1.name);

function Star(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sing = function () {
        for (let i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
    }
}

let str1 = new Star('刘德华', 18, '男');
console.log(str1.name);
str1.sing('冰雨', '忘情水');

使用

let obj = {
    name: '张三丰',
    age: 18,
    sex: '男',
    SayMy: function () {
        console.log(this.name, this.age, this.sex);
    }
};
obj.name;
obj['age'];
obj.SayMy();

里面的属性方法采用键值对的形式
多个属性方法中间使用逗号隔开
方法后面跟的是一个匿名函数

new

for ··· in ····

用来遍历对象

        function Star(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.sing = function () {
                for (let i = 0; i < arguments.length; i++) {
                    console.log(arguments[i]);
                }
            }
        }

        let str1 = new Star('刘德华', 18, '男');
        for (let tmp in str1) {
            console.log(tmp);
            if (typeof str1[tmp] != 'function')
                console.log(str1[tmp]);
            else {
                console.log('this is function!Run')
                str1[tmp]('bb', 'aa', 'cc');
            }
            console.log(typeof str1[tmp]);
        }

内置对象

Math数学

随机数方法
random()
https://www.runoob.com/jsref/jsref-random.html

function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1) ) + min;
}

日期对象

let date = new Date();
console.log(date);//Thu Jun 30 2022 16:56:49 GMT+0800 (香港标准时间)

let date1 = new Date(2022, 6, 30);
console.log(date1);//Sat Jul 30 2022 00:00:00 GMT+0800 (香港标准时间)

let date2 = new Date('2022-6-30 16:59:00');
console.log(date2);//Thu Jun 30 2022 16:59:00 GMT+0800 (香港标准时间)

let year = new Date().getFullYear();
console.log(year);//2022

let mon = new Date().getMonth() + 1;//得到的是0-11
console.log(mon);//5

let week = new Date().getDay();
console.log(week);//4 注意 周日返回的是0

倒计时案例

String 字符串

`instanceof`类型判断

//true
//false

JavaScript - 语言基础笔记