JS 基础详解

最新推荐文章于 2024-03-26 15:52:29 发布

程序员学习圈

最新推荐文章于 2024-03-26 15:52:29 发布

阅读量334

点赞数

分类专栏： # Java WB 文章标签： javascript

本文链接：https://blog.csdn.net/Luomingkui1109/article/details/78635303

版权

Java WB 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1.JS简介

JavaScript简称JS是运行在浏览器端的一门脚本语言，一开始主要用来做浏览器端验证，但现在功能已经不止于此，所谓脚本语言就是指，代码不需要编译，直接运行，并且读入一行运行一行，JavaScript目前应用非常广泛。

例如：浏览器端的验证，Ajax，客户端等，甚至也有服务器端的JavaScript —— node.js

2.HelloWorld

JS代码需要编写到<script></script>,script标签可以写到网页的任意位置，但是我们习惯写到head标签中。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script  type="text/javascript" >
window.onload = function(){
     var btn = document.getElementById("btnId");
     btn.onclick = function(){
           alert("Hello Script");
     };
};
</script>
</head>
<body>
<button id="btnId">sayHello</button>
</body>
</html>

3.基本语法

(1) 变量(JS是一个弱类型的语言，声明一个变量时不需要指定类型，只需要使用var关键字)

var c = "hello";
var d = 123;

(2) 函数

① 函数的声明（JS中函数也是一个对象，声明函数使用function关键字）

> 第一种方式：
var sum = function(a,b){
return a+b;
};
> 第二种方式：
function sum2(a,b,c){
return a+b+c;
}

② 函数的调用：函数调用的本质就是函数的引用

sum(123,456);   
sum2(123,"abc",true);

(3) 对象

① 创建对象

//第一种：var obj = new Object();
//第二种：var obj2 = {};
//向对象中动态的添加属性：对象.属性名 = 属性值

obj.name = "孙悟空"; 

obj2.fun = function(){
      alert("我是obj2")
 };

② 对象的调用：

alert(obj.name)
alert(obj2.fun())

(4) 事件

① 用户操作网页或者浏览器所发生的交互行为称为事件。比如：点击按钮，最小化窗口，修改文本框内容等。

② JS为我们定义许多浏览器中的事件。比如：单击、双击、移动等。

③ 我们可以通过为事件设置一个响应函数来对事件进行响应。可以通过两种方式为元素绑定响应函数：

a.直接通过标签的属性来设置,这种方式是结构与行为耦合，不推荐使用。

<button οnclick="alert('hello')">按钮</button>

b.在<script>标签中来设置

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS中的事件</title>
<script type="text/javascript">
    //在js中，浏览器为我们提供了一个对象window，对象代表的是当前标签页 。
    //为window对象绑定一个onload事件，window.onload = function(){}将会在整个页面加载完成之后在执行
    window.onload = function(){
        //获取按钮对象
        var btn = document.getElementById("btnId");
        //为按钮的onclick事件绑定一个回调函数，像这种由我们声明，但是不由我们调用的函数，我们称为回调函数。
        btn.onclick = function(){
            alert("看我出不出来！");
        };
    };
</script>
</head>
<body>
    <button id="btnId">SayHello</button>
</body>
</html>

(5) 加载方式

① 浏览器加载网页代码时是由上到下依次加载的。

② 如果我们在浏览器还尚未加载网页中的元素，那么将无法获取对象，控制台将会报错，解决该问题有两种方式：

a.将JS代码编写到body标签的下边(不推荐使用)。

b.将所有的JS代码，编写到window.onload = function(){}中。

注意：在编写JS代码时，先把window.onload = function(){}写上,这样window.onload = function(){}中的代码将在整个页面加载完成之后再加载这里面的代码。

4.DOM简介：

Document Object Model文档对象模型

DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。

可以把DOM认为是页面上数据和结构的一个树形表示。

(1) 树形结构

<html>