JavaScript快速入门

冰逸.itbignyi

已于 2023-08-26 22:07:25 修改

阅读量287

点赞数 1

分类专栏： JavaScript 前端文章标签： javascript 开发语言

于 2023-08-26 21:10:53 首次发布

本文链接：https://blog.csdn.net/jbykmzls/article/details/132507710

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

JavaScript

4 篇文章 0 订阅

订阅专栏

JavaScript简介

JavaScript（简称：js）是一门跨平台，面向对象的脚本语言，是用来控制网页行为的，它能使网页可交互。

JavaScript和java是完全不同的语言，不论是概念还是设计，但是基础语法类似

JavaScript在1995年由Brendan Eich发明，并于1997年成为ECMA标准。

ECMAScript6（ES6）是最新的JavaScript版本（发布于2015年）。

JavaScript引入方式

内部脚本：将JS代码定义在HTML页面中

JavaScript代码必须位于<script></script>标签之间

在HTML文档中，可以在任意地方，放置任意数量的<script>

一般会把脚本置于<body>元素底部，可改善显示速度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello js</title>
    <script> alert("你好，js")</script>
</head>
<body>
    
</body>
</html>

外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中

外部JS文件中，只包含JS代码，部包含<script>标签

<script>标签不能自闭合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello js</title>
    <script src="./js/demo1.js"></script>
</head>
<body>
    
</body>
</html>

alert("你好，js");

JavaScript书写语法

区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的

每行结尾的分号可有可无

注释：单行注释：//注释内容

多行注释：/*注释内容*/

大括号表示代码块

if (count==3) {
    alert(count);
}

JavaScript输出语句

使用window.alert()写入警告框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello js</title>

</head>
<body>
    
</body>
<script>
    window.alert("你好js")
</script>
</html>

使用document.write()写入HTML输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello js</title>

</head>
<body>
    
</body>
<script>
   document.write("你好js")
</script>
</html>

使用console.log()写入浏览器控制台

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello js</title>

</head>
<body>
    
</body>
<script>
   console.log("你好js")
</script>
</html>

JavaScript变量

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

JavaScript是一门弱类型语言，变量可以存放部同类型的值

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

组成字符可以是任何字母、数字、下划线（_）或者美元符号（$）

数字不能开头

建议使用驼峰命名

特点：

1.作用域大，全局变量

2.可以重复定义

ECMAScript6新增了let关键字来定义变量，它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明

ECMAScript6新增了const关键字，用来声明一个只读的常量，一旦声明，常量的值就不能改变

JavaScript数据类型

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

原始类型：

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

string：字符串，单双引皆可

boolean：布尔

null：对象为空

undefined：当声明的变量未初始化时，该变量的默认值是undefined

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

var a=20;
alert(typeof a);

JavaScript运算符

特殊：===

==与===

==会进行类型转换，===不会进行类型转换

var a=10;
alert(a=="10");//true
alert(a==="10");//false
alert(a===10);//true

类型转换：

字符串类型转为数字：

将字符串字面值转为数字，如果字面值不是数字，则转为NaN

其他类型转换为boolean：

Number：0和NaN为flase，其他均转为true

String：空字符为false，其他均转为true

Null和undefined：均转为false

JavaScript函数

介绍：函数是被设计为执行特定任务的代码块

定义：JavaScript函数通过function关键字定义，语法为：

function functionName(参数1,参数2){
//需要执行的代码
}

注意：

形式参数不需要类型，因为JavaScript是弱类型语言

返回值也不需要定义类型，可以在函数内部直接使用return返回即可

调用：函数名称（实际参数列表）

//定义
function add(a,b){
    return a+b;
}

//调用
var result=add(10,20);
alert(result)

JavaScript对象

Array

JavaScript中Array对象用于定义数组

定义：var 变量名=new[元素列表]；

var 变量名=[元素列表]；

访问

arr[索引]=值；

注意事项：JavaScript中的数组相当于Java中集合，数组的长度是可变的，而JavaScript是弱类型，所以可以存储任意类型的数据

属性

length：设置或返回数组中元素的数量

方法：forEach（）遍历数组中的每个有值的元素，并调用一次传入的函数

push（）将新元素添加到数组的末尾，并返回新的长度

splice（）从数组中删除元素

箭头函数（ES6）：是用来简化函数定义语法的，具体形式为：（...）=>{...},如果需要给箭头函数起名字：var xxx=（...）=>{...}

String

String字符串对象创建方式有两种：

var 变量名=new String（"..."）

var 变量名="..."

属性：

length：字符串的长度

方法：

charAt（）：返回在指定位置的字符

indexOf（）：检索字符串

trim（）：去除字符串中两边的字符

substring（）：提取字符串中两个指定的索引号之间的字符

javaScript自定义对象

定义格式：

var 对象名={

属性名1：属性值1，

函数名称：function（形参列表）{ }

}；

调用格式：

对象名.属性名；

对象名.函数名（）；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var user={
        name:"tom",
        age:10,
        gender:"male",
        eat(){
            alert("用膳~");
             }
    }
    alert(user.name);
    user.eat();

</script>
</html>

JSON-介绍

概念：JavaScript Object Notation，JavaScript对象标记法

JSON是通过JavaScript对象标记法书写的文本

由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输

JSON-基础语法

定义

var 变量名='{"key1":value1,"key2":value2}'

value的数据类型为：

数字（整数或浮点数）

字符串（在双引号中）

逻辑值（true或false）

数组（在方括号中）

对象（在花括号中）

null

JSON字符串转为JS对象

var jsObject=JSON.parse(userStr);

JS对象转为JSON字符串

var jsonStr=JSON.stringify(jsObject);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var jsonstr='{"name":"tom","age":24,"addr":["南京","北京"]}';
  /*   alert(jsonstr.name); */
    var obj=JSON.parse(jsonstr);
    alert(obj.name);
    alert(JSON.stringify(obj)) ;

</script>
</html>

BOM

概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。

组成：

window：浏览器窗口对象

Nanifaeor：浏览器对象

Screen：屏幕对象

History：历史记录对象

Location：地址栏对象

Window

介绍：浏览器窗口对象

获取：直接使用window，其中window可以省略

属性：

history：对History对象的只读引用

location：用于窗口或框架的Location对象

navigation：对Navigation对象的只读引用

方法：

alert（）：显示有一段消息和一个确认按钮的警告框

confirm（）：显示带有消息以及确认按钮和取消按钮的对话框

setlnteval（）：按照指定的周期来调用函数或计算表达式

setTimeout（）：在指定的毫秒数后调用或计算表达式

Location

介绍：地址栏对象

获取：使用window.location获取，其中window，可以省略

属性：href：设置或返回完整的URL

DOM

概念：Document Object Model，文档对象模型。

将标记语言的各个组成部分封装为对应的对象：

Document：整个文档对象

Element：元素对象

Attribute：属性对象

Text：文本对象

Comment：注释对象

JavaScript通过DDM，就能够对HTML进行操作：

改变HTML元素的内容

改变HTML元素的样式

对HTML DOM事件做出反应

添加和删除HTML元素

DOM是W3C的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：

1.Core DOM-所以文档类型的标准模型

Document：整个文档对象

Element：元素对象

Attribute：属性对象

Text：文本对象

Comment：注释对象

2.XML DOM－XML文档的标准模型

3.HTML DOM-HTML文档的标准模型

image：<img>

Button：<input type='button'>

HTML中Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。

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

1.根据id属性值获取，返回单个Element对象

var h1=document.getElementById('h1');

2.根据标签名称获取，返回Element对象数组

var divs=document.getElementsByTagName('div');

3.根据name属性获取，返回Element对象数组

var hobbys=document.getElementsByName('hobby');

4.根据class属性值获取，返回Element对象数组

var clss=document.getElementsByClassName('cls');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img id="h1" src="https://www.toopic.cn/public/uploads/small/163756299623163756299625.png" ><br><br>
    <div class="cls">计算机教育</div><br>
    <div class="cls">java教育</div><br>

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

</body>
<script>
    // 获取元素
    // 第一种
   var img= document.getElementById('h1');
   alert(img);
//    第二种
    document.getElementsByTagName('div');
    for (let i = 0; i < div.length; i++) {
        alert(div[i]);
    }
    // 第三种
    var ins= document.getElementsByTagName('hobby');
    for (let i = 0; i < ins.length; i++) {
        alert(ins[i]);        
    }
    // 第四种
    var ins= document.getElementsByClassName('cls');;
    for (let i = 0; i < ins.length; i++) {
        alert(ins[i]);        
    }

</script>
</html>

DOM案例：

1.切换图片

2.所以div标签后加good

3.所以复选框为选中状态

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img id="h1" src="https://www.toopic.cn/public/uploads/small/163756299623163756299625.png" ><br><br>;
    <div class="cls">计算机教育</div><br>;
    <div class="cls">java教育</div><br>;

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

</body>
<script>
    var img= document.getElementById('h1');
    img.src="https://pic1.zhimg.com/v2-36d4626179b21ede507f08593329aa22_r.jpg?source=1940ef5c";
   var divs= document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        const div = divs[i];
        div.innerHTML+="<Font color='red'>good</Font>";
    }
    var ins= document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        const check = ins[i];
        check.checked=true;
    }
</script>
</html>

js事件监听

事件：HTML事件是发生在HTML元素上的“事情”。比如：

按钮被点击

鼠标移动到元素上

按下键盘按钮

事件监听：JavaScript可以在事件被侦测到时执行代码

事件绑定

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" id="btn1" value="事件绑定1" onclick="on()">
    <input type="button" id="btn2" value="事件绑定2">
</body>
<script>
    function on(){
        alert("1被点了");
    }
    document.getElementById('btn2').onclick=function(){
          alert("2也被点了");
    }
  
</script>
</html>

案例实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img id="light" src="https://picx.zhimg.com/80/v2-b442793f521ca651ca2afe7a312a29ef_1440w.webp?source=1940ef5c" width="600"><br>
    <input type="button" value="变身" onclick="on()">
    <input type="button" value="恢复" onclick="off()">
    <br><br>
    <input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">
    <br><br>
    <input type="checkbox" name="hobby" >电影
    <input type="checkbox" name="hobby" >游戏
    <input type="checkbox" name="hobby" >旅游
    <br>
    <input type="button" value="全选" onclick="checkAll()">
    <input type="button" value="反选" onclick="reverse()">
</body>
    <script>
            function on(){
                var img= document.getElementById("light");
                img.src="https://picx.zhimg.com/80/v2-ed1f03a985265001cff73c27f0bb5a7d_1440w.webp?source=1940ef5c"
            }
            function off(){
                var img= document.getElementById("light");
                img.src="https://picx.zhimg.com/80/v2-b442793f521ca651ca2afe7a312a29ef_1440w.webp?source=1940ef5c"
            }
            function lower(){
            var input= document.getElementById("name");
            input.value=input.value.toLowerCase();
            }
            function upper(){
            var input= document.getElementById("name");
            input.value=input.value.toUpperCase();
            }
            function checkAll(){
            var ins= document.getElementsByName("hobby")
            for (let i = 0; i < ins.length; i++) {
                const element = ins[i];
                element.checked=true
            }
            }
            function reverse(){
                var ins= document.getElementsByName("hobby")
            for (let i = 0; i < ins.length; i++) {
                const element = ins[i];
                element.checked=false
            }
            }
    </script>
</html>