（三）JavaScript

最新推荐文章于 2024-07-21 10:17:51 发布

呼哈呼

最新推荐文章于 2024-07-21 10:17:51 发布

阅读量149

点赞数

分类专栏：前端基础文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44771551/article/details/108626182

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

（三）JavaScript

一、JavaScript简介

（1）什么是JavaScript

JavaScript是一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型；
它的解释器被称为JavaScript引擎，作为浏览器的一部分，广泛用于客户端的脚本语言，用来给HTML网页增加动态功能。

（2）JavaScript组成部分

（1）ECMAScript语法；
（2）文档对象模型（DOM Document Object Model）；
（3）浏览器对象模型（BOM Browser Object Model）。

（3）我的第一个JavaScript程序

<script>
	//在浏览器页面的左上角输出"hello world!"
	document.write("hello world!");
</script>

二、JavaScript基本语法

（1）变量声明

在JavaScript中，任何变量都用var关键字来声明，语句以分号结尾。

（2）基本类型

（1）基本类型有Number、String、Boolean、Undefined、Null五种；
（2）只有当变量被使用时才会分配数据类型；
（3）变量可以被重新赋予不同类型的值，变量类型会跟着改变；
（4）在JavaScript中，当一个变量未被初始化的时候，它的值为undefined。

（3）数组类型

数组在JavaScript中相当于Java的集合，可以存储任意类型的数据；

数组的定义：
var 数组名=[元素1, 元素2…];

（4）运算符

<script>
	//在js中string类型与number类型进行运算，"+"为拼接，其他的会直接运算
	var str = "5";
	console.log(str+2);
	console.log(str-2);
	console.log(str*2);
	console.log(str/2);
	console.log(str%2);
	//输出结果：
	//52
	//3
	//10
	//2.5
	//1
</script>

<script>
	//三个等于 "===" 比较的是类型和内容，两个等于 "==" 比较的是内容
	var str1 = 10;
	var str2 = "10";
	console.log(str1 === str2);
	console.log(str1 == str2);
	//输出结果：
	//false
	//true
</script>

（5）分支语句

if语句和switch语句里可以写任意类型的数据
为true：非0的数值，非""
为false：0，""，null，undefined，NaN

（6）函数

1）函数的定义：关键字function

function 函数名(参数1,参数2…){
函数体;
}

<script>
	function add(a,b) {
		console.log(a + b);
		//输出：3
	}
	//调用add函数
	add(1,2);
</script>

<script>
	//arguments为内置关键词，类似java中的可变参数，本质是数组
	function add() {
		var sum = 0;
		for (var i = 0;i <arguments.length;i++){
			sum += arguments[i];
		}
		return sum;
	}
	console.log(add(1,2));
	//输出：3
	console.log(add(1,2,3));
	//输出：6
</script>

2）常见弹窗函数

alert：一个只能点击确定的弹窗，没有返回值

alert(“你好”);

confirm：一个可以点击确定或者取消的弹窗，返回值为boolean

当点击确定时，返回true；当点击取消或者关闭时，返回false
confirm(“你好”);

prompt：一个可以输入文本内容并可以点击确定或者取消的弹窗，返回值为用户输入的内容或者null

第一个参数是提示信息，第二个参数是用户输入的默认值
当点击确定时，返回用户输入的内容；当点击取消或者关闭时，返回null
prompt(“你多大了？”,“18”);

（7）事件

js常用事件及其用法

1）onchange：焦点离开时内容发生改变

<script>
    function myFunction()
    {
        var fname=document.getElementById("fname");
        fname.value="hello";
    }
</script>
<body>
    请输入字符：<input type="text" id="fname" onchange="myFunction()">
    <p>当焦点离开文本框时，文本框的内容会改变。</p>
</body>

2）onclick：点击事件

<script>
    function myFunction()
    {
        alert("hello");
    }
</script>
<body>
    <input type="button" value="点击" id="fname" onclick="myFunction()">
</body>

3）onmouseover、onmouseout：鼠标移开事件和鼠标移入事件

<script>
    function mOver(obj)
    {
        obj.innerHTML="谢谢"
    }

    function mOut(obj)
    {
        obj.innerHTML="把鼠标移到上面"
    }
</script>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
     style="background-color:black;padding:40px;
     text-align:center;color:#ffffff;">把鼠标移到上面
</div>

4）onmousemove：在元素上移动鼠标事件

5）onkeyup：释放键盘事件

6）onkeydown：键盘按下事件

7）onload：页面加载事件

8）onsubmit：表单提交事件

三、DOM

（1）获取元素对象

<body>
    <div id="div" class="div" name="div">这是个div</div>
</body>
<script>
	//1.根据id名获取元素对象
	var id = document.getElementById("div");
	//2.根据class名获取元素对象
    var className = document.getElementsByClassName("div")[0];
    //3.根据标签名获取元素对象
    var div = document.getElementsByTagName("div")[0];
    //4.根据name名获取元素对象
    var divName = document.getElementsByName("div")[0];
</script>

（2）改变HTML

1）改变元素的内容

<body>
    <div>hello</div>
    <input type="button" value="点击修改" onclick="btn()">
</body>
<script>
	function btn() {
		var div = document.getElementsByTagName("div")[0];
		//innerHTML 会解析标签
		//innerText 纯文本
	    div.innerText = "world!";
	}
</script>

2）改变元素的属性

<body>
    <input type="button" value="change" onclick="btn()"><br/>
    <img src="img/1.jpg" id="img"/><br/>
</body>
<script>
    var flag = true;
    function btn() {
        var img = document.getElementById("img");
        if(flag){
            img.src = "img/2.jpg";
        }else{
            img.src = "img/1.jpg";
        }
        flag = !flag;
    }
</script>

3）改变元素的样式

<body>
    <input type="button" value="change" onclick="btn()"><br/>
    <img src="img/1.jpg" id="img"/><br/>
</body>
<script>
    var flag = true;
    function btn() {
        var img = document.getElementById("img");
        if(flag){
            img.style.visibility = "hidden";
        }else{
            img.style.visibility = "visible"
        }
        flag = !flag;
    }
</script>

4）节点的添加

<body>
    <input type="button" value="add" id="input"><br/>
    <img src="img/1.jpg" />
</body>
<script>
    onload = function () {
        //通过 id 获取节点对象
        var input = document.getElementById("input");
        //给标签对象添加点击事件
        input.onclick = function () {
            //创建新节点
            var img = document.createElement("img");
            //添加属性
            img.src = document.getElementsByTagName("img")[0].src;
            //把img节点添加到指定的父标签中
            document.getElementsByTagName("body")[0].appendChild(img);
        }
    }
</script>

5）节点的克隆

<body>
    <input type="button" value="add" onclick="btn()"><br/>
    <img src="img/1.jpg" />
</body>
<script>
    function btn() {
        var img = document.getElementsByTagName("img")[0];
        //调用克隆方法
        //参数默认为false，只克隆标签本身的属性；参数改为true，会克隆内容和子标签
        //var newImg = img.cloneNode(true);
        var newImg = img.cloneNode();
        //添加新的标签对象到指定父节点中
        document.getElementsByTagName("body")[0].appendChild(newImg);
    }
</script>

6）节点的删除

<body>
    <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另一个段落。</p>
    </div>
</body>
<script>
    var div1=document.getElementById("div1");
    var p1=document.getElementById("p1");
    div1.removeChild(p1);
</script>

四、Cookie

Cookie 是指某些网站服务器为了辨别用户身份和进行session跟踪，而储存在用户浏览器上的文本文件数据（通常都是经过加密的），Cookie可以保持登录信息到用户下次与服务器的会话。

一个Cookie主要由标识该信息的名称（name）和值（value）组成。

Cookie原理

在这里插入图片描述

<body>
    <input type="button" value="保存" onclick="addCookie()">
    <input type="button" value="获取" onclick="getCookie()">
    <input type="button" value="删除" onclick="delCookie()">
</body>
<script>
    function addCookie() {
    	//获取系统当前时间
        var date = new Date();
        //将保存数据的期限设置成1个小时后
        date.setTime(date.getTime()+1000*60*60);
        //将数据和时间保存到cookie中
        document.cookie = "username=zs;expires="+date.toGMTString();
    }
    function getCookie() {
    	//获取cookie中的数据
        alert(document.cookie);
    }
    function delCookie() {
        var date = new Date();
        //添加新的数据覆盖原本的数据，并将期限设置成1秒后，从而实现删除
        document.cookie="username=ls;expires="+date.toGMTString();
    }
</script>

五、js创建对象

（1）使用构造函数创建对象

<script>
    function Student(name, age) {
        this.name = name;
        this.age = age;
        this.test = function () {
            console.log("使用构造函数创建对象");
        }
    }
    var stu = new Student('zs',18);
    console.log(stu.name);
    console.log(stu.age);
    stu.test();
</script>

（2）使用Object创建对象

<script>
    var stu = new Object();
    stu.name = 'ls';
    stu.age = 20;
    stu.test = function () {
        alert("使用Object创建对象");
    }
    console.log(stu.name);
    console.log(stu.age);
    stu.test();
</script>

（3）使用JSON格式创建对象（最常用）

<script>
    var stu = {
        name:'zs',
        age:18,
        test:function () {
            alert("使用JSON格式创建对象");
        }
    }
    stu.test();
</script>

六、BOM

<script>
	alert("浏览器窗口的内部高度："+window.innerHeight+"、浏览器窗口的内部宽度："+window.innerWidth);
	alert("可用宽度: " + screen.availHeight+"、"+"可用高度: " + screen.availWidth);
</script>

（1）页面的前进与后退

<body>
    <h1>第一页</h1>
    <a href="第二页.html">第二页</a>
    <a href="第三页.html">第三页</a>
    <br/><br/>
    <!--
    两种方式：
    第一种
    <input type="button" value="后退" οnclick="history.back()">
    <input type="button" value="前进" οnclick="history.forward()">
    第二种
    <input type="button" value="后退" οnclick="history.go(-1)">
    <input type="button" value="前进" οnclick="history.go(1)">
    -->
    <input type="button" value="后退" onclick="history.go(-1)">
    <input type="button" value="刷新" onclick="history.go(0)">
    <input type="button" value="前进" onclick="history.go(1)">
</body>

<body>
    <h1>第二页</h1>
    <a href="第一页.html">第一页</a>
    <a href="第三页.html">第三页</a>
    <br/><br/>
    <input type="button" value="后退" onclick="history.go(-1)">
    <input type="button" value="刷新" onclick="history.go(0)">
    <input type="button" value="前进" onclick="history.go(1)">
</body>

<body>
    <h1>第三页</h1>
    <a href="第一页.html">第一页</a>
    <a href="第二页.html">第二页</a>
    <br/><br/>
    <input type="button" value="后退" onclick="history.go(-1)">
    <input type="button" value="刷新" onclick="history.go(0)">
    <input type="button" value="前进" onclick="history.go(1)">
</body>

（2）定时器

定义定时器：
- setInterval(‘调用函数’,毫秒时间)：每间隔固定毫秒值就执行一次函数
- setTimeout(‘调用函数’,毫秒时间)：在固定时间之后执行一次调用函数
关闭定时器：
- clearInterval(定时器名称)
- clearTimeout(定时器名称)

<script>
    onload = function () {
        timer = setInterval(function () {
            alert("定时器");
        },2000);
    }
    //清除定时器
    //clearInterval(timer);
</script>

<!--利用定时器写的时间-->
<script>
    onload = function () {
        var span = document.getElementsByTagName("span")[0];
        setInterval(function () {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var day = date.getDate();
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var seconds = date.getSeconds();
            span.innerText = year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
        },1000);
    }
</script>
<body>
    <span></span>
</body>

呼哈呼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（三）JavaScript

（三）JavaScript一、JavaScript简介（1）什么是JavaScriptJavaScript是一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型；它的解释器被称为JavaScript引擎，作为浏览器的一部分，广泛用于客户端的脚本语言，用来给HTML网页增加动态功能。（2）JavaScript组成部分（1）ECMAScript语法；（2）文档对象模型（DOM Document Object Model）；（3）浏览器对象模型（BOM Brow
复制链接

扫一扫