JavaScript快速入门

最新推荐文章于 2023-04-20 17:36:48 发布

我不想头秃阿

最新推荐文章于 2023-04-20 17:36:48 发布

阅读量240

点赞数

分类专栏： JavaWeb 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/cacique111/article/details/126576152

版权

JavaWeb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript快速入门

JavaScript是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互
W3C标准：网页主要有三部分组成
- 结构：HTML
- 表现：CSS
- 行为：JavaScript
JavaScript和Java是完全不同的语言，不论是概念还是设计，但是基础语法类似
JavaScript（简称：JS）在1995年由Brendan Eich发明，并于1997年成为一部ECMA标准
ECMAScript6（ES6）是最新的JavaScript版本（发布于2015年）

一、JavaScript引入方式

内部脚本：将JS代码定义在HTML页面中
- 在HTML中，JavaScript代码必须位于<script></script>标签之间
```
<script>
    alter("hello js");
</script>
```
- 提示
  - 在HTML文档中可以在任意地方，放置任意数量的<script>
  - 一般把脚本置于<body>元素的底部，可改善显示速度，因为脚本执行会拖慢显示
外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
- 外部文件：demo.js
```
alert("hello js");
```
- 引入外部js文件
```
<script src="../js/demo.js"></script>
```
- 注意
  - 外部脚本不能包含<script>标签
  - <script>标签不能自闭合

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

<!--    <script>
        alert("hello js");
    </script>-->
    <script src="../js/demo.js"></script>

</body>
</html>

demo.js

alert("hello js")

二、基础语法

2.1 书写语法

区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
注释：
- 单行注释：//注释内容
- 多行注释：/注释内容/
打括号表示代码块
```
if (conut == 3){
    alert(count);
}
```

2.2 输出语句

使用window.alert()写入警告框
使用document.write()写入HTML输出
使用console.log()写入浏览器控制台

window.alert("hello js");	// 弹出警告框
document.write("hello js");	// 写入HTMl
console.log("hello js");	// 写入控制台

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

    <script>
      window.alert("hello js");    // 弹出警告框

      document.write("hello js");  // 写入HTML

      console.log("hello js"); // 写入控制台
    </script>
</body>
</html>

2.3 变量

JavaScript 中用 var 关键字（variable 的缩写）来声明变量。

var test = 20;
test = "张三"

JavaScript 是一门弱类型语言，变量可以存放不同类型的值
变量名需遵循如下规则：
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
- 数字不能开头
- 建议使用驼峰命名
ECMAScript 6 新增了 let 关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明
ECMAScript6新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

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

  <script>
    var test = 20;
    test = "张三";
    alert(test);
    /*
      var:
        1. 作用域：全局变量
        2. 变量可以重复定义
    */
    {
      var age = 30;
      var age = 20;
    }
    alert(age);

    const PI = 3.14;

  </script>

</body>
</html>

2.4 数据类型

JavaScript中分为：原始类型和引用类型

5种原始类型：

number：数字（整数、小数、NaN(Not a Number)
string：字符、字符串，单双引皆可
boolean：布尔。true、false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值为undefined

使用typeof运算符可以获取数据类型

var age = 20;
alert(typeof age);

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

  <script>
    // number
    var age = 20;
    var price = 99.8;
    document.write(typeof age+"<br>");
    document.write(typeof price+"<br>");

    // string
    var ch = 'a';
    var name = '张三';
    var addr = "南京";
    document.write(typeof ch+"<br>");
    document.write(typeof name+"<br>");
    document.write(typeof addr+"<br>");

    // null
    var obj = null;
    document.write(typeof obj+"<br>");

    // undefined
    var a;
    document.write(typeof a+"<br>");
    
  </script>
</body>
</html>

效果：

number
number
string
string
string
object
undefined

2.5 运算符

一元运算符：++，–
算术运算符：+，-，*，/，%
赋值运算符：=，+=，-=…
关系运算符：>，<，>=，<=，!=，==，===…
逻辑运算符：&&，||，!
三元运算符：条件表达式 ? true_value : false_value

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

  <script>

    /*
      ==:
        1. 判断类型是否一样，如果不一样，则进行类型转换
        2. 再去比较其值
      ===:全等于
        1. 判断类型是否一样，如果不一样，直接返回false
        2. 再去比较其值
    */
    var age1 = 20;
    var age2 = "20";

    document.write(age1 == age2); // true
    document.write("<br>"); //
    document.write(age1 === age2); // false
    document.write("<br>"); //

    /*
      类型转换：
        * 其他类型转为number：
          1. string：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN，一般使用parseInt
          2. boolean：true转为1，false转为0
        * 其他类型转为boolean：
          1. number：0和NaN转为false，其他转为true
          2. string：空字符串转为false，其他转为true
          3. null：false
          4. undefined：false
    */
    // string -> number
    var str = +"20";
    document.write(str);
    document.write("<br>");
    var str = +"abc";
    document.write(str);
    document.write("<br>");
    var str = "20";
    document.write(parseInt(str));
    document.write("<br>");

    // boolean -> number
    var flag = +false;
    document.write(flag);
    document.write("<br>");

    // number -> boolean
    var flag = 0;
    if(flag){
      document.write("true");
      document.write("<br>");
    }
    else{
        document.write("false");
        document.write("<br>");
    }

    // string -> boolean
    var flag = "abc";
    if(flag){
      document.write("true");
      document.write("<br>");
    }
    else{
      document.write("false");
      document.write("<br>");
    }

    // null -> boolean
    var flag = null;
    if(flag){
      document.write("true");
      document.write("<br>");
    }
    else{
      document.write("false");
      document.write("<br>");
    }

    // undefined -> boolean
    var flag;
    if(flag){
      document.write("true");
      document.write("<br>");
    }
    else{
      document.write("false");
      document.write("<br>");
    }

  </script>
</body>
</html>

效果：

true
false
20
NaN
20
0
false
true
false
false

2.6 流程控制语句

JavaScript 中提供了和 Java 一样的流程控制语句，如下

if
switch
for
while
dowhile

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

  <script>
    // 1. if
    var count = 3;
    if(count==3){
      alert(count);
    }
    // 2. switch
    var num = 3;
    switch (num) {
      case 1:
        alert("星期一");
        break;
      case 2:
        alert("星期二");
        break;
      case 3:
        alert("星期三");
        break;
      case 4:
        alert("星期四");
        break;
      case 5:
        alert("星期五");
        break;
      case 6:
        alert("星期六");
        break;
      case 7:
        alert("星期日");
        break;
      default:
        alert("输入的星期有误");
        break;
    }

    // 3. for
    var sum = 0;
    for (let i = 1; i <= 100; i++) { //建议for循环小括号中定义的变量使用let
      sum += i;
    }
    alert(sum);

    // 4. while
    var sum = 0;
    var i = 1;
    while (i <= 100) {
      sum += i;
      i++;
    }
    alert(sum);

    //  5. dowhile
    var sum = 0;
    var i = 1;
    do {
      sum += i;
      i++;
    }
    while (i <= 100);
    alert(sum);

  </script>
</body>
</html>

2.7 函数

函数定义格式有两种：

方式1

function 函数名(参数1,参数2..){
    要执行的代码
}

方式2

var 函数名 = function (参数列表){
    要执行的代码
}

注意：
形式参数不需要类型。因为JavaScript是弱类型语言
function add(a, b){
    return a + b;
}
上述函数的参数 a 和 b 不需要定义数据类型，因为在每个参数前加上 var 也没有任何意义。
返回值也不需要定义类型，可以在函数内部直接使用return返回即可

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

  <script>
/*    function add(a, b){
      return a + b;
    }*/
    var add = function (a, b){
      return a + b;
    }
    var result = add(1, 2);
    alert(result); // 3
    var result2 = add(1);
    alert(result2); // NaN
    
  </script>
</body>
</html>

三、对象

3.1 Array

JavaScript Array对象用于定义数组

定义

// 方式一
var 变量名 = new Array(元素列表); 
// example
var arr = new Array(1, 2, 3);
// 方式二
var 变量名 = [元素列表]); 
// example
var arr = [1, 2, 3];

访问

arr[索引] = 值；
arr[0] = 1；

注意：JS数组类似于Java集合，长度、类型都可变

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

  <script>
    // 方式一
    var arr = new Array(1,2,3);
    //alert(arr); // [1,2,3]

    // 方式二
    var arr2 = [4,5,6];
    //alert(arr2); // [2,4,6]

    // 访问
    arr2[0] = 7;
    //alert(arr2[0]); // 7

    // 特点：JavaScript数组相当于Java中的集合，变长变类型

    // 变长
    var arr3 = [1,2,3];
    arr3[10] = 10;
    //alert(arr3[10]); // 10
    //alert(arr3[9]); // undefined

    // 变类型
    arr3[5] = "hello";
    //alert(arr3); // [1,2,3,,,hello,,,,,10]

    // 属性： length：数组中元素的个数
    var arr4 = [1,2,3];
/*    for (let i = 0; i < arr4.length; i++) {
      alert(arr4[i]);
    }*/

    // 方法：
    // push：添加方法
    var arr5 = [1,2,3];
    arr5.push(10);
    // alert(arr5); // [1,2,3,10]

    // splice：提出元素
    arr5.splice(0,1);
    // alert(arr5); // [2,3]
  </script>
</body>
</html>

3.2 String

定义

// 方式一
var 变量名 = new String(s);
// example
var str = new String("hello");
// 方式二
var 变量名 = s;
// example
var str = "hello";
var str = 'hello';

属性
- length：字符串的长度
方法
- charAt()：返回在指定位置的字符
- indexOf()：检索字符串

3.3 自定义对象

在 JavaScript 中自定义对象特别简单，下面就是自定义对象的格式：

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

调用属性的格式：

对象名.属性名

调用函数的格式：

对象名.函数名()

3.4 BOM

Browser Object Model 浏览器对象模型

BOM 中包含了如下对象：

Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象

3.4.1 Window

window：浏览器窗口对象
获取：直接使用window，其中window.可以省略

window.alert("hello");

属性：获取其他BOM对象
- history：对History对象的只读引用
- Navigator：对Navigator对象的只读引用
- Screen：对Screen对象的只读引用
- location：对Location对象的只读引用

方法

alert()：显示带有一段消息和一个确认按钮的警告框
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框
setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式
setTimeout()：在指定的毫秒数调用函数或计算表达式

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

  <script>

    // alert
/*    window.alert("abc");
    alert("abc");*/

    // confirm：点击确定按钮，返回true；点击取消按钮，返回false
/*    var flag = confirm("确认删除？");
    if (flag){
      // 删除
    }*/

    // 定时器
    /*
      setTimeout(function, 毫秒值)：在一定的时间间隔后执行一个function，只执行一次
      setInterval(function, 毫秒值) ：在一定的时间间隔后执行一个function，循环执行
    */
/*    setTimeout(function (){
      alert("hello");
    }, 1000);*/
      setInterval(function (){
      alert("hello");
    }, 1000);



  </script>
</body>
</html>

灯泡交替闪烁的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <input type="button" onclick="on()" value="开灯">
  <img id="myImage" border="0" src="../img/off.png" >
  <input type="button" onclick="off()" value="关灯">

  <script>
      function on(){
        document.getElementById("myImage").src='../img/on.png';
      }
      function off(){
        document.getElementById("myImage").src='../img/off.png';
      }

      var x = 0;
      // 定时器
      setInterval(function (){
        if (x % 2 === 0){
            on();
            x++;
        }else {
            off();
            x++;
        }
      }, 1000);
  </script>
</body>
</html>

3.4.2 History

History：历史记录
获取：使用window.history()获取，其中window.可以省略

window.history().方法();
history().方法();

方法
- back()：加载history列表中的前一个URL
- forward()：加载history列表中的下一个URL

3.4.3 Location

Location：地址栏对象
获取：使用window.location获取，其中window.可以省略
```
window.location.方法();
location.方法();
```
属性
- href：设置或返回完整的URL

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

  <script>
/*    alert("即将跳转");
    location.href = "https://www.baidu.com";*/
  // 3秒跳转到首页
  document.write("3秒跳转到首页...");
  setTimeout(function (){
    location.href = "https://www.baidu.com";
  },3000);
  
  </script>
</body>
</html>

3.5 DOM

Document Object Model 文档对象模型
将标记语言的各个组成部分封装为对象
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
JavaScript通过DOM，能够对HTML进行操作
- 改变HTML元素的内容
- 改变HTML元素的样式（CSS）
- 对HTML DOM事件作出反应
- 添加和删除HTML元素
DOM 是 W3C（万维网联盟）定义了访问 HTML 和 XML 文档的标准。该标准被分为 3 个不同的部分：
- 核心 DOM：针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准
  - Document：整个文档对象
  - Element：元素对象
  - Attribute：属性对象
  - Text：文本对象
  - Comment：注释对象
- XML DOM：针对 XML 文档的标准模型
- HTML DOM：针对 HTML 文档的标准模型

3.5.1 获取Element对象

Document 对象中提供了以下获取 Element 元素对象的函数

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <img id="light" src="../img/off.png"><br>

  <div class="cls">hello</div><br>
  <div class="cls">world</div><br>

  <input type="checkbox" name="hobby">唱
  <input type="checkbox" name="hobby">跳
  <input type="checkbox" name="hobby">rap
  <input type="checkbox" name="hobby">篮球

  <script>
/*    var img = document.getElementById("light");
    alert(img);*/

/*    var divs = document.getElementsByTagName("div");
    for (let i = 0; i < divs.length; i++) {
      alert(divs[i])
    }*/

/*    var hobbies = document.getElementsByName("hobby");
    for (let i = 0; i < hobbies.length; i++) {
      alert(hobbies[i]);
    }*/

    var divs = document.getElementsByClassName("cls");
    for (let i = 0; i < divs.length; i++) {
         alert(divs[i]);
    }

  </script>
</body>
</html>

3.5.2 常见HTML Element对象的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<img id="light" src="../img/off.png"><br>

<div class="cls">hello</div><br>
<div class="cls">world</div><br>

<input type="checkbox" name="hobby">唱
<input type="checkbox" name="hobby">跳
<input type="checkbox" name="hobby">rap
<input type="checkbox" name="hobby">篮球

<script>

  document.getElementById("light").src="../img/on.png";

  /*
    style：设置元素css样式
    innerHTML：设置元素内容
  */
  var divs = document.getElementsByTagName("div");
  for (let i = 0; i < divs.length; i++) {
    // divs[i].style.color = 'red';
    divs[i].innerHTML = "哈哈";
  }

  var hobbies = document.getElementsByName("hobby");
  for (let i = 0; i < hobbies.length; i++) {
    hobbies[i].checked = true;
  }
</script>
</body>
</html>

3.6 事件监听

3.6.1 事件绑定

JavaScript 事件 (w3school.com.cn)

事件：HTML事件是发生在HTML元素上的”事情“。比如：
- 按钮被点击
- 鼠标移动到元素之上
- 按下键盘按钮
事件监听：JavaScript可以在事件被侦测到时执行代码

方式一：通过 HTML标签中的事件属性进行绑定
```
<input type="button" οnclick='on()’>
```
下面是点击事件绑定的 on() 函数
```
function on(){
	alert("我被点了");
}
```

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

如下面代码是按钮标签，在该标签上我们并没有使用 事件属性，绑定事件的操作需要在 js 代码中实现

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

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

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <input type="button" value="点我" onclick="on()"><br>
  <input type="button" value="再点我" id="btn"><br>

  <script>
    function on(){
      alert("我被点了");
    }
    document.getElementById("btn").onclick = function (){
      alert("我被点了");
    };
  </script>
</body>
</html>

3.6.2 常见事件

事件属性名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开