初学JavaWeb需要的前端js，JavaScript是什么样的？-阿里云开发者社区

文章目录

一、JavaScript简介

二、HelloWorld

三、JavaScript基本语法

四、DOM

五、JavaScript事件驱动

六、网页制作完全手册分享

关于HTML和css详见：《JavaWeb中的HTML和css》

一、JavaScript简介

1、起源

1995年，JavaScript由Netscape公司的Brendan Eich在网景导航者浏览器上首次设计实现而成。Netscape在最初将其脚本语言命名为LiveScript，因为Netscape与Sun合作，网景公司管理层希望它外观看起来像Java，因此取名为JavaScript。

2、特性

①脚本语言

JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行, JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释。

②基于对象

JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性：『封装』、『继承』、『多态』中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一门面向对象的编程语言。

③弱类型

JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型。

④事件驱动

JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。

⑤跨平台性

JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持。

二、HelloWorld

1、功能

2、代码

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>HelloWorld</title>
  </head>
  <body>
  <!-- 在HTML代码中定义一个按钮 -->
  <button type="button" id="helloBtn">SayHello</button>
  </body>
  <!-- 在script标签中编写JavaScript代码 -->
  <script type="text/javascript">
  // document对象代表整个HTML文档
  // document对象调用getElementById()方法表示根据id查找对应的元素对象
  var btnElement = document.getElementById("helloBtn");
  // 给按钮元素对象绑定单击响应函数
  btnElement.onclick = function(){
    // 弹出警告框
    alert("hello");
  };
  </script>
</html>

3、显示效果

三、JavaScript基本语法

1、JavaScript代码嵌入方式

①HTML文档内

a.JavaScript代码要写在script标签内。

b.script标签可以写在文档内的任意位置。

c.为了能够方便查询或操作HTML标签（元素），script标签可以写在body标签后面。如上的HelloWorld

②引入外部JavaScript文档

在script标签内通过src属性指定外部xxx.js文件的路径即可。注意：引用外部JavaScript文件的script标签里面不能写JavaScript代码，要先引入，再使用。

<!-- 使用script标签的src属性引用外部JavaScript文件，和Java中的import语句类似 -->
<!-- 引用外部JavaScript文件的script标签里面不能写JavaScript代码 -->
<!-- 引用外部JavaScript文件的script标签不能改成单标签 -->
<!-- 外部JavaScript文件一定要先引入再使用 -->
<script src="/pro02-JavaScript/scripts/outter.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> 
  // 调用外部JavaScript文件中声明的方法
  showMessage();
</script>

2、声明和使用变量

①JavaScript数据类型

基本数据类型

数值型：JavaScript不区分整数、小数
字符串：JavaScript不区分字符、字符串；单引号、双引号意思一样。
布尔型：true、false
  在JavaScript中，其他类型和布尔类型的自动转换。
    true：非零的数值，非空字符串，非空对象
      false：零，空字符串，null，undefined

引用类型

所有new出来的对象
用[]声明的数组
用{}声明的对象

②变量

关键字：var

数据类型：JavaScript变量可以接收任意类型的数据

标识符：严格区分大小写

变量使用规则：

如果使用了一个没有声明的变量，那么会在运行时报错
Uncaught ReferenceError: b is not defined
如果声明一个变量没有初始化，那么这个变量的值就是undefined

3、函数

①内置函数

内置函数：系统已经声明好了可以直接使用的函数。

[1]弹出警告框

alert("警告框内容");

[2]弹出确认框

用户点击『确定』返回true，点击『取消』返回false。

var result = confirm("你确定要删除吗？");
if(result) {
  console.log("点了确定");
}else{
  console.log("点了取消");
}

[3]在控制台打印日志

console.log("日志内容");

②声明函数

写法1：

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

写法2：

var sum = function() {
    return a+b;
};

写法2可以这样解读：声明一个函数，相当于创建了一个『函数对象』，将这个对象的『引用』赋值给变量total。最后加的分号不是给函数声明加的，而是给整体的赋值语句加的分号。

③调用函数

JavaScript中函数本身就是一种对象，函数名就是这个『对象』的『引用』。而调用函数的格式是：函数引用()。

var result = sum(2, 3);

4、对象

JavaScript中没有『类』的概念，对于系统内置的对象可以直接创建使用。

①使用new关键字创建对象

// 创建对象
  var student01 = new Object();
  // 给对象设置属性和属性值
  student01.stuName = "Lily";
  student01.stuAge = 22;
  student01.stuSubject = "Java";
  // 在控制台输出对象
  console.log(student01);

②使用{}创建对象

// 创建对象
  var obj02 = {
    "soldierName":"Tom",
    "soldierAge":25,
    "soldierWeapon":"gun"
  };
  // 在控制台输出对象
  console.log(obj02);

③给对象设置函数属性

// 创建对象
var obj01 = new Object();
// 给对象设置属性和属性值
obj01.stuName = "tom";
obj01.stuAge = 20;
obj01.stuSubject = "java";
obj01.study = function() {
  console.log(this.stuName + " is studying");
};
// 在控制台输出对象
console.log(obj01);
// 调用函数
obj01.study();

或者

// 创建对象
var obj02 = {
  "soldierName":"john",
  "soldierAge":35,
  "soldierWeapon":"gun",
  "soldierShoot":function(){
  console.log(this.soldierName + " is using " + this.soldierWeapon);
  }
};
// 在控制台输出对象
console.log(obj02);
// 调用函数
obj02.soldierShoot();

④this关键字

this关键字只有两种情况：

在函数外面：this关键字指向window对象（代表当前浏览器窗口）
在函数里面：this关键字指向调用函数的对象

// 直接打印this
console.log(this);
// 函数中的this
// 1.声明函数
function getName() {
  console.log(this.name);
}
// 2.创建对象
var obj01 = {
  "name":"tom",
  "getName":getName
};
var obj02 = {
  "name":"jerry",
  "getName":getName
};
// 3.调用函数
obj01.getName();
obj02.getName();

5、数组

①使用new关键字创建数组

// 1.创建数组对象
var arr01 = new Array();
// 2.压入数据
arr01.push("apple");
arr01.push("orange");
arr01.push("banana");
arr01.push("grape");
// 3.遍历数组
for (var i = 0; i < arr01.length; i++) {
  console.log(arr01[i]);
}
// 4.数组元素反序
arr01.reverse();
for (var i = 0; i < arr01.length; i++) {
  console.log(arr01[i]);
}
// 5.数组元素拼接成字符串
var arrStr = arr01.join(",");
console.log(arrStr);
// 6.字符串拆分成数组
var arr02 = arrStr.split(",");
for (var i = 0; i < arr02.length; i++) {
  console.log(arr02[i]);
}
// 7.弹出数组中最后一个元素
var ele = arr01.pop();
console.log(ele);

②使用[]创建数组

// 8.使用[]创建数组
var arr03 = ["cat","dog","tiger"];
console.log(arr03);

6、JSON

①JSON格式的用途

在开发中凡是涉及到『跨平台数据传输』，JSON格式一定是首选。

②JSON格式的说明

JSON数据两端要么是{}，要么是[]；{}定义JSON对象；[]定义JSON数组。

JSON对象的格式是：

{key:value,key:value,...,key:value}

JOSN数组的格式是：

[value,value,...,value]

key的类型固定是字符串。

value的类型可以是：基本数据类型或者引用类型（JSON对象或JSON数组）。

正因为JSON格式中value部分还可以继续使用JSON对象或JSON数组，所以JSON格式是可以『多层嵌套』的，所以JSON格式不论多么复杂的数据类型都可以表达。

③JSON对象和JSON字符串互转

[1]JSON对象转JSON字符串

var jsonObj = {"stuName":"tom","stuAge":20};
var jsonStr = JSON.stringify(jsonObj);
console.log(typeof jsonObj); // object
console.log(typeof jsonStr); // string

[2]JSON字符串转JSON对象

jsonObj = JSON.parse(jsonStr);
console.log(jsonObj); // {stuName: "tom", stuAge: 20}

四、DOM

1、概念

①名词解释

DOM是Document Object Model的缩写，意思是『文档对象模型』——将HTML文档抽象成模型，再封装成对象方便用程序操作。

这是一种非常常用的编程思想：将现实世界的事物抽象成模型，这样就非常容易使用对象来量化的描述现实事物，从而把生活中的问题转化成一个程序问题，最终实现用应用软件协助解决现实问题。而在这其中『模型』就是那个连通现实世界和代码世界的桥梁。

②DOM树

浏览器把HTML文档从服务器上下载下来之后就开始按照『从上到下』的顺序『读取HTML标签』。每一个标签都会被封装成一个『对象』。

而第一个读取到的肯定是根标签html，然后是它的子标签head，再然后是head标签里的子标签……所以从html标签开始，整个文档中的所有标签都会根据它们之间的『父子关系』被放到一个『树形结构』的对象中。

这个包含了所有标签对象的整个树形结构对象就是JavaScript中的一个可以直接使用的内置对象：document。

例如，下面的标签结构：

会被解析为：

2、具体概念

①各个组成部分的类型

整个文档中的一切都可以看做Node。各个具体组成部分的具体类型可以看做Node类型的子类。

其实严格来说，JavaScript并不支持真正意义上的『继承』，这里我们借用Java中的『继承』概念，从逻辑上来帮助我们理解各个类型之间的关系。

②父子关系

③先辈后代关系

3、DOM操作

由于实际开发时基本上都是使用JavaScript的各种框架来操作，而框架中的操作方式和我们现在看到的原生操作完全不同，所以下面罗列的API仅供参考。

①在整个文档范围内查询元素节点

②在具体元素节点范围内查找子节点

③查找指定元素节点的父节点

④查找指定元素节点的兄弟节点

⑤属性操作

⑥文本操作

⑦DOM增删改操作

五、JavaScript事件驱动

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    #eventArea {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    }
  </style>
  </head>
  <body>
  <!-- 用div作为鼠标移动区域 -->
  <div id="eventArea"></div>
  <!-- 在p标签内显示鼠标坐标 -->
  <p id="showData"></p>
  </body>
  <script type="text/javascript">
  // 根据id找到div标签对应的元素对象
  var divEle = document.getElementById("eventArea");
  // 根据id找到p标签对应的元素对象
  var pEle = document.getElementById("showData");
  // 声明事件响应函数
  function whenMouseMove(event){
    pEle.innerText = event.clientX + " " + event.clientY;
  }
  // 将事件响应函数赋值给对应的事件属性  
  // onmousemove表示在鼠标移动的时候
  divEle.onmousemove = whenMouseMove;
  </script>
</html>

六、网页制作完全手册分享

百度网盘链接：点击下载网页制作完全手册

提取码：0909

初学JavaWeb需要的前端js，JavaScript是什么样的？

文章目录

一、JavaScript简介

二、HelloWorld

三、JavaScript基本语法

四、DOM

五、JavaScript事件驱动

六、网页制作完全手册分享

热门文章

最新文章

相关课程

相关电子书

相关实验场景