前端基础3——JavaScript基础用法

企业开发 2023-12-18 00:38:04 阅读次数: 0

文章目录

一、基本使用

  • JavaScript（简称JS）：是一种轻量级客户端脚本语言，通常被直接嵌入HTML 页面，在浏览器上执行。
  • JavaScript作用：改变页面中的HTML元素、属性、样式、事件。

1.1 内部方式

  • 内嵌样式，在body标签中使用。

1.在body标签中写js脚本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js测试</title>
</head>
<body>
<script>
    alert("你好，qingjun");
</script>
</body>
</html>

2.查看效果。
在这里插入图片描述

1.2 外部导入方式

  • 在head标签中使用。

1.编写js脚本main.js，统一存放在js目录下。

alert("你好，卿君");

2.html模板引用js文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js测试</title>
    <script type="text/javascript" src="js/main.js"></script>   ##引用js文件。
</head>
<body>
</body>
</html>

3.查看效果。
在这里插入图片描述

1.3 css标签调用js脚本（触发事件）

  • 事件：指的是当HTML中发生某些事件时所调用的方法（处理程序）。
  • 例如点击按钮，点击后做相应操作，例如弹出一句话。

1.可以使用css中的一个标签直接调用js脚本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js测试</title>
</head>
<body>

<button type="button" onclick="alert('欢迎来到中国')">提交</button>   ## onclick标签直接调用js脚本。

</body>
</html>

2.查看效果。
在这里插入图片描述

二、Windows对象

  • Window 对象表示浏览器中打开的窗口。

2.1 对象属性

window对象属性 描述
document 每个载入浏览器的 HTML 文档都会成为 Document 对象
innerheight 返回窗口的文档显示区的高度
innerwidth 返回窗口的文档显示区的宽度
location Location 对象包含有关当前 URL 的信息
Navigator Navigator 对象包含有关浏览器的信息
Screen Screen 对象包含有关客户端显示屏幕的信息
history History 对象包含用户（在浏览器窗口中）访问过的 URL
window window 包含对窗口自身的引用

1.基本使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制开关</title>
</head>
<body>
<script type="text/javascript">
    window.document.write("输出内容");
    console.log(window.innerWidth,window.innerHeight,"输出内容");   //浏览器做适配时可以使用。
    console.log(window.Navigator);
</script>
</body>
</html>

在这里插入图片描述

2.刷新按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制开关</title>
</head>
<body>
<button type="button" onclick="location.reload()">刷新当前页面</button>
<button type="button" onclick="location.href=location.href">重新请求当前页面</button>
<button type="button" onclick="location.href='http://www.baidu.com'">请求别的页面</button>
</body>
</html>

在这里插入图片描述

2.2 对象方法

window对象方法 描述
alert() 显示带有一段消息和一个确认按钮的警告框
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式
clearInterval() 取消由 setInterval() 设置的 timeout
setTimeout() 在指定的毫秒数后调用函数或计算表达式。（类似于休眠）
clearTimeout() 取消由 setTimeout() 方法设置的 timeout
typeof() 查看数据类型

1.点击一次，刷新一次当前系统时间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制开关</title>
</head>
<body>
<button type="button" onclick="refresh()">点击查看当前时间</button>
<script type="text/javascript">
    function refresh() {
        date = new Date()
        alert("当前时间为："+date)
        console.log(date)
    }
</script>    
</body>
</html>

在这里插入图片描述
2.点击开始，时间自动走。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制开关</title>
</head>
<body>

<div id="demo">
    <p>当前时间</p>
</div>
<button type="button" onclick="startRefresh()">开始</button>
<button type="button" onclick="stopRefresh()">停止</button>

<script type="text/javascript">
    function refresh() {
        x = document.getElementById('demo');
        y = x.getElementsByTagName("p");
        y[0].innerHTML = new Date() // 获取当前时间
    }

    // 点击开始，调用refresh()函数，1000毫秒进行周期性计数走动。
    function startRefresh() {
        interval = setInterval("refresh()", 1000);
    }
    // 停止
    function stopRefresh() {
        console.log(interval);
        clearInterval(interval)
    }
</script>
</body>
</html>

在这里插入图片描述

三、数据类型

  • 在JS中，数据类型有：字符串、数组、布尔、数组、对象、Null、Undefined。

3.1 字符串处理

1.字符串处理方法。

<script type="text/javascript">
    var s = "hello world";
    s.length; // 字符串长度
    s[4] //根据索引获取值
    s.replace('h','H'); //替换某个字符
    s.split("分隔符") //分隔为数组
    s.match("w") //找到返回匹配的字符，否则返回null
    console.log(s.match("w"));  //将内容打印在控制台。
    console.log(s.length);
    console.log(s);
    console.log(s.replace('o','M'));
    console.log(s.split("o"))
</script>

在这里插入图片描述
2.字符拼接+。
在这里插入图片描述

3.2 数组处理

1.数组处理，相当于python中的列表，是一个序列的数据结构。

###############################################################
//定义数组。
var computer = new Array();     //定义空数组。
var computer = ["主机","显示器","键盘","鼠标"]    //定义有值的数组。
###############################################################
//向数组添加元素。
computer[0]="主机";     //通过索引下标获取数组中的有序元素。
computer[1]="显示器";
computer[2]="键盘";
computer.push("网线");   //追加元素。
###############################################################
console.log(computer[3]);   //根据下标获取元素并打印到控制台。

2.查看效果。
在这里插入图片描述

3.3 对象处理

1.对象处理，相当于python中的字典，是一个具有映射关系的数据结构，用于存储有一定关系的元素。字典中的key不允许重复。

格式：d = {'key1':value1, 'key2':value2, 'key3':value3}
###############################################################
var user = {
	name:"卿君",
	sex: "男",
	age:"26"
};
console.log(user.name);   //根据key查看value值，方式一。
console.log(user['age']);   //根据key查看value值，方式二。
user.height = "180cm"      //增加一对key-value。
user['height'] = "182cm";    //根据key修改value值。
console.log(user.height);

2.查看效果。
在这里插入图片描述

四、流程控制

4.1 操作符

  • 操作符：一个特定的符号，用它与其他数据类型连接起来组成一个表达式。常用于条件判断，根据表达式返回True/False采取动作。
类型 操作符
比较操作符 == 等于
!= 不等于
> 大于
< 小于
>= 大于等于
<= 小于等于
算术操作符 + 加法
- 减法
* 乘法
/ 除法
% 取余
++ 自增，自动+1
– 自减，自动-1
逻辑操作符 && 与
|| 或
!() 结果取反
赋值运算符 = 赋值
+= 加法赋值
-= 减法赋值
*= 乘法赋值
/= 除法赋值
%= 取余赋值

4.2 if判断语句

  • if条件判断：判定给定的条件是否满足（True或False），根据判断的结果决定执行的语句。
//语法。
if (表达式) {
	<代码块>
} else if (表达式) {
	<代码块>
} else {
	<代码块>
}

1.控制开关。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制开关</title>
</head>
<body>
<img id="dengpao" src="img/off.png" alt=""><br>
<button type="button" onclick="main('on')">开灯</button>
<button type="button" onclick="main('off')">关灯</button>
<script type="text/javascript">
    function main(status) {
        x = document.getElementById('dengpao');
        console.log(x);
        if (status == 'on') {
            x.src = "img/on.png";
        } else if (status == 'off') {
            x.src = "img/off.png";
    }
}
</script>
</body>
</html>

2.查看效果。
在这里插入图片描述

4.3 for循环语句

  • for循环：一般用于遍历数据类型的元素进行处理，例如字符串、数组、对象。
//语法。
for (<变量> in <序列>) {
	<代码块>
}

1.遍历数组，通过索引获取元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制开关</title>
</head>
<body>
<script type="text/javascript">
    var computer = ["主机","显示器","键盘","鼠标"];
    for(i in computer) {
        // console.log(i)   //获取元素索引。
        console.log(i,computer[i]) // 使用索引获取值
    }
</script>
</body>
</html>

在这里插入图片描述
2.遍历数组，通过匿名函数返回元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制开关</title>
</head>
<body>
<script type="text/javascript">
    var computer = ["主机","显示器","键盘","鼠标"];
    computer.forEach(function(e) {
        console.log(e)
    })
</script>
</body>
</html>

在这里插入图片描述
3.遍历对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制开关</title>
</head>
<body>
<script type="text/javascript">
    var user1 = {name:"卿君",sex:"男",age:"26"};   
    for(let a in user1) {                        //方式一。
        console.log(a+"："+user1[a])
    }
    var user2 = {name:"柏木",sex:"男",age:"28"};
    Object.keys(user2).forEach(function (k) {    //方式二，使用内置对象遍历。
        console.log(k + "——" + user2[k])
    })
</script>
</body>
</html>

在这里插入图片描述

4.4 continue与break语句

  • continue 当满足条件时，跳出本次循环。
  • break 当满足条件时，跳出所有循环。
  • 注意：只有在循环语句中才有效。

1.示例代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制开关</title>
</head>
<body>
<script type="text/javascript">
    var computer = ["主机","显示器","键盘","鼠标"];
    //不打印第三个元素
    for(i in computer) {
        if (i == "2") {
        continue
    } else {
        console.log(computer[i])
        }
    }
    //不打印第第二个以后的元素
    for(i in computer) {
        if (i == "2") {
        break
    } else {
        console.log(computer[i])
        }
    }
</script>
</body>
</html>

2.查看效果。
在这里插入图片描述

4.5 函数定义与调用

  • 函数：是指一段可以直接被另一段程序或代码引用的程序或代码。
  • 在编写代码时，常将一些常用的功能模块编写成函数，放在函数库中供公共使用，可减少重复编写程序段和简化代码结构。
//语法：
function 函数名称(参数1, 参数2, ...) {
	<代码块>
return <表达式>
}

1.定义函数hello，在按钮中引用函数，点击按钮执行hello函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制开关</title>
</head>
<body>
<button type="button" onclick="hello()">按钮</button>
<script type="text/javascript">
    function hello() {
        alert("hello world")
    }
</script>
</body>
</html>

在这里插入图片描述
2.传参用法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制开关</title>
</head>
<body>
<button type="button" onclick="hello('卿君','26')">按钮</button>
<script type="text/javascript">
    function hello(name,age) {
        alert("你好,我是"+name+", 今年"+age+"岁。")
        console.log(hello)
    }
</script>
</body>
</html>

在这里插入图片描述

五、选择器

查找元素方法：

  • 通过id（常用）
  • 通过类名
  • 通过标签名

5.1 通过id获取元素

1.示例代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js测试</title>
</head>
<body>
<button type="button" id="qingjun">查看内容</button>
<script>
    var x = document.getElementById("qingjun"); //获取id为qingjun的元素
    x.onclick = function () {                  //绑定“查看内容”事件
        alert('好好学习')
    }
</script>
</body>
</html>

2.查看效果。
在这里插入图片描述

5.2 通过标签名获取元素

1.示例代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js测试</title>
</head>
<body>
<div id="main">
    <p>Hello world！1</p>
    <p>Hello world！2</p>
    <p>Hello world！3</p>
</div>
<script type="text/javascript">
    var x = document.getElementById("main");  //document表示当前页面，获取id为main的元素，返回的是一个集合。
    var y = x.getElementsByTagName("p"); // 获取集合中的p标签，通过下标获取。
    document.write("div中的第二段文本是：" + y[1].innerHTML); //向当前文档写入内容
</script>
</body>
</html>

2.查看效果。
在这里插入图片描述

六、JS操作HTML

6.1 插入内容

1.向id=bb的标签写入内容。

<p id="bb"></p>
<script type="text/javascript">
    var x = document.getElementById('bb');  //获取id为main的元素
    x.innerHTML="Hello"   //插入内容Hello。
</script>

2.查看结果。
在这里插入图片描述

6.2 修改标签属性

1.修改显示图片，修改之前。

<img src="img/3.jpg" alt="" id="aa">

在这里插入图片描述
2.修改之后。

<img src="img/3.jpg" alt="" id="aa">
<script type="text/javascript">
    var x = document.getElementById('aa');
    x.src="img/4.jpg"
</script>

在这里插入图片描述

6.3 改变标签样式

1.修改id=bb标签的颜色。

<p id="bb"></p>
<script type="text/javascript">
    var x = document.getElementById('bb');
    x.innerHTML="Hello"   //先插入内容。
    x.style.color="blue"  //在修改字体颜色
</script>

2.查看结果。
在这里插入图片描述

6.4 获取输入的值

  • 比如提交一个数据框里的内容，点击提交按钮，可以获取到刚刚输入的值供其他功能使用。

1.获取输入框里的内容。

请输入您的姓名: <input type="text" id="cc"><br>
<button type="button" name="text" onclick="main1()">提交</button>  //店家提交按钮执行main1函数。

<script type="text/javascript">
    function main1() {
        var y =  document.getElementById("cc");
        alert(y.value)
    }
</script>

在这里插入图片描述
2.修改其他标签的内容。

#############################################################
<p id="bb"></p>
请输入您的姓名: <input type="text" id="cc"><br>
<button type="button" name="text" onclick="main1()">提交</button>
#############################################################
<script type="text/javascript">
    var x = document.getElementById('bb');    //获取id=bb标签的元素。
    x.innerHTML="Hello"    //向元素插入HTML内容
    function main1() {
        var y =  document.getElementById("cc");
        var s = document.getElementById("bb");
        s.innerHTML = y.value   //设置s元素的内容是id=c的input值

    }

在这里插入图片描述

6.5 添加标签元素

1.向div中添加一个p标签，并追加标签内容。

<div id="main">
    <p>张三，Java开发</p>
    <p>李四，大数据工程师</p>
    <p>王五，k8s运维</p>
</div>

<script type="text/javascript">
    var x = document.getElementById("main"); //获取id为main的元素
    var y = x.getElementsByTagName("p"); // 返回的是一个集合，下标获取
    var p = document.createElement("p"); //创建p标签
    var t = document.createTextNode("卿君，渗透测试"); //创建添加的文本
    p.appendChild(t); //向创建的p标签追加文本
    var e = document.getElementById("main"); //获取添加的标签父元素
    e.appendChild(p) //向父元素添加新创建的p标签
</script>

2.查看效果。
在这里插入图片描述

6.6 删除元素

1.删除id=main标签的元素。

<div id="main">
    <p>张三，Java开发</p>
    <p>李四，大数据工程师</p>
    <p>王五，k8s运维</p>
</div>

<script type="text/javascript">
    var x = document.getElementById("main"); //获取id为main的元素
    var y = x.getElementsByTagName("p"); // 返回的是一个集合，下标获取
    var p = document.createElement("p"); //创建p标签
    var t = document.createTextNode("卿君，渗透测试"); //创建添加的文本
    p.appendChild(t); //向创建的p标签追加文本
    var e = document.getElementById("main"); //获取添加的标签父元素
    e.remove()   //删除id=main标签的所有元素。
</script>

2.查看效果。
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/yi_qingjun/article/details/132606795
今日推荐
Linus “吃狗粮”最积极！
开源日报 | Winamp播放器即将开源；生成式AI之战升级第二轮；Linus“吃狗粮”最积极；AI进入泡沫前期；吴泳铭为阿里云带来了什么？
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
周排行
SVN服务端安装在阿里云
实战 | 相机标定
webpack核心概念
note20——》只要肯低头吃苦，人生就会有救
PAT甲级 1062 Talent and Virtue （25 分）排序
NG Toolset开发笔记--5GNR Resource Grid（26）
如何对待上司
oracle命令
第9章 STL迭代器
logstash使用es映射模板
每日归档
更多
2024-05-20(36)
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022