JavaScript---------JS的基础使用

@湖

已于 2023-03-18 11:19:17 修改

阅读量150

点赞数 1

分类专栏： JavaScript Java 文章标签： javascript 前端 html Java

于 2023-03-06 19:58:45 首次发布

本文链接：https://blog.csdn.net/m0_56245143/article/details/129369473

版权

Java 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

JavaScript

JavaScript(简称”JS“) 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发web页面的脚本语言而出名的，但是它也被用到了很多非游览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令和声明式风格。
可以通过DOM来操作HTML元素，读写元素的内容，验证提交的数据，检验浏览器的信息，也可以给页面添加动画效果。
核心+文档对象模型+浏览器对象模型
ECMAScript：核心，包括基本的语法，语句，事件，对象等
DOM：Document Object Model，文档对象模型，操作元素
BOM：Browser Object Model，浏览器对象模型，操作浏览器

JavaScript的使用方式

行内式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" value="测试" onclick="javascript:alert('Hello World!')">
</body>
</html>

内嵌式

将JS代码写到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        alert("Hello JS!");
    </script>
</head>
<body>
</body>
</html>

外链式

将JS代码写到一个扩展名为.js的文件中，再将该文件导入到指定的HTML中。
注意：

alert("Hello Java!");

HTML文件内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/demo.js"></script>
</head>
<body>
    
</body>
</html>

JavaScript基本语法

变量

JS本身是一门弱类型语言，只需要使用var关键字即可，不需要指定数据类型。
语法：var 变量名; 或者var 变量名1,变量名2; 或者var 变量名=值;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        //定义变量
        var a;
        var b = 1,c = 1.23;
        var d = "abc",e = true;
        //弹框测试
        //alert(d);
        //控制台输出
        console.log(e);
    </script>
</head>
<body>
    
</body>
</html>

数据类型

分为两类：基本数据类型和引用数据类型
基本数据类型：
Number：任意数值
Boolean：布尔型，值只有true和false
String：字符串类型，可以使用双引号或者单引号定义
Undefined：只有一个undefined值，定义的变量未给初始值时，就是undefined
Null：只有一个null值，Undefined是Null派生出来的。ECMAScript中将之列为等值。

console.log(undefined == null); //true


- 

- 引用数据类型

- 通常叫做类（class），JS会将之转换成对象来处理




### 运算符

- 算数运算符：+	-	*	/	%	++	--

- 赋值运算符：=	+=	-=	*=	/=	%=

- 比较运算符：>	>=	<	<=	==	!=

- 逻辑运算符：&&		||		!

- 条件运算符：?:

- 使用方式同java


```html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script>
     var a = 10,b = 4;
     var res = a / b;
     console.log(res);	//2.5
 </script>
</head>
<body>
 
</body>
</html>
```



### 分支结构

单分支：if(){}

双分支：if(){}else{}

多分支：if(){}else if(){}else{}

等值多分支：

switch(){

case :

……

break;

default:

……

}

练习：给出一个1到7之间的数字，如果是1到5，输出工作日，6到7输出休息日，其他输出数据不合法

```html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script>
     var num = 8;
     //使用if结构完成
     if (num <= 5 && num > 0) {
         console.log("工作日");
     } else if (num == 6 || num == 7) {
         console.log("休息日");
     } else {
         console.log("数据不合法");
     }

     //使用switch结构完成
     switch (num) {
         case 1:
         case 2:
         case 3:
         case 4:
         case 5:
         console.log("工作日");
         break;
         case 6:
         case 7:
         console.log("休息日");
         break;
         default:
         console.log("数据不合法");
     }
 </script>
</head>
<body>
 
</body>
</html>
```



### 循环结构

- JS中while循环，do while循环，for循环跟Java基本一致。增强型for循环略有差别。


练习：1+2+3+……+100

```html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script>
     var num = 1,res = 0;
     while(num < 101){
         res += num;
         num ++;
     }
     console.log(res);

     var num1 = 1,res1 = 0;
     do{
         res1 += num1;
         num1 ++;
     }while(num1 < 101);
     console.log(res1);

     var res2 = 0;
     for (var num2 = 1;num2 < 101;num2 ++) {
         res2 += num2;
     }
     console.log(res2);
 </script>
</head>
<body>
 
</body>
</html>
```



### 数组对象

- 创建空数组

- 创建有长度的数组

- 创建有初始值的数组

- 注意：可以自动扩容


```html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script>
     //1）创建空数组
     var array1 = new Array();

     //2）创建有长度的数组
     var array2 = new Array(5);

     //3）创建有初始值的数组
     var array3 = [2,1.23,true,"abc"];

     //获取数组的长度
     //console.log(array3.length);

     //遍历数组数据
     for (var i = 0;i < array3.length;i ++) {
         //console.log(array3[i]);
     }

     //console.log(array3[8]);

     //array3[8] = "陈微";
     //alert(array3);

     //增强型for循环
     //java:for（数据类型 变量:数组名）{}
     for(var i in array3) {
         console.log(array3[i]);
     }
 </script>
</head>
<body>
 
</body>
</html>
```



### 日期对象

```html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script>
     var now = new Date();
     //console.log(now);
     //console.log(now.toLocaleString());
     var year = now.getFullYear();
     var month = now.getMonth() + 1;
     var date = now.getDate();
     var hour = now.getHours();
     var minute = now.getMinutes();
     var second = now.getSeconds();
     var week = now.getDay();
     var time = year+"年"+month+"月"+date+"日 星期"+week+" "+hour+"："+minute+"："+second;
     console.log(time);
 </script>
</head>
<body>
 
</body>
</html>
```



### 函数对象

- 只需要使用关键字function即可。

- 无参函数

- 有参函数

- 有返回值的函数


~~~html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script>
     function sum(){
         var a = 4,b = 7;
         var res = a + b;
         console.log(res);
     }
     //sum();

     function sum1(a,b){
         var res = a + b;
         console.log(res);
     }
     //sum1("abc",3);

     function sum2(){
         var a = 4,b = 7;
         var res = a + b;
         return res;
     }
     var result = sum2();
     console.log(result);
 </script>
</head>
<body>
 
</body>
</html>

数学对象

创建：Math对象不用创建直接使用。使用时直接调用方法，如：Math.方法名();
常用方法：
andom()：返回 0 ~ 1 之间的随机数
max(x,y)：返回 x 和 y 中的最大值
min(x,y)：返回 x 和 y 中的最低值
ceil(x)：对数进行向上取整
floor(x)：对数进行向下取整
round(x)：把数四舍五入为最接近的整数
abs(x)：返回数的绝对值
属性：PI，圆周率

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <script>
       var a = 1.23,b = 5.91;
       console.log(Math.random());
       console.log(Math.max(a,b));
       console.log(Math.min(a,b));
       console.log(Math.ceil(a));
       console.log(Math.floor(b));
       console.log(Math.round(a));
       console.log(Math.abs(-12));
       console.log(Math.PI);
   </script>
</head>
<body>
   
</body>
</html>

字符串对象

创建：

var str1 = “abc”;

var str2 = new String(“abc”);

可以实现动画效果（有时间可以炫一下）
常用方法：
获取字符串的长度 str1.length
（返回值是字符串的长度var 类型）
是否以某个字符开头 startsWith()
是否以某个字符结尾 endsWith()
截取字符串
substring(起始下标,结束下标)
substr(起始下标,截取长度)
根据某个字符拆分字符串返回数组 split()

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <script>
       var str = "I have a dream";
       console.log(str.length);
       console.log(str.startsWith("b"));
       console.log(str.endsWith("m"));
       console.log(str.substring(3,5));
       console.log(str.substr(3,5));
       console.log(str.split(" "));
   </script>
</head>
<body>
   
</body>
</html>

正则表达式对象

单个字符：如 [a]、 [ab] 、[a-zA-Z0-9]、[1-9]
元字符：\d 表示数字
量词符号：
?：表示出现0次或1次
*：表示出现0次或多次
+：表示出现1次或多次
{m}：表示m数量
{m,n}：表示m=<数量<=n（即数量在双闭区间）
开始结束符号:
^ 开始表示以什么开始：如以数字开始（直接表示开始）
$ 结束如规定以什么结束（直接表示结束）
创建正则表达式对象：
var reg = new RegExp(“正则表达式”);
var reg = /正则表达式/;
测试正则验证的方法：
test(参数)：验证指定的字符串是否符合正则定义的规范
案例：验证手机号码是否符合规范，要求：以1开头；第二位为3，4，5，6，7，8，9其中任意一个数；剩余9位为0~9之间的数字

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <script>
       var rule = /^1[3-9][0-9]{9}$/;
       var phone1 = "jhsfhjksafhk";
       var phone2 = "";
       var phone3 = "21928374638";
       var phone4 = "11928374638";
       var phone5 = "139283746380";
       var phone6 = "1392837463";
       var phone7 = "13928374634";
       console.log(rule.test(phone1));
       console.log(rule.test(phone2));
       console.log(rule.test(phone3));
       console.log(rule.test(phone4));
       console.log(rule.test(phone5));
       console.log(rule.test(phone6));
       console.log(rule.test(phone7));
   </script>
</head>
<body>
   
</body>
</html>

DOM对象

Document Object Model-----》文档对象模型：
是w3c组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口API它可以动态地访问程序和脚本，更新其内容、结构和www文档风格目前HTML和XML文档是通过说明部分定义的。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于子树的API文档，它要求在处理的过程中整个文档表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。

获取页面元素

常用方法：
document.getElementById(“id”);通过id属性的值查找元素
document.getElementsByName(“name”);通过name属性的值查找元素，因为name属性值可以重复，所以返回的是元素数组。
document.getElementsByClassName(“class”);通过class属性的值查找元素，因为class属性值可以重复，所以返回的是元素数组。
document.getElementsByTagName(“标签名”);通过标签名查找元素，因为标签可以重复，所以返回的是元素数组。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
</head>
<body>
   <div name="test">div1</div>
   <div id="divId">div2</div>
   <div name="test">div3</div>
   <div class="demo">div4</div>
   <p class="demo">p1</p>
   <script>
       //var ele = document.getElementById("divId");
       //console.log(ele);

       var eles = document.getElementsByName("test");
       //console.log(eles);

       var eles = document.getElementsByClassName("demo");
       //console.log(eles);

       var eles = document.getElementsByTagName("div");
       console.log(eles);
   </script>
</body>
</html>

操作页面元素

创建dom对象
document.createElement(“标签名”);
添加dom对象
（1）A.appendChild(B) 将B添加到A内部的最后面
（2）A.insertBefore(B, C) 将B添加到A内部C的前面
删除dom对象
（1）A.remove() 将A删除
（2）A.removeChild(B) 将A内部的B删除(用于将标签内部的某个标签删除)
替换dom对象
A.replaceChild(B, C) 用B替换A内部的C

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
</head>
<body>
   <div id="test">
       <h1>这是div里面的标题</h1>
       <p>这是div里面的第一个段落</p>
   </div>

   <script>
       //创建一个能够跳转到淘宝的超链接<a href="http://www.taobao.com">淘宝</a>
       var newEle = document.createElement("a");
       //给新创建的标签的href属性赋值
       newEle.href = "http://www.taobao.com";
       //在新建的标签中添加文本
       newEle.innerText = "淘宝";
       //获取id为test的标签
       var demo = document.getElementById("test");
       //将新建的标签放到id为test的标签中的最后面
       //demo.appendChild(newEle);

       //将新建的标签放到id为test的标签中的p标签的前面
       var p = document.getElementsByTagName("p")[0];
       //demo.insertBefore(newEle,p);

       //将新建的标签放到id为test的标签中替换其中的p标签
       //demo.replaceChild(newEle,p);

       //删除id为test的标签中的p标签
       //demo.removeChild(p);

       //删除id为test的标签
       demo.remove();
   </script>
</body>
</html>

操作元素属性

页面元素.属性名 = “值”
设置：标签对象.setAttribute(“属性名”,“属性值”);
获取：标签对象.getAttribute(“属性名”);
删除：标签对象.removeAttribute(“属性名”);

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
</head>
<body>
   <input type="text" id="username" name="uname" maxlength="6" value="chenwei">

   <script>
       //获取id为username的标签
       var demo = document.getElementById("username");
       //获取该标签value属性的值
       //console.log(demo.value);
       //console.log(demo.getAttribute("maxlength"));

       //设置该标签的value属性的值为mary
       //demo.value = "mary";
       //demo.setAttribute("value","mary");

       //删除该标签的value属性
       demo.removeAttribute("value");
   </script>
</body>
</html>

操作元素样式

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
   <style>
       #test{
           width: 100px;
           height: 100px;
           background-color: red;
       }
   </style>
</head>
<body>
   
   <div id="test"></div>

   <script>
       var demo = document.getElementById("test");
       //demo.style = "width: 200px;height: 200px;background-color: green;";
       demo.style.width = "200px";
       demo.style.height = "200px"
       demo.style.backgroundColor = "pink";
       demo.style.borderRadius = "50%";
   </script>
</body>
</html>

操作元素内容

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
</head>
<body>
   
   <div id="test">
       
   </div>

   <script>
       var demo = document.getElementById("test");
       //获取标签中的内容
       //console.log(demo.innerText);        //只获取文本
       //console.log(demo.innerHTML);        //获取所有（包括标签）

       //设置标签的内容
       var str = "<h1>这是div中的p标签</h1>";
       //demo.innerText = str;         //会将字符串中的标签当作文本放进去
       demo.innerHTML = str;           //会将字符串中的标签当作标签放进去
   </script>
</body>
</html>

innerText与innerHTML的区别：
获取时，innerText只能获取文本内容，innerHTML不仅能获取文本内容，还能获取标签
设置时，innerText会将标签当成文本放进去，innerHTML放进去的标签能被浏览器翻译

事件

事件简介

属性	发生于何时
onabort	图片的加载被中断
onblur	元素失去焦点
onchange	域的内容被改变
onclick	当用户点击某个对象时调用的事件句柄
onblclick	当用户双击某个对象时调用的事件句柄
onerror	在加载文档或者图像时发生错误
onfocus	元素获得焦点
onkeydown	某个键盘按键被按下
onkeypress	某个按键被按下并松开
onload	一张页面或一幅图像完成加载
onmousedown	鼠标按键被按下
onmousemove	鼠标被移动
onmouseout	鼠标从某元素移开
onmouseover	鼠标移到某元素之上
onmouseup	鼠标按键被松开
onreset	重置按钮被点击
onresize	窗口或框架被重新调整大小
onselect	文本被选中
onsubmit	确认按钮被点击
onunload	用户退出页面

事件的绑定

方式一：
直接在标签上使用对应的属性即可

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
   <script>
       function show(){
           console.log("测试事件的绑定方式");
       }
   </script>
</head>
<body>
   <input type="button" value="测试" onclick="show()">
</body>
</html>

方式二：
先使用JS找到要绑定事件的标签，再给这个标签绑定事件。
注意：使用方式二时，关注代码的执行顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="测试" id="btn">
    <script>
        var demo = document.getElementById("btn");
        demo.onclick = function(){
            console.log("再试试");
        }
    </script>
</body>
</html>

焦点事件（通常对输入框使用）
注意：点击输入框，则该输入框获取焦点，点击非输入框以外的地方，则该输入框失去焦点。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
   <style>
       input{
           width: 100px;
           height: 30px;
           border-radius: 5px;
           background-color: green;
       }
   </style>
   <script>
       function f(){
           var demo = document.getElementsByTagName("input")[0];
           demo.style.width = "200px";
           demo.style.height = "60px";
           demo.style.backgroundColor = "yellow";
       }

       function b(){
           var demo = document.getElementsByTagName("input")[0];
           demo.style.width = "100px";
           demo.style.height = "30px";
           demo.style.backgroundColor = "green";
       }
   </script>
</head>
<body>
   <input type="text" onfocus="f()" onblur="b()">
</body>
</html>

鼠标事件

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
   <style>
       #test{
           width: 100px;
           height: 100px;
           background-color: red;
       }
   </style>
</head>
<body>
   <div id="test"></div>
   <script>
       var demo = document.getElementById("test");
       demo.onmouseover = function(){
           demo.style.width = "200px";
           demo.style.height = "200px";
           demo.style.borderRadius = "50%";
       }
       demo.onmouseout = function(){
           demo.style.width = "100px";
           demo.style.height = "100px";
           demo.style.borderRadius = "0%";
       }
   </script>
</body>
</html>

键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
   <script>
       function u(){
           console.log("键盘松开了");
       }

       function d(){
           console.log("键盘按下去了");
       }
   </script>
</head>
<body>
   <input type="text" onkeyup="u()" onkeydown="d()">
</body>
</html>

内容改变事件（通常对下拉列表使用）
注意：打开下拉列表，选择了与之前不同的选项才能触发

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
</head>
<body>
   <select id="pro">
       <option>四川</option>
       <option>云南</option>
       <option>贵州</option>
   </select>
   <script>
       var demo = document.getElementById("pro");
       demo.onchange = function(){
           console.log("内容真的变了");
       }
   </script>
</body>
</html>

页面加载完成事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function l(){
            var demo = document.getElementById("pro");
            demo.onchange = function(){
                console.log("内容真的变了");
            }
        }
    </script>
</head>
<body onload="l()">
    <select id="pro">
        <option>四川</option>
        <option>云南</option>
        <option>贵州</option>
    </select>
</body>
</html>

ext" οnkeyup=“u()” οnkeydοwn=“d()”>

~~~

内容改变事件（通常对下拉列表使用）
注意：打开下拉列表，选择了与之前不同的选项才能触发

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
</head>
<body>
   <select id="pro">
       <option>四川</option>
       <option>云南</option>
       <option>贵州</option>
   </select>
   <script>
       var demo = document.getElementById("pro");
       demo.onchange = function(){
           console.log("内容真的变了");
       }
   </script>
</body>
</html>

页面加载完成事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function l(){
            var demo = document.getElementById("pro");
            demo.onchange = function(){
                console.log("内容真的变了");
            }
        }
    </script>
</head>
<body onload="l()">
    <select id="pro">
        <option>四川</option>
        <option>云南</option>
        <option>贵州</option>
    </select>
</body>
</html>

@湖

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript---------JS的基础使用

属性发生于何时onabort图片的加载被中断onblur元素失去焦点onchange域的内容被改变onclick当用户点击某个对象时调用的事件句柄onblclick当用户双击某个对象时调用的事件句柄onerror在加载文档或者图像时发生错误onfocus元素获得焦点onkeydown某个键盘按键被按下onkeypress某个按键被按下并松开onload一张页面或一幅图像完成加载鼠标按键被按下鼠标被移动onmouseout鼠标从某元素移开鼠标移到某元素之上。
复制链接

扫一扫