JS快速入门

最新推荐文章于 2024-08-27 13:38:21 发布

honhbu

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量567

点赞数 25

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_63839619/article/details/139181782

版权

1 引入方式

第一种方式：内部脚本，将JS代码定义在HTML页面中

JavaScript代码必须位于<script></script>标签之间
在HTML文档中，可以在任意地方，放置任意数量的<script>
一般会把脚本置于<body>元素的底部，可改善显示速度

例子：

<script>
    alert("Hello JavaScript")
</script>

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

外部JS文件中，只包含JS代码，不包含&ltscript>标签
引入外部js的<script>标签，必须是双标签

例子：

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

注意：demo.js中只有js代码，没有<script>标签

2 基础语法

1 书写语法

语法规则如下：

区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
大括号表示代码块

api	描述
window.alert()	警告框
document.write()	在HTML 输出内容
console.log()	写入浏览器控制台

2 变量

关键字	解释
var	早期ECMAScript5中用于变量声明的关键字
let	ECMAScript6中新增的用于变量声明的关键字，相比较var，let只在代码块内生效
const	声明常量的，常量一旦声明，不能修改

在js中声明变量还需要注意如下几点：

JavaScript 是一门弱类型语言，变量可以存放不同类型的值。
变量名需要遵循如下规则：
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
- 数字不能开头
- 建议使用驼峰命名

3 数据类型和运算符

虽然js是弱数据类型的语言，但是js中也存在数据类型，js中的数据类型分为：原始类型和引用类型，具体有如下类型

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

具体运算符如下：

运算规则	运算符
算术运算符	+ , - , * , / , % , ++ , --
赋值运算符	= , += , -= , *= , /= , %=
比较运算符	> , < , >= , <= , != , == , === 注意 == 会进行类型转换，=== 不会进行类型转换
逻辑运算符	&& , \|\| , !
三元运算符	条件表达式 ? true_value: false_value

在js中，绝大多数的运算规则和java中是保持一致的，但是js中的==和===是有区别的。

==：只比较值是否相等，不区分数据类型，哪怕类型不一致，==也会自动转换类型进行值得比较
===：不光比较值，还要比较类型，如果类型不一致，直接返回false

类型转换：
1.字符串类型转为数字:
●将字符串字面值转为数字。如果字面值不是数字，则转为NaN。

2.其他类型转为booleag:

Number: 0和NaN为false，其他均转为true。
String: 空字符串为false，其他均转为true。
Null和undefined: 均转为false。

4 函数

1 第一种定义格式

第一种定义格式如下：

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

因为JavaScript是弱数据类型的语言，所以有如下几点需要注意：

形式参数不需要声明类型，并且JavaScript中不管什么类型都是let或者var去声明，加上也没有意义。
返回值也不需要声明类型，直接return即可

如下示例：

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

但是上述只是定义函数，函数需要被调用才能执行！

如下形式：

let result = add(10,20);
alert(result);

2 第二种定义格式

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

注意事项：

JS中，函数调用可以传递任意个数的参数。

5对象

可以大体分页3大类：

第一类：基本对象,我们主要学习Array和JSON和String

第二类：BOM对象,主要是和浏览器相关的几个对象

Location
Navigator
Screen
style
Window

第三类：DOM对象，JavaScript中将html的每一个标签都封装成一个对象

1 基本对象

1 Array对象

语法格式

Array对象时用来定义数组的。常用语法格式有如下2种：

方式1：

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

例如：

var arr = new Array(1,2,3,4); //1,2,3,4 是存储在数组中的数据（元素）

方式2：

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

例如：

var arr = [1,2,3,4]; //1,2,3,4 是存储在数组中的数据（元素）

访问：

arr[索引] = 值;

例如：

arr[10]="hello";

特点：长度可变，类型可变

属性和方法：

属性：

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

方法：

方法方法	描述
forEach()	遍历数组中的每个有值得元素，并调用一次传入的函数
push()	将新元素添加到数组的末尾，并返回新的长度
splice()	从数组中删除元素

方法方法

描述

forEach()

遍历数组中的每个有值得元素，并调用一次传入的函数

push()

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

splice()

从数组中删除元素

forEach()函数：

//e是形参，接受的是数组遍历时的值
arr.forEach(function(e){
     console.log(e);
})

在ES6中，引入箭头函数的写法，语法类似java中lambda表达式，修改上述代码如下：

arr.forEach((e) => {
     console.log(e);
})

注意的是，没有元素的内容是不会输出的，因为forEach只会遍历有值的元素.

push()函数:

用于向数组的末尾添加元素。

//push: 添加元素到数组末尾
arr.push(7,8,9);
console.log(arr);

splice()函数:

splice()函数用来数组中的元素，函数中填入2个参数。

参数1：表示从哪个索引位置删除

参数2：表示删除元素的个数

如下代码表示：从索引2的位置开始删，删除2个元素

//splice: 删除元素
arr.splice(2,2);
console.log(arr);

2 String对象

语法格式

String对象的创建方式有2种：

方式1：

var 变量名 = new String("…") ; //方式一

例如：

var str = new String("Hello String");

方式2：

var 变量名 = "…" ; //方式二

例如：

var str = 'Hello String';

属性和方法

String对象也提供了一些常用的属性和方法，如下表格所示：

属性：

属性	描述
length	字符串的长度。

方法：

方法	描述
charAt()	返回在指定位置的字符。
indexOf()	检索字符串。
trim()	去除字符串两边的空格
substring()	提取字符串中两个指定的索引号之间的字符。

length属性：

length属性可以用于返回字符串的长度，添加如下代码：
```
//length
console.log(str.length);
```
charAt()函数：

charAt()函数用于返回在指定索引位置的字符，函数的参数就是索引。添加如下代码：
```
console.log(str.charAt(4));
```
indexOf()函数

indexOf()函数用于检索指定内容在字符串中的索引位置的，返回值是索引，参数是指定的内容。添加如下代码：
```
console.log(str.indexOf("lo"));
```
trim()函数

trim()函数用于去除字符串两边的空格的。添加如下代码：
```
var s = str.trim();
console.log(s.length);
```
substring()函数

substring()函数用于截取字符串的，函数有2个参数。

参数1：表示从那个索引位置开始截取。包含

参数2：表示到那个索引位置结束。不包含
```
console.log(s.substring(0,5));
```

3 JSON对象

自定义对象

在 JavaScript 中自定义对象特别简单，其语法格式如下：

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

我们可以通过如下语法调用属性：

对象名.属性名

通过如下语法调用函数：

对象名.函数名()

其中上述函数定义的语法可以简化成如下格式：

    var user = {
        name: "Tom",
        age: 10,
        gender: "male",
        // eat: function(){
        //      console.log("用膳~");
        //  }
        eat(){
            console.log("用膳~");
        }
    }

json对象

JSON对象：JavaScript Object Notation，JavaScript对象标记法。是通过JavaScript标记法书写的文本。其格式如下：

{
    "key":value,
    "key":value,
    "key":value
}

其中，key必须使用引号并且是双引号标记，value可以是任意数据类型。

将json字符串转化为json对象

var jsObject = JSON.parse(userStr);

json对象转换成json字符串

var jsonstr = JSON.stringify(js0bject);

2 BOM对象

BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。

BOM中提供了如下5个对象：

对象名称	描述
Window	浏览器窗口对象
Navigator	浏览器对象
Screen	屏幕对象
History	历史记录对象
Location	d地址栏对象

重点学习的是Window对象、Location对象这2个。

1 Window对象

window对象指的是浏览器窗口对象，是JavaScript的全部对象，

获取：

直接使用window，其中 window. 可以省略

window.alert('hello');

其可以省略window. 所以可以简写成

alert('hello')

window对象提供了获取其他BOM对象的属性：

属性	描述
history	用于获取history对象
location	用于获取location对象
Navigator	用于获取Navigator对象
Screen	用于获取Screen对象

方法：

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

1、alert()函数：弹出警告框，函数的内容就是警告框的内容

<script>
    //window对象是全局对象，window对象的属性和方法在调用时可以省略window.
    window.alert("Hello BOM");
    alert("Hello BOM Window");
</script>

2、confirm()函数：弹出确认框，并且提供用户2个按钮，分别是确认和取消。

添加如下代码：

confirm("您确认删除该记录吗?");

修改代码如下：再次运行，可以查看返回值true或者false

var flag = confirm("您确认删除该记录吗?");
alert(flag);

3、setInterval(fn,毫秒值)：定时器，用于周期性的执行某个功能，并且是**循环执行**。该函数需要传递2个参数：

fn:函数，需要周期性执行的功能代码

毫秒值：间隔时间

//定时器 - setInterval -- 周期性的执行某一个函数
var i = 0;
setInterval(function(){
     i++;
     console.log("定时器执行了"+i+"次");
},2000);

4、setTimeout(fn,毫秒值) ：定时器，只会在一段时间后**执行一次功能**。参数和上述setInterval一致

//定时器 - setTimeout -- 延迟指定时间执行一次 
setTimeout(function(){
	alert("JS");
},3000);

浏览器打开，3s后弹框，关闭弹框，发现再也不会弹框了。

2 Location对象

location是指代浏览器的地址栏对象，对于这个对象，我们常用的是href属性，用于获取或者设置浏览器的地址信息，添加如下代码：

//获取浏览器地址栏信息
alert(location.href);
//设置浏览器地址栏信息
location.href = "https://www.itcast.cn";

3 DOM对象

1 DOM介绍

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为

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

DOM主要作用如下：

- 改变 HTML 元素的内容
- 改变 HTML 元素的样式（CSS）
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素

2 获取DOM对象

主要的核心就是学习如下2点：

- 如何获取DOM中的元素对象（Element对象，也就是标签）
- 如何操作Element对象的属性,也就是标签的属性。

2.1获取属性

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。document对象提供的用于获取Element元素对象的api如下表所示：

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

（1）document.getElementById()：根据标签的id属性获取标签对象，id是唯一的，所以获取到是单个标签对象。

添加如下代码：

<script>
//1. 获取Element元素

//1.1 获取元素-根据ID获取
 var img = document.getElementById('h1');
 alert(img);
</script>

(2)document.getElementsByTagName() : 根据标签的名字获取标签对象，同名的标签有很多，所以返回值是数组。

添加如下代码:

//1.2 获取元素-根据标签获取 - div
var divs = document.getElementsByTagName('div');
for (let i = 0; i < divs.length; i++) {
     alert(divs[i]);
}

(3)document.getElementsByName() ：根据标签的name的属性值获取标签对象，name属性值可以重复，所以返回值是一个数组。

添加如下代码：

//1.3 获取元素-根据name属性获取
var ins = document.getElementsByName('hobby');
for (let i = 0; i < ins.length; i++) {
    alert(ins[i]);
}

(4)document.getElementsByClassName() : 根据标签的class属性值获取标签对象，class属性值也可以重复，返回值是数组。

添加如下图所示的代码：

//1.4 获取元素-根据class属性获取
var divs = document.getElementsByClassName('cls');
for (let i = 0; i < divs.length; i++) {
     alert(divs[i]);
}

2.2操作属性

例如：替换div里的字符

var divs = document.getElementsByClassName('cls');
var div1 = divs[0];

div1.innerHTML = "Honhbu";

6 JavaScript事件

1 事件介绍

什么是事件呢？HTML事件是发生在HTML元素上的 “事情”，例如：

- 按钮被点击
- 鼠标移到元素上
- 输入框失去焦点
- ........

主要围绕2点来学习：

- 事件绑定
- 常用事件

2 事件绑定

JavaScript对于事件的绑定提供了2种方式：

- 方式1：通过html标签中的事件属性进行绑定

例如一个按钮，我们对于按钮可以绑定单机事件，可以借助标签的onclick属性，属性值指向一个函数。

<input type="button" id="btn1" value="事件绑定1" onclick="on()">

<script>
    function on(){
        alert("按钮1被点击了...");
    }
</script>

-方式2：通过DOM中Element元素的事件属性进行绑定

依据我们学习过得DOM的知识点，我们知道html中的标签被加载成element对象，所以我们也可以通过element对象的属性来操作标签的属性。此时我们再次添加一个按钮，代码如下：

<input type="button" id="btn2" value="事件绑定2">

document.getElementById('btn2').onclick = function(){
    alert("按钮2被点击了...");
}

需要注意的是：事件绑定的函数，只有在事件被触发时，函数才会被调用。

<!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-事件-事件绑定</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>

3 常见事件

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

onfocus:获取焦点事件，鼠标点击输入框，输入框中光标一闪一闪的，就是输入框获取焦点了

onblur:失去焦点事件，前提是输入框获取焦点的状态下，在输入框之外的地方点击，光标从输入框中消失了，这就是失去焦点。

honhbu

关注

25
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
JS快速入门

第一种定义格式如下：function 函数名(参数1,参数2..){要执行的代码因为JavaScript是弱数据类型的语言，所以有如下几点需要注意：形式参数不需要声明类型，并且JavaScript中不管什么类型都是let或者var去声明，加上也没有意义。返回值也不需要声明类型，直接return即可如下示例：但是上述只是定义函数，函数需要被调用才能执行！如下形式：var functionName = function (参数1,参数2..){//要执行的代码。
复制链接

扫一扫