JavaScript入门

54 阅读7分钟

本文参考黑马程序员2023新版JavaWeb开发教程

什么是JavaScript

Web由三部分组成:

  • HTML:负责网页的基本结构(页面元素和内容)。
  • CSS:负责网页的表现效果(页面元素的外观、位置等页面样式,如:颜色、大小等)。
  • JavaScript:负责网页的行为(交互效果)。

JavaScript(简称:JS) 是一门跨平台、面向对象的脚本语言(脚本一词由script翻译过来,脚本语言和非脚本语言的区别就是需不需要编译,脚本语言不需要编译直接解释即可执行),是用来控制网页行为的,它能使网页可交互。JavaScript 在 1995 年由 Brendan Eich 发明,并于 1997 年成为 ECMA 标准。ECMAScript和JavaScript的关系是,前者是后者的标准,后者是前者的一种实现。ECMAScript6 (ES6) 是最主流的 JavaScript 版本(发布于 2015 年)。

JavaScript的组成部分:

  1. 核心(ECMAScript):描述了JS的语法和基本对象。
  2. 文档对象模型 (DOM):处理网页内容的方法和接口
  3. 浏览器对象模型(BOM):与浏览器交互的方法和接口

JS引入方式

内部脚本

将JS代码定义在HTML页面中,JS代码需要写在<script></script>标签中间。HTML页面可以在任意位置放置任意数量的<script></script>

建议把<script></script>放在<body>元素下面,改善显示速度。

image.png

外部脚本

定义一个单独的JS文件,然后引入到HTML文件中。在外部JS文件,不需要包含<script>标签,直接写JS代码即可。<script>标签不能自闭和。

<script src='demo.js'></script>

JS基础语法

书写语法

  • 区分大小写:与 Java 一样,变量名、函数名以及其他一切东西都是区分大小写的。
  • 每行结尾的分号可有可无
  • 注释:
    • 单行注释://
    • 多行注释:/* */
  • 大括号表示代码块
    if(count == 3){
        alert(count);
    }
    
  • 输出语句
    • window.alert()写入到警告框
    • document.write()写入到HTML中
    • console.log()写入到浏览器控制台中

变量

JavaScript是一门弱类型语言,同一个变量可以先后存放不同类型的值。

变量名需要遵循如下规则:

  • 只能包含字母、数字、下划线(_)或美元符号($)
  • 不能以数字开头
  • 不能使用关键字

建议使用驼峰命名法,即变量和函数名采用小驼峰,即第一个单词首字母小写,后面每个单词首字母大写。类名和接口名采用大驼峰,即每个单词的首字母都要大写。

声明变量和常量:

  • var:声明变量,全局作用域/函数作用域,允许重复声明
  • let:声明变量,块级作用域,不允许重复声明(建议使用let定义变量
  • const:声明常量,一旦声明,常量的值不能改变

数据类型

JavaScript中数据类型分为基本数据类型和引用数据类型,使用typeof运算符可以获取数据类型

基本数据类型

  • numer:数字,包含整数、小数、NaN
  • string:字符串,使用单引号或者双引号都可以
  • boolean:布尔类型,只有truefalse两个值。
  • null:对象为空。
  • undefined:当声明的变量未初始化时,该变量的默认值是undefined。

引用数据类型:

  • array:数组
  • function:函数
  • object:对象

运算符

运算符描述
算术运算符+ , - , * , / , % , ++ , --
赋值运算符= , += , -= , *= , /= , %=
比较运算符> , < , >= , <= , != , == , ===
逻辑运算符&& , || , !
三元运算符条件表达式 ? true_value: false_value

==和===的区别:==只比较值,===比较值和类型

类型转换:

  • 字符串类型转换为数字:使用parseInt()方法
  • 其它类型转换为boolean:
    • number:0、NaN转换为false
    • string:空字符串""转换为false
    • null和undefined转换为false

流程控制语句

流程控制语句与Java类似:

  • if … else if … else…
  • switch
  • for
  • while
  • do … while

JS函数

定义方式:JavaScript函数通过function定义,JS函数的形参和返回值都不需要写数据类型,因为JS是弱类型语言。

// 定义方式一
function functionName(参数1,参数2..){
    //要执行的代码
}

// 定义方式二
let functionName = function(参数1,参数2..){  // 相当于匿名函数
    //要执行的代码
}

// 箭头函数的写法也可以
let functionName = (参数1,参数2..)=>{
    //要执行的代码
}

调用:函数名称(实际参数列表)

JS对象

array

定义数组的两种方式:

// 方式一
let arr = new Array(1,2,3,4,5)

// 方式二
let arr = [1,2,3,4,5]

访问数组:

arr[1] = 10;

JS数组的长度可变,可以存储任意类型的数据

数组的常用属性:

属性描述
length设置或返回数组中元素的数量

数组的常用方法:

方法描述
forEach遍历数组中的每个有值的元素,并调用一次传入的函数
push将新元素添加到数组的末尾,并返回新的长度
splice从数组中删除元素
    let arr = [1,2,3,4]
    arr[9] = 9    // 改变数组长度,中间的用undefined填充
    console.log(arr) // (10) [1, 2, 3, 4, 空 ×5, 9]
    for (let i = 0; i < arr.length; i++) { // 会遍历每一个元素
        console.log(arr[i])
    }
    
    // forEach方法
    arr.forEach((e)=>{ // forEach方法只会遍历每个有值的元素,e就是每个元素
        console.log(e)
    })
    
    // push方法
    arr.push(5,6,7)  // 一次push多个元素
    console.log(arr) // (13) [1, 2, 3, 4, 空 ×5, 9, 5, 6, 7]

    // splice方法
    arr.splice(1,2)  // 从下标1开始,删除2个元素
    console.log(arr) // (11) [1, 4, 空 ×5, 9, 5, 6, 7]

string

定义字符串的两种方式:

// 方式一
let str = new String("Hello");

// 方式二 推荐
let str = "Hello";

string的常用属性:

属性描述
length字符串的长度

string的常用方法:

方法描述
charAt返回指定位置的字符
indexOf检索子串在字符串中出现的位置,返回下标
trim去除字符串首尾的空格
substring取子串
    let str = "Hello JavaScript";
    console.log(str.charAt(1)); // e

    console.log(str.indexOf("llo")); // 2

    // substring(begin,end)取出的子串不包含end
    console.log(str.substring(2,4)); // ll

JSON

JavaScript自定义对象

    let user={
        name:"Bob",
        age:23,
        gender:"male",
        eat:function(){ // 定义函数的第一种语法
            console.log("eat~");
        },
        sleep(){ // 定义函数的第二种语法
            log("sleep~")
        }
    }
    // 调用对象的属性和函数
    console.log(user.name)
    user.eat()

JSON的全称是JavaScript Obejct Notation,即JavaScript对象标记法,JSON是JS对象的字符串表示法,JS对象的key加上双引号,然后最外面加上单引号就成了JSON。

JSON 和 JS 对象互相转换

//要实现从JSON字符串转换为JS对象,使用 JSON.parse() 方法:
var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}


//要实现从JS对象转换为JSON字符串,使用 JSON.stringify() 方法:
var json = JSON.stringify({a'Hello'b'World'}); //结果是 '{"a": "Hello", "b": "World"}'

BOM

BOM的全称是Browser Object Model(浏览器对象模型),如图所示,window对象是BOM的顶层对象,其他对象都是window对象的子对象。

image.png

window浏览器窗口对象

window对象直接使用即可,不需要创建,比如window.alert("Hello"),其中window.可以省略。

window的常用属性:

属性描述
location地址栏对象,通过href可以设置或返回完整的URL
history历史记录对象
navigator浏览器对象
screen屏幕对象

只需要掌握window对象和location对象即可。

window的常用方法:

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

DOM

DOM的全称是Document Object Model(文档对象模型),将HTML超文本标记语言的各个组成部分封装成对应的对象:

  • Document:整个文档对象
  • Element:元素对象
  • Attribute:属性对象
  • Text:文本对象
  • Comment:注释对象

W3C DOM 标准被分为 3 个不同的部分:

  • Core Dom :核心Dom,针对任何结构化文档的标准模型
  • XML DOM:用于XML文档的标准模型,对XML元素进行操作
  • HTML DOM: 用于HTML文档的标准模型,对HTML元素进行操作。

整个HTML文档可以看成一棵DOM树

<html>
    <head>
        <title>DOM</title>
    </head>
    <body>
        <h1>DOM对象标题</h1>
        <a href="https://itcast.cn">传智教育</a>
    </body>
</html>

对于上面的代码来说,它对应的DOM树如下图所示:

image.png

通过document对象获取元素对象

  1. 根据id属性获取单个元素:let h1 = document.getElementById('id1')
  2. 根据标签名称获取一组元素:let divs = document.getElementsByTagName('div')
  3. 根据name属性获取一组元素:let hobbys = document.getElementsByName('hobby')
  4. 根据class属性获取一组元素:let clss = document.getElementsByClassName('cls')

案例

有如下HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-DOM-案例</title>
</head>

<body>
    <img id="h1" src="img/off.gif">  <br><br>

    <div class="cls">传智教育</div>   <br>
    <div class="cls">黑马程序员</div>  <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>
</html>

要求实现如下效果:

image.png JS代码如下:

<script>
    //1. 点亮灯泡 
    let a = document.getElementById('h1');
    a.src = "img/on.gif" // 实现方式:换一张开着灯的图片

    //2. 将所有div标签的内容后面加上
    let divs = document.getElementsByTagName('div')
    for (let i = 0; i < divs.length; i++) {
        divs[i].innerHTML+="<span style='color:red'>very good</span>"        
    }

    //3. 使所有的复选框呈现选中状态
    let checks = document.getElementsByName('hobby')
    for (let i = 0; i < checks.length; i++) {
        checks[i].checked = true
    }
</script>

JS事件监听

事件:发生在HTML元素上的“事情”。比如按钮被点击、鼠标移动到元素上、输入框获得焦点等等。 事件监听:在某个事件发生时,执行相应的JavaScript代码。

事件绑定的两种方式

  1. 通过HTML标签中的事件属性进行绑定。这种方式将HTML代码和JS代码杂糅到了一起
    <input type="button" onclick="on()" value="按钮1">
    <script>
        function on(){
            alert('我被点击了!');
        }
    </script>
    
  2. 通过DOM元素属性绑定。首先通过DOM获取元素
    <input type="button" id="btn" value="按钮2">
    
    <script>
        document.getElementById('btn').onclick=function(){
            alert('我被点击了!');
        }
    </script>
    

常见事件

image.png