javaScript基础

S妖O风F

已于 2024-04-02 08:48:58 修改

阅读量2

点赞数

文章标签： javascript 前端 java

于 2022-05-16 14:27:36 首次发布

本文链接：https://blog.csdn.net/SOOOOOF/article/details/124799042

版权

1.JavaScript 简介

2.编写位置

3.基本语法

4.数据类型

5.运算符与流程控制

6.方法/函数

7.变量的作用域

8.对象

随着互联网的快速发展，网站已不仅仅是展示信息的静态内容，增强网页交互、提升用户体验成为最基本的用户需求，因此提高对 JavaScript 的认识与学习，是 Web 前端开发者提升网站体验度、增加网站用户粘度的必要条件，也是 Web 前端开发人员必须掌握的重要技术能力之一。

JavaScript 是一种为网站添加互动以及自定义行为的客户端脚本语言，通常只能通过 Web 浏览器去完成操作，而无法像普通意义上的程序那样独立运行。

JavaScript 与 Java 没有任何的关系，它由 Netscape 公司与 Sun 公司合作开发。JavaScript 最开始的名字是 LiveScript，因当时 Java 风靡一时以及当时正与Sun 公司进行合作等因素，遂将 LiveScript 改为了 JavaScript。

①解释性执行的脚本语言 JavaScript 的基本语法结构形式与 C、C++、Java 十分类似，但是在使用之前，不需要先编译，而是在程序执行中被逐行解释。

②简单弱类型脚本语言 JavaScript 的简单性主要在于其基于 Java 基本语句和控制流之上的简单而紧凑的设计，从而对于使用者学习 Java 或其他 C 语系的编程语言是一种非常好的过渡，而对于具有 C 语系编程功底的程序员来说，JavaScript 上手也非常容易；其次在于其变量类型是采用的弱类型，并未使用严格的数据类型。

③相对安全的脚本语言 JavaScript 作为一种安全性语言，不被允许访问本地硬盘，且不能将本地数据存入服务器，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失或对系统的非法访问。

④跨平台性的脚本语言 JavaScript 依赖于浏览器本身，与操作环境无关，只要计算机能运行支持 JavaScript 的浏览器，就可正确执行，从而实现了跨平台的特性。

2.编写位置

编写 JavaScript 脚本不需要任何特殊的软件，一个普通的文本编辑器和一个 Web 浏览器就足够编程使用。用 JavaScript 编写的代码必须通过 HTML/XHTML 文档才能执行。目前有两种方法可以调用 JavaScript。第一种方法是将 JavaScript 代码放到文档标签中的 script 标签之间，代码如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //alert("hello world");
        console.info("你好")
    </script>
</head>
<body>
</body>
</html>

另一种方法是将 JavaScript 代码存为一个扩展名为 js 的独立文件。典型的做法是在文档的部分放置一个script标签，并把它的 src 属性指向该文件，代码如下所示：

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

但最好的做法是将script标签放到 HTML 文档的最后，body结束标签之前，代码如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div>全部内容</div>
<script>
    alert("第一个javascript脚本")
</script>
</body>
</html>

前面的代码中 script 标签没有包含传统的 type="text/javascript" 属性，是因为在 HTML5 规范中，script 属性默认是 text/javascript，所以可以省略，但是在 HTML4.01 和 XHTML1.0 规范中，type 属性是必须的。

3.基本语法

语言结构方面的各项规则即为语法，如同书面的人类语言，每种程序也都有自己的语法。JavaScript 的语法与 Java 和 C++ 语言十分类似。

1.语法结构

①JavaScript 程序使用 Unicode 字符集编写，它是一种区分大小写的语言，也就是说，在输入关键字、变量、函数名以及所有的标识符时，都必须采取一致的字母大小写格式。但是 HTML 并不区分大小写( XHTML 是区分大小写的)，由于其与 JavaScript 紧密相关，所以这一点很容易混淆。

②JavaScript 会忽略程序中记号之间的空格、制表符和换行符。可以在程序中任意使用空格、制表符和换行符，因此开发者可以采用整齐、一致的方式排版 JavaScript 代码，增加代码的可读性。

③JavaScript 中的简单语句后面通常都有分号(;)，就如同 C、C++和 Java 中的语句一样，这主要是为了分隔语句。但是如果语句放在不同的行中，就可以省去分号，具体代码如下所示：

var a = 1
var b = 3
var c = 6;var d = 9

注意：var 在此处就相当于我们 java 的 int ，JavaScript 里面所有类型都是 var。在 idea 开发中，使用 var 时会报警告，原因是 ES6 规范提出两种声明变量的方式 let const。let 主要用来解决 var 变量作用域提升问题，而 const 主要用来解决常量问题。如下代码在 java 中不可访问 c 变量，但是在 JavaScript 中可以，在开发中容易导致错误，所以增加了 let 解决这个问题。当把 var 换成 let 时会报错 c is not defined。其实在我们学过 java 的开发人员看来，使用 let 更像 java 的语法。

<script>
    if (true) {
        var c = 10;
    }
    console.info(c);//10
</script>

但是在开发工作中，省略分号并不是一个好的开发习惯，应该惯于使用分号进行编程。

④JavaScript 和 Java 一样，也支持 C++、C 型的注释。JavaScript 会把处于"//" 和一行结尾之间的任何文本都当作注释忽略掉。此外"/*"和"*/"之间的文本也会被当作注释，这个注释可以跨越多行，但是其中不能有嵌套的注释。

⑤JavaScript 的标识符与 java 语法一样。

4.数据类型

JavaScript 是一种弱类型语言，这意味着 Web 前端开发者可以在任何阶段改变变量的数据类型，而无需像强类型语言一样在声明变量的同时还必须同时声明变量的数据类型。比如说以下语句在强类型语句中是非法的，但是在 JavaScript 中却能够成功解析。

var age = "three";
age = 3;

接下来将简单地介绍 JavaScript 中允许使用的三种基本数据类型。

①字符串（string）

字符串由零个或多个字符构成。字符包括(但不局限于)字母、数字、标点符号和空格。字符串必须包在引号里面，单引号或双引号都可以。JavaScript 可以随意地选用引号，但最好还是根据字符串所包含的字符来选择。即如果字符串包含双引号，就把整个字符串包含在单引号里面；如果包含单引号就把整个字符放在双引号里面。如下代码所示：

var mood = "don't ask";
var mod = '中国"飞人"勇夺金牌';

如果一个字符串中既有单引号又有双引号，那么这种情况下需要把单引号或双引号看作一个普通字符，而不是这个字符串的结束标志，这种情况下需要对这个字符进行转义，在 JavaScript 中用反斜线对字符串进行转义。

在开发工作中，为了养成一个良好的编程习惯，建议无论是使用双引号还是单引号来包裹字符串，都应在整个脚本中保持一致，以保证使用的规律性，如果在同一个脚本中无规律地使用双引号与单引号，代码将变得难以阅读。

②数值（number）

如果想给一个变量赋一个数值，不用限定它必须是一个整数。JavaScript 允许使用带有小数点的数值，并且允许任意小数位，这样的数称为浮点数，数值主要数据类型如下所示：

var num = 33.5;
num = 88;
num = -6.78;

③布尔值（boolean）

JavaScript 另外一种重要的数据类型是布尔类型。布尔数据只有两个可选值 true 或者 false。从某种意义上讲，为计算机设计程序就是与布尔值打交道。作为最基本的事实，所有的电子电路只能识别和使用布尔数据；电路中有电流或电路中没有电流。布尔值不是字符串，万万不能将布尔值用引号括起来。布尔值的 false 与字符串值 "false" 是完全不相关的两码事。

5.运算符与流程控制

1.算术运算符 + - * / % ++ -- 除了/与 java 不同，该除结果为小数。其他用法和 java 相同。
2.赋值运算符 = += -= *= /= %=与 java 相同，这里就不再赘述。

流程控制语句

if switch while do-while for 三目运算符与 java 相同。
if 与 java 有所不同，很多时候不需要使用 ==null 判断。if 会自动判断并过滤值为 undefined（未定义）、null、空字符串和数字0。

<script>
    let id;//未定义
    if (id) {
        alert("not")
    }
    let id = undefined;//未定义
    if (id) {
        alert("not")
    }
    id = null;
    if (id) {
        alert("not")
    }
    id = "";
    if (id) {
        alert("not")
    }
    id = " ";
    if (id) {
        alert("yes")
    }
</script>

同时 JavaScript 里面增加了一个 for-in，for-in 一般用来遍历数组，用法如下：

<script>
    let arr = ["aa", "bb", "cc"];
    for (let i = 0; i < arr.length; i++) {
        console.info(arr[i]);
    }
    for (let i in arr) {
        console.info(arr[i])
    }
</script>

另外，break、continue 与 try-catch-finally 语句和用法和 java 一样，这里就不再赘述。

try {
    console.log(b);
    console.log("我不会输出的，不要找了")
} catch (error) {
    console.log("发生错误了")
}

6.方法/函数

如果需要多次使用同一段代码，可以把它们封装成一个函数，函数就是一组允许在你的代码里随时调用的语句，每个函数实际上就是一个短小的脚本。

作为一个良好的编程习惯，应该先对函数进行定义再调用它们。一个简单的函数定义代码如下：

function fun() {
    console.info(123)
}

这个函数将会在控制台输出 123。现在如果想在自己的脚本中执行这一动作，可以随时用如下语句来执行这个函数。

fun();

函数的入参与 java 相同，只是省略了变量的类型，同时返回的类型也省略了。

function fun(i1, i2) {
    return i1 + i2;
}

在 ES6 中为了简化代码引入箭头函数，如上面的方法可以简化为如下，调用时还是一样的使用 fun(12,14) 的方式调用。

var fun = (i1,i2)=&gt;{return i1+i2}

注意：在方法没有定义形参数时，可以通过 arguments 获取方法的参数，arguments 是一个带索引的 json 对象。通过 [索引] 获取对应的参数。

<script>
    function fun() {
        console.info(arguments[0])//12
        console.info(arguments[1])//45
    }
    fun(12, 45)
</script>

7.变量的作用域

变量既可以是全局的，也可以是局部的，全局变量与局部变量的区别就在于其作用域。全局变量可以在脚本的任何位置被引用，其作用域为整个网页。局部变量只存在于声明它的函数的内部，在函数的外部是无法引用它的，作用域仅为某个特定的函数。因此，在函数中既可以使用全局变量，也可以使用局部变量。

可以通过 var 关键字明确地声明变量，如果在函数中使用了 var，那这个变量就会被视为一个局部变量，它只存在于这个函数的上下文中；反之，如果没有使用 var，那这个变量就被视为一个全局变量，如果脚本里已存在一个与之同名的全局变量，这个函数将会改变全局变量的值，其例子如下所示：

function f1(i, y) {
    aa = 12;
    return i + y;
}
var rs = f1(12, 15);
alert(aa)

8.对象

删除视频播放

对象是一种非常重要的数据类型，对象是自包含的数据集合，包含在对象里的数据可以通过两种形式访问：属性和方法：属性是隶属于某个特定对象的变量：方法是只有某个特定对象才能调用的函数。对象就是由一些属性和方法组合在一起而构成的一个数据实体，在 JavaScript 里，属性和方法都使用“点”语法来访问。
语法如下：

let user = {
    name: "张三", age: 18, say: function () {
        alert("我是：" + this.name)
    }
}
console.info(user.name)
console.info(user.say())

在 ES6 中对象的属性和方法都提供了相应的简写。如下代码和上面的写法完全一样，但是方法最好就不要使用箭头函数（this 会出现问题）。

let name = "张三";
let age = 18;
let user = {
    name,
    age,
    say() {
        alert("我是：" + this.name)
    }
}
console.info(user.name)
console.info(user.say())

在 ES6 中提出类 class 的语法，和 java 语法相似。类名使用首字母大写的驼峰命名（不强制）。

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
        console.info(name, age);
    }
    showPerson(){
        console.info(this.name,this.age)
    }
}

let person = new Person("张三", 12);
console.info(person.name);
console.info(person.age);
person.showPerson();

1.内置对象
在 JavaScript 中内置了一些对象，比如前面用到的数组。当我们使用 new 关键字去初始化一个数组时，其实就是在创建一个 Array 对象的新实例，具体代码如下所示：

var beatles = new Array();

Array 对象只是诸多 JavaScript 内建对象中的一种。其他的还包含 Math 对象、Date 对象，它们分别提供了许多非常有用的方法供人们处理数值和日期值，比如，Math 对象的 round 方法可以把十进制数值舍入为一个与之最接近的整数，具体代码如下所示：

var num = 13.546;
var out = Math.round(num);
alert(out);

Date 对象可以用来存储和检索与特定日期和时间有关的信息。在创建 Date 对象的新实例时， JavaScript 解释器将自动使用当前日期和时间对它进行初始化，具体代码如下所示：

var cd = new Date();
console.info(cd)

Date 对象提供了getDay() 、getHours()、getMonth() 等一系列方法，用来检索与特定日期有关的各种信息。
2.宿主对象
除了内置对象以外，还可以在 JavaScript 脚本里使用一些已经预先定义好的其他对象。这些对象不是由 JavaScript 语言本身提供而是由它的运行环境提供的，在 Web 应用中，这个环境就是浏览器，由浏览器提供的预定义对象被称为宿主对象。
宿主对象包括 Form、Image 和 Element 等，可以通过这些对象获得关于网页上表单、图像和各种表单元素等的信息，其中最重要的一个宿主对象便是 document 对象，在后续章节中将会介绍 document 对象。

S妖O风F

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript基础

1.JavaScript 简介2.编写位置3.基本语法4.数据类型5.运算符与流程控制6.方法/函数7.变量的作用域8.对象随着互联网的快速发展，网站已不仅仅是展示信息的静态内容，增强网页交互、提升用户体验成为最基本的用户需求，因此提高对 JavaScript 的认识与学习，是 Web 前端开发者提升网站体验度、增加网站用户粘度的必要条件，也是 Web 前端开发人员必须掌握的重要技术能力之一。JavaScript 是一种为网站添加互动以及自定义行为的客户端脚本语言，通常.
复制链接

扫一扫