JavaScript基础

最新推荐文章于 2024-06-28 16:20:01 发布

3379

最新推荐文章于 2024-06-28 16:20:01 发布

阅读量657

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weizheng751676/article/details/122584625

版权

JavaScript基础

网页可以做什么？定义行为和动作

DOM文档对象模型，它的存在，让我们可以灵活的操作页面中的内容。

1、什么是js

js是一种轻量级的脚本语言！可以在网页中定义动作和行为！

2、作用

页面中的标签操作（增、删、改、查）

页面中的动态效果

页面中的数据交互

3、js的引入方式（如何在html中书写js代码）

3.1、行间引入

<!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>Document</title>
</head>
<body>
    <!-- 
        行间引入js，就是将js代码编写在标签的行间
        弊端：
                代码冗余程度过高
                js行为与html结构没有分离
                行为不能实现复用
     -->
    <button onclick="alert('我被点了~')">点我啊~</button>
    <button onclick="alert('我被点了~')">你再点我~</button>
</body>
</html>

3.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>内部引入</title>
    <script>
        /* 
            文档加载方法，这个方法中的代码，在整个文档加载完毕后，才会执行！
        */
        window.onload = function() {
            var btn = document.getElementsByTagName("button")[0];
            btn.onclick = function() {
                alert("我又被点了！");
            }
        }
    </script>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
</body>
<script>
    //在script标签中书写js代码！！！
    function hello() {
        alert("我被点了！");
    }

    //获取按钮
    var btn1 = document.getElementsByTagName("button")[0];
    btn1.onclick = hello;
    var btn2 = document.getElementsByTagName("button")[1];
    btn2.onclick = hello;
</script>
</html>

内部引入的方式：在html文件内部，使用script标签，来书写js脚本代码！
在html文件内部，使用script标签的位置，可以有：
head标签内部、body标签内部最后面、body标签同级以下！
推荐使用body标签内部最后面、body标签同级以下，因为此时页面html中的文档内容已经加载完毕，可以操作。但是如果放在head标签内部书写js脚本，页面加载还没有完成，就会出现问题，因为文档是按照从上往下加载的！

内部引入的弊端：
js脚本只能应用在当前的html页面中，无法实现行为在多个html文件中的共用！

3.3、外部引入（实际开发中应用广泛）

<!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>Document</title>
    <!-- 
        引入外界js文件，依旧需要用到script标签！
        外部引入的方式：
                首先在外界单独创建一个js文件，将脚本代码书写在该js文件中
                在html文件内部，使用script标签来引入外界的js文件
        注意事项：
            引入的位置依旧是：head标签内部、body内部最下面、body同级以下
            如果在head标签内部引入了外界的js文件，依旧需要注意文档加载的问题！
            不要在引入外界的js文件的script标签内再书写js代码了，书写了，也不执行！
                要么在再次创建一个js文件，引入
                要么在新的script标签内部直接书写js代码！
    -->
    <script src="js/action.js">
        //alert("我执行了吗？"); 该代码书写了也不执行！
    </script>
    <script>
        alert("我执行了吗？！！！")
    </script>
</head>
<body>
    <button>按钮</button>
</body>
</html>

4、js中变量的声明以及数据类型

4.1、变量声明

var 变量名 = 初值;

4.2、数据类型

typeof(变量名)=====>获取js变量数据类型的方法
console.log(name,typeof(name));

js常见的数据类型：

String 字符串类型
number 数值类型
Boolean 布尔类型 true or false
object 对象类型
undefined 未定义类型
null 空类型
function 方法、函数类型

js中输出的方式常见有两种：

console.log(typeof(name)); //打印输出
alert(typeof(hobby)); //以弹框形式输出

4.3、运算符

=和的区别

/*
	==（等于） 只要值一致就相等
	===（全等）除了值一致，类型也要一致，才是真
*/
console.log(3 == "3");
console.log(3 === "3");

5、程序结构

5.1、顺序结构

5.2、分支结构

if	switch    案例：闰年判断

闰年判断：
<!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>Document</title>
</head>
<body>
</body>
<script>
    /* 
        闰年的判断条件：
            1、能被400整除
            2、能被4整除且不能被100整除
    */
    var year = 2021;
    if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) {
        console.log(year + "是闰年");
    } else {
        console.log(year + "不是闰年");
    }
</script>
</html>

5.3、循环结构

循环结构：while、do...while、for、增强for循环

6、js中的基本对象

6.1、数组

创建数组：

（1）var arr = new Array(); 空数组
（2）var arr = new Array(默认长度) 默认长度的数组
（3）var arr = [元素列表]; 具有初值的数组

数组特点：

（1）在JS中，数组元素的类型可变
（2）在JS中数组的长度可变

数组属性：

length 获取数组长度、元素个数

常用方法：

（1）join(参数); 将数组元素通过指定的字符拼接成字符串
（2）push(); 向数组的末尾添加一个或更多元素，并返回新的长度

<script>
    //声明数组
    var arr = new Array();//空数组
    var arr1 = new Array(5);//初始容量为5的数组，元素都是undefined类型
    var arr2 = [10, 9, 6, 4, 8, "HelloWorld!"];//具有初值的数组

    //获取数组的长度、元素个数
    console.log(arr2.length);
    arr2.push("小丽");
    console.log(arr2.length);

    //常见的数组操作方法
    arr2.push("小黄毛");//最后追加
    console.log(arr2);
    arr2.unshift("小绿毛");//最前面追加
    console.log(arr2);

    arr2.pop();//删除最后一个元素
    console.log(arr2);
    arr2.shift();//删除第一个元素
    console.log(arr2);

    //起始下标位置(必需)  删除的元素个数(必需)  新增数据(可选)  
    arr2.splice(2, 0, 7);
    console.log(arr2);
    arr2.splice(5, 1);
    console.log(arr2);
    arr2.splice(6, 0, "小黄毛", "小绿毛");
    console.log(arr2);
    
    //数组遍历
    for (var i = 0; i < arr2.length; i++) {
        console.log(arr2[i]);
    }
    for (var i in arr2) {
        console.log(arr2[i]);
    }
</script>

6.2、方法Function对象

访问修饰符 [static] 返回值类型 方法名(参数列表) {方法体}

js中方法定义的语法格式：

a、
function 方法名(参数列表) {
方法体
}
b、
var 方法名 = function(形式参数列表){方法体};

方法的分类：

无参无返、有参有返、有参无返、无参有返

什么时候需要返回值：

封装的功能代码有结果，就需要返回值

什么时候需要参数：

封装的功能代码运行时，需要接收的外界数据，功能中不明确、动态改值的值就是参数！

<script>
    //无参无返的方法 打印HelloWorld！
    function hello() {
        console.log("HelloWorld!");
    }
    hello();

    //有参有返的方法 求两个数的和
    var sum = function(a, b) {
        return a + b;
    }
    console.log(sum(10, 20));
  //无参有返的方法 随机生成一个[10, 20]内的整数
    function randomNum() {
        /*
            1、目标区间内的整数个数：20 - 10 + 1 ==> 11
            2、11 * Math.random() ==> [0.0, 11.0)
            3、对第二步的区间进行取整 ==> [0, 10]
            4、第三步的区间 + 目标区间最小值 ==> [10, 20]

            [a, b]
            parseInt(Math.random() * (b - a + 1)) + a
        */
       return parseInt(Math.random() * (20 - 10 + 1)) + 10;
    }
    console.log(randomNum());

    //有参无返的方法 输出名字
    function printName(name) {
        console.log(name);
    }
    printName("犇犇");
</script>

6.3、Date日期对象

创建日期对象：

var now = new Date() 获取当前时间
日期对象的常用方法：

（1）toLocaleString()：根据本地时间格式，把 Date 对象转换为字符串。
（2）getTime()：返回 1970 年 1 月 1 日至今的毫秒数
（3）getHours()：返回小时数。
（4）getMinutes()：返回分钟数。
（5）getSeconds()：返回秒数。

<!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>Document</title>
</head>
<body></body>
<script>
    //获取到系统的当前时间
    var now = new Date();
    console.log(now);

    console.log(now.toLocaleString());
    console.log(now.getTime());
    console.log(now.getHours());//小时
    console.log(now.getMinutes());//分钟
    console.log(now.getSeconds());//秒
    console.log(now.getFullYear());//年
    console.log(now.getMonth() + 1);//月
    console.log(now.getDate());//日

</script>
</html>

7、事件

事件表示js在网页中的行为，比如登录、注册按钮的点击、表单的提交、表单的校验等都需要用到事件！

7.1、鼠标事件

<body>
    <div></div>
</body>

获取div:

var div = document.getElementsByTagName("div")[0];
/*
        js中为标签设置事件的语法格式：
        标签对象.事件名称 = function() {
            动作
        }
*/

7.1.1、点击事件

//点击事件
   div.onclick = function() {
       var r = parseInt(Math.random() * (255 - 0 + 1)) + 0;
       var g = parseInt(Math.random() * (255 - 0 + 1)) + 0;
       var b = parseInt(Math.random() * (255 - 0 + 1)) + 0;
       //js中this出现在方法内，表示该方法的所有者
       this.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
   }

7.1.2、移入事件

//移入事件
   div.onmouseover = function() {
       var r = parseInt(Math.random() * (255 - 0 + 1)) + 0;
       var g = parseInt(Math.random() * (255 - 0 + 1)) + 0;
       var b = parseInt(Math.random() * (255 - 0 + 1)) + 0;
       //js中this出现在方法内，表示该方法的所有者
       this.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
   }

7.1.3、移出事件

div.onmouseout = function() {
       var r = parseInt(Math.random() * (255 - 0 + 1)) + 0;
       var g = parseInt(Math.random() * (255 - 0 + 1)) + 0;
       var b = parseInt(Math.random() * (255 - 0 + 1)) + 0;
       //js中this出现在方法内，表示该方法的所有者
       this.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
   }

7.2、键盘事件

7.2.1、抬起

//抬起事件
    document.onkeyup = function() {
        console.log("键盘抬起了");
    }

7.2.2、按下

//按下事件
    document.onkeydown = function(event) {
        //事件方法中可以定义一个事件对象作为参数
        console.log(event.keyCode);
        switch (event.keyCode) {
            case 65:
                console.log("向左移动");
                break;
        
            default:
                break;
        }
        console.log("键盘按下了");
    }

7.2.3、长按

//长按事件
    document.onkeypress = function() {
        console.log("按住不撒手");
    }

7.3、表单事件（省市联动、挂号的科室医生选择等）

<body>
    <input type="text">
    <select name="city">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="杭州">杭州</option>
        <option value="曹县">曹县</option>
    </select>
</body>

获取收入框：

  var i = document.getElementsByTagName("input")[0];

7.3.1、聚焦事件

<script>
	//输入框聚焦，显示内容为张二麻子
    i.onfocus = function() {
        i.value = "张二麻子";
    }	
</script>

7.3.2、失焦事件

<script>
	 //输入框失焦，显示内容为王二驴子
    i.onblur = function() {
        i.value = "王二驴子";
    }	
</script>

7.3.3、值改变事件

<script>
	//市区下拉选择框值改变时，获取到当前选择的市区
    var s = document.getElementsByTagName("select")[0];
    s.onchange = function() {
        console.log(s.value);
    }	
</script>

8、DOM获取页面标签（只有拿到才能操作）

我们在js中，操作document对象，就相当于在操作整个html页面！
对页面的操作，无外乎就是对页面内容进行增删改查功能！获取页面标签(只有拿到才能操作！

<body>
    <div id="d" class="c">哈哈哈</div>
    <input type="text" name="username">
</body>

<script>
    //通过id名称获取标签，因为id名称唯一，所以得到了单个标签
    var div = document.getElementById("d");
    div.style.color = "red";

    /*
        通过类名class获取标签，因为类名可以添加多次，
        所以得到的是一组元素，想要操作先通过下标获取！
    */
    var div = document.getElementsByClassName("c")[0];
    div.style.color = "blue";

    /*
        通过标签名获取标签，也是一组元素，操作之前需要先通过下标获取！
    */
    var div = document.getElementsByTagName("div")[0];
    div.style.color = "orange";

    /*
        通过name属性的值来获取标签，因为name属性只有表单元素才有
        所以该方法主要用来获取表单元素input、select、textarea
        也是一组，操作之前需要通过下标获取！
    */
    var i = document.getElementsByName("username")[0];
    i.value = "牛鬼蛇神";
</script>

8.1、改变标签

获取到标签后，可以改变的标签：

8.1.1、css样式的修改

标签对象.style。样式名称 = “值”

css					js
font-size			fontSize
background-color	backgroundColor

//获取标签
var div = document.getElementsByTagName("div")[0];
//改变标签
div.style.color = "pink";
div.style.fontSize = "30px";

8.1.2、标签文本内容的修改

想要改变标签的文本内容，首先要对标签进行分类！

（1）表单元素标签（input 、select、textarea）

获取表单元素标签.value

（2）普通标签（innerText、innerHTML）

获取普通元素标签.innerText ------只能对纯文本进行处理

获取普通元素标签.innerHTML -------可以解析html结构，也可以处理纯文本

var i = document.getElementsByTagName("input")[0];
console.log(i.value);
i.value = "往而理性";

console.log(div.innerText);
console.log(div.innerHTML);

div.innerHTML = "<a href='http://www.baidu.com'>百度</a>"

8.1.3、标签行间属性的修改

js中改变、操作标签行间属性的方式：
1、标签对象.行间属性名
2、标签对象.setAttribute("行间属性名","行间属性值")

var a = document.getElementsByTagName("a")[0];
console.log(a.href);
a.href = "http://www.taobao.com";
a.setAttribute("href","http://www.jd.com");

9、浏览器对象模型

<script>
    var btn = document.getElementsByTagName("button")[0];
    btn.onclick = function() {
        //点击事件中完成页面的切换，跳转到01页面
        window.location = "01-checkAll.html";
    }
</script>

document.getElementById() <==> window.document.getElementById()

10、定时器

10.1、单次定时器

单次定时器最大的存在意义：可以让方法或者脚本功能延迟执行！
                setTimeout(方法, 延迟时间单位是毫秒)
                方法会在指定的延迟时间到达后，执行！执行一次

10.2、循环周期定时器

循环定时器最大的存在意思：可以让方法或者脚本功能反复执行！
                setInterval(方法，方法执行的间隔时间单位毫秒)
                每隔指定的时间，方法执行一次
                该方法除了开启循环定时器之外，还返回了定时器对象
                clearInterval(定时器对象) 可以关闭循环定时器

案例代码：

<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>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            position: fixed;
            right: 10px;
            bottom: 10px;
            display: none;
        }
    </style>
</head>

<body>
    <div></div>
</body>

<script>
//获取到div
   var div = document.getElementsByTagName("div")[0];
   
   //单次定时器
   function show() {
        div.style.display = "block";
   }
   /* setTimeout(function() {
        div.style.display = "block";
   }, 3000); */
   setTimeout(show, 3000);
   
   //循环定时器
   var index = 1;
   var timer = setInterval(function() {
        console.log("睡神苏俊奇" + index);
        index++;
        if (index > 5) {
            clearInterval(timer);
        }
   }, 2000);
</script>

3379

关注

0
点赞
踩
0

收藏

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

JavaScript基础网页可以做什么？定义行为和动作DOM文档对象模型，它的存在，让我们可以灵活的操作页面中的内容。1、什么是jsjs是一种轻量级的脚本语言！可以在网页中定义动作和行为！2、作用页面中的标签操作（增、删、改、查）页面中的动态效果页面中的数据交互3、js的引入方式（如何在html中书写js代码）3.1、行间引入<!DOCTYPE html><html lang="en"><head> <meta charset="U
复制链接

扫一扫