java day33——JavaScript

最新推荐文章于 2024-08-30 20:36:37 发布

chronos+

最新推荐文章于 2024-08-30 20:36:37 发布

阅读量229

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_40905010/article/details/108107868

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JS代码添加方式

内部方式添加js代码, script标签位置没有要求
引入js文件的script标签中, 不能再写js代码

 <script src="js/my.js" type="text/javascript">
        // 再加js代码 会出错
 </script>

JavaScript三核心实现

ECMAScript BOM DOM

ECMAScript基础

数据类型

弱类型

// 1.JS数据类型是弱类型
        var a = 1;
        a = 3.14;
        a = true;
        a = "haha";
        a = new Date();

typeof

typeof: 可以查看变量类型
undefined: 未定义

 // 2.JS原始类型    typeof: 可以查看变量类型
        var b; // undefined: 未定义
        console.log(b); // 控制台打印,undefined
        b = 3.14;
        console.log(typeof b); // number
        b = true;
        console.log(typeof b); // boolean
        b = 'hello';
        console.log(typeof b); // string: '' ""都是字符串
        b = null;
        console.log(typeof b); // object

可以简化（不推荐）

 c = 1; // var省略掉以后, c就变成了全局变量
 c = true // ;省略, 一行中只有一句js代码

运算符比较

== 比较内容, 不比较类型
=== 先比较类型, 再比较内容

		console.log('----------');
        d = "1"; // string
        console.log(d == 1); // true
        console.log(d === 1); // false

事件

常用事件

	onblur - 失去焦点, 通常用于input标签
    onchange - 内容改变, 通常用于select标签
    onclick - 单击, 可以用于所有元素
    onfocus - 获得焦点, 通常用于input标签
    onkeydown - 键盘按下, 通常用于input标签
    onload - 某个页面或图像被完成加载, 通常用于body标签
    onmouseover - 鼠标被移到某元素之上
    onmouseout - 鼠标移开
    
    onsubmit - 提交按钮被点击, 用于form标签
    			return false - 表单数据不能提交到服务器
    			return true - 可以提交到服务器
    			onsubmit = 'return checkUserName()'

添加事件方法

<script>
        // 定义函数 function
        var a = 1;
        function m1() {
            console.log(a++ + "按钮2被点击了!");
            //x` 弹窗
            alert(a++ + "按钮2被点击了!");
        }
    </script>
</head>
<body>
    <button onclick="javascript:console.log('普通按钮被点击')">普通按钮</button>
    <button onclick="m1()">普通按钮2</button>

页面加载函数

页面加载完毕后，就执行方法
方法一

<script>
        function m1() {
            // 1.获得图片标签
            var img = document.getElementById("img");
            // 2.修改图片路径
            img.src = "img/2.jpg";
        }
    </script>
</head>
<!-- 1.添加页面加载函数的方式 -->
<body onload="m1()">
<img id="img" src="img/1.jpg" width="100%"/>
</body>

方法二（常用）

<script>
        // 2.页面加载函数的方式2
        window.onload = function() { // 匿名函数
            // 1.获得图片标签
            var img = document.getElementById("img");
            // 2.修改图片路径
            img.src = "img/2.jpg";
        }
    </script>
</head>
<body>
<img id="img" src="img/1.jpg" width="100%"/>
</body>

数组

弱类型，随心所欲

<script>
        // 创建出一个空白的数组
        var arr = new Array();
        console.log(arr.length);
        console.log(arr);

        // 创建一个长度为3, 内容空白的数组 undefined
        arr = new Array(3);
        console.log(arr.length);
        console.log(arr[0]); // undefined

        // 创建一个内容是 1,2,3 的数组
        arr = new Array(1, 2, 3);
        console.log(arr.length);
        console.log(arr);
        console.log(arr[0]);

        // 创建一个内容是 1,2,3 的数组
        arr = [1, 2, 3];
        console.log(arr.length);
        console.log(arr);
        console.log(arr[0]);

        // JS中的数组不存在下标越界, 数组长度可变
        arr[4] = true;
        console.log(arr);

        // 创建数组, 存放10个随机数
        var arr1 = [];
        for (var i = 0; i < 10; i++) {
            arr1[i] = parseInt(Math.random() * 100);
        }
        console.log(arr1);
    </script>

常用对象

window弹窗和计时器

window.alert()纯消息弹窗

	<script>
        // 确认消息弹窗
        var r = confirm("这是提示消息");
        console.log(r); // 确认返回true, 取消返回false

        // 输入确认弹窗
        var r = prompt("这是提示消息");
        console.log(r); // 确认返回输入内容, 取消返回null
    </script>

window计时器

setTimeout()在指定的毫秒数后调用函数或计算表达式。setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
clearTimeout()

setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
clearInterval()

<input type="text" id="clock" size="35" />
<script>
var int=self.setInterval("clock()",50)
function clock()
  {
  var t=new Date()
  document.getElementById("clock").value=t
  }
</script>
<button onclick="int=window.clearInterval(int)">Stop interval</button>

history前进后退

forward()
back()
go()

<script>
        function goForward() {
            // history.forward();
            history.go(1);//1是前进，下一步必须已经走过才能前进；-1为返回
        }
    </script>
</head>
<body>
    <a href="01_JS入门.html">01_JS入门</a>
    <button onclick="goForward()">前进</button>
</body>

location自动跳转URL

属性 href 设置或返回完整的 URL

<script>
        function m1() {
            location.href = "http://www.baidu.com";
        }
    </script>
</head>
<body>
    <button onclick="m1()">点我去百度</button>
</body>

补充

innerHTML和innerText标签体修改

innerHTML：将内容看做HTML标签解析
innerText: 将内容当成纯文本

<body>
    <span id="span1">标签体</span><br/>
    <span id="span2">标签体</span>
    <script>
       document.getElementById("span1").innerHTML = "<font color='red'>内容</font>";
       document.getElementById("span2").innerText = "<font color='red'>内容</font>";
    </script>
</body>

在这里插入图片描述

阻止超链接的默认行为

<script>
        function m1(event) {
            alert("就单纯的想单击他,不想打开超链接");
            // 阻止超链接的默认行为
            var event = event || window.event;
            event.preventDefault();
        }
        function m2() {
            alert("就单纯的想单击他,不想打开超链接");
        }
    </script>
</head>
<body>
    <a href="http://www.baidu.com" onclick="m1()">超链接不是为了打开一个页面,只是单纯地想加一个onclick事件</a><br>
    <a href="javascript:void(0)" onclick="m2()">超链接不是为了打开一个页面,只是单纯地想加一个onclick事件</a>
</body>

案例

轮播图

document.getElementById(id);
document: 文档对象, html文档的加载是按照书写顺序执行的
id: 元素加载完成后才会对应出现元素的属性
所以, document.getElementById(id) 使用的前提是
元素已经加载好
解决方案:
1.script标签书写在元素后面
2.script标签在head中
body οnlοad=“m1()” -> 页面加载函数
修改图片路径
img.src = “”;
定时周期性设置
timer = setInterval(“fun1()”, time)
clearInterval(timer);

	<script>
        // 2.页面加载函数的方式2
        // 函数名 startChange 就表示这个函数
        onload = startChange;
        // console.log(typeof startChange); // function
        function startChange() {
            // 设置定时
            timer = setInterval("changeImg()", 3000);
        }
        var index = 1;
        function changeImg() {
            index ++;
            if (index > 3)
                index = 1;
            // 1.获得图片标签
            var img = document.getElementById("img");
            // 2.修改图片路径
            img.src = "img/"+index+".jpg";
        }
        function stopChange() {
            // 取消定时
            clearInterval(timer);
        }
    </script>
<div id="lunbo">
    <img id="img" src="img/1.jpg" width="100%"
         onmouseover="stopChange()" onmouseout="startChange()"/>//鼠标移到图片上，停止计时器；移开，开始计时
</div>

定时弹广告

一次性定时设置
timer = setTimeout(“fun1()”, time)
clearTimeout(timer); – 了解
显示和隐藏效果
css: display: block inline none

	<script>
        // 页面加载函数
        onload = function() {
            // 5秒后显示广告图片
            setTimeout("showAd()", 5000);
        }
        // 显示广告图片
        function showAd() {
            // 1.获得广告图片的img元素
            var adImg = document.getElementById("ad");
            // 2.修改样式为显示
            adImg.style.display = "block";
            // 5秒后隐藏广告图片
            setTimeout("hideAd()", 5000);
        }
        function hideAd() {
            // 1.获得广告图片的img元素
            var adImg = document.getElementById("ad");
            // 2.修改样式为隐藏
            adImg.style.display = "none";
        }
    </script>
<img id="ad" style="display: none;" src="img/1.jpg" height="200px"/>

注册表单校验

弹窗提示

通过id获得元素: document.getElementById(id)
获得input输入框的值: xx.value
正则表达式: /^正则表达式$/
判断正则表达式匹配的方法 regex.test(string)

			<script>
				function checkUserName() {
					// 1.用户名不能为空
					// 第一步: 获得用户名输入框
					var nameInput = document.getElementById("username");
					// console.log(nameInput)
					// 第二步: 获得用户名输入框中的值
					var username = nameInput.value;
					// 第三步: 判断username是否为空
					// console.log(username);
					if (username == "") {
						alert("用户名不能为空!");
						// 阻止表单的提交
						return false;
					}
					// 定义正则表达式
					var regex = /^[a-zA-Z]\w{5,17}$/;
					// 第四步: 判断正则表达式验证
					if (!regex.test(username)) {
					// if (!username.match(regex)) {
						alert("用户名不符合规范!");
						return false;
					}
					return true;
				}
			</script>
			
<form action="#" onsubmit="return checkUserName()" method="get">

标签体提示

span用于修饰单独的文本样式
修改标签体的内容, 不能用value属性

带标签体的有：<a></a> <span></span> <button></button>

innerHTML:将内容看做HTML标签解析
innerText:将内容当成纯文本

<script>
				function checkUserName() {
					// 1.用户名不能为空
					// 第一步: 获得用户名输入框
					var nameInput = document.getElementById("username");
					// console.log(nameInput)
					// 第二步: 获得用户名输入框中的值
					var username = nameInput.value;
					// 定义正则表达式
					var regex = /^[a-zA-Z]\w{5,17}$/;
					// 第三步: 判断username是否为空
					// console.log(username);
					if (username == "") {
						document.getElementById("usernameMsg").style.display = "inline";
						// 阻止表单的提交
						return false;
					}
					// 第四步: 判断正则表达式验证
					else if (!regex.test(username)) {
					// if (!username.match(regex)) {
						// 替换 usernameMsg 中的内容
						document.getElementById("usernameMsg").innerText = "用户名不符合规范!";
						document.getElementById("usernameMsg").style.display = "inline";
						return false;
					}
					return true;
				}
			</script>

<form action="#" onsubmit="return checkUserName()" method="get">
					<table>
						<tr>
							<td class="td_left"><label for="username">用户名</label></td>
							<td class="td_right">
								<input type="text" name="username" id="username" placeholder="请输入用户名"></td>
							<td>
								<span class="error" id="usernameMsg">用户名不能为空</span>
							</td>
						</tr>