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

已于 2023-09-01 17:12:53 修改
阅读量388 收藏
点赞数
分类专栏： python开发 文章标签： 前端 javascript 开发语言 运维开发
于 2023-09-01 17:04:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yi_qingjun/article/details/132606795
版权

文章目录

一、基本使用

  • 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.查看效果。
在这里插入图片描述

百慕卿君
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Web 前端开发技术 —— JavaScript
敲代码的小李同学的博客
02-02 441
总结 JavaScript 内容。
前端基础——DOM
yinyinlee07的博客
02-05 1789
前端基础学习第六天
Web前端开发——JavaScript的基础使用
快乐学习，daydayup!
04-08 884
Web前端开发——JavaScript的基础使用
Web前端基础——Javascript(JS)
weixin_40013461的博客
09-06 1400
针对JavaScript简单做了解，熟悉基础使用方式。
Web前端——JavaScript基础
硝酸童不酸的博客
10-24 950
简要介绍了 JavaScript 的基本语法、BOM 对象及简单的 DOM 操作
前端开发——Javascript知识（介绍）
qq_64552181的博客
03-29 1446
JavaScript的基础知识、直接写在html或者写在js文件中、注释、直接量
前端基础——javaScript（一）
qq_38415745的博客
04-22 159
前端基础——JavaScript（一）JavaScript基础（一）JavaScript用法JavaScript输出语句JavaScript命名规则JavaScript数据类型 JavaScript基础（一） JavaScript是当今互联网上最流行的脚本语言，可用于服务器、pc、笔记本电脑、移动设备。 JavaScript是一种轻量级编程语言。 JavaScript可以插入到HTML页面的编程代...
前端必备技能——TypeScript与JavaScript区别
weixin_42397937的博客
04-06 1298
TypeScript逐渐成为前端工程师必备的技能之一，本文将指导你了解并认识TypeScript，然后知道它与JavaScript的区别。特点如下所示javascript是一种动态类型语言，这类语言不会给变量指定类型，而是在赋值时得到数据类型。JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都可以使用 JavaScript。案例一： JavaScript会在变量赋值时得到数据类型var a=123;a='abc;a=true;
前端学习——JavaScript基础（二）
qq_41679358的博客
07-09 291
JavaScript 变量生命周期 JavaScript 变量生命周期在它声明时初始化。 局部变量在函数执行完毕后销毁。 全局变量在页面关闭后销毁。 JavaScript 字符串 添加转义字符（如\）来使用多对引号 使用内置属性 length 来计算字符串的长度 JavaScript 类型转换 Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值。 JavaScript String 对象 string对象方法 常见的HTML事件 菜鸟教程 ...
黑马程序员——JavaScript基础1（初识 JavaScript）
m0_48964052的博客
07-23 820
JavaScript、JS基础、ECMAScript、Web前端入门、Web前端基础、黑马程序员、pink老师
前端HTML5 css基础
03-09
前端HTML5基础知识点 HTML5骨架 ---------------- * `<!DOCTYPE html>`：声明文档类型，指定当前页面使用 HTML5 版本显示网页。 * `<html lang="en">`：定义文档语言，例如英语（en）或中文（zh-ZN）。 * `...
javascript基础教程
07-06
学习JavaScript，需要理解这些基础知识，并通过实践来提升编程技巧，如编写网页交互功能、动态效果、前端框架应用等。随着Node.js的流行，JavaScript还被用于服务器端开发，进一步扩大了其应用范围。
JavaScript基础教程 精简版
08-01
本文档是JavaScript基础教程的精简版，旨在以简洁的形式介绍JavaScript的基本概念和技术。 首先，我们从简介开始。JavaScript由网景公司的Brendan Eich在1995年发明，起初被命名为Mocha，后来改为LiveScript，最终...
javascript特效实现——当前时间和倒计时效果的简单实例
10-21
在JavaScript中，实现当前时间和倒计时效果主要依赖于`Date`对象和...在实际开发中，这些基础的JavaScript知识可以应用于各种网页动态效果，提升用户体验。理解并掌握这些基本概念和方法，对于前端开发者来说至关重要。
javascript代码-使用代码解决Jquery给easyui的表单元素赋值，获取值总结的源代码
05-02
——学习参考资料：仅用于个人学习使用！ javascript代码-使用代码解决Jquery给easyui的表单元素赋值，获取值总结的源代码
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 460
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1454
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 567
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
快速压缩前端项目
最新发布
lyd的博客
06-15 414
作为前端开发工程师难免会遇到需要把项目压缩成压缩文件来传送的情况，这时候需要压缩软件进行压缩文件处理
Web前端 页面功能——点击按钮返回顶部的实现方法
06-11
1. 使用 JavaScript 实现 在 HTML 中添加一个“返回顶部”按钮，并在 JavaScript 中绑定该按钮的点击事件，使其在点击时返回页面顶部。 HTML 代码： ```html 返回顶部 ``` JavaScript 代码： ```javascript // ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

百慕卿君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值