前端学习之Javascript基础

最新推荐文章于 2024-08-22 14:32:34 发布

水到渠成~

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量232

点赞数

分类专栏：前端文章标签： javascript 前端学习

本文链接：https://blog.csdn.net/weixin_45439432/article/details/128853425

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript的基础知识，包括变量声明、字符串、数组、函数的使用，以及如何通过DOM操作实现页面动态效果，如跑马灯。还展示了如何绑定事件和处理用户输入，强调了JavaScript在网页交互中的作用。

摘要由CSDN通过智能技术生成

前言

前几天学习了css，这次来学习js常用的知识，js是一种编程语言，主要让页面实现动态功能：
结合前几天学习的css来体验一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menus{
            width: 200px;
            border: 1px solid red;
        }
        .menus .header{
            background-color: gold;
            padding: 20px 10px;
        }
    </style>
</head>
<body>
    <div class="menus">
        <div class="header" onclick="myFunc()">大标题</div>
        <div class="item">内容</div>
    </div>

    <script type="text/javascript">
        function myFunc() {
            //alert("你好呀");
            confirm("是否要继续？")
        }
    </script>
</body>
</html>

和浏览器有了互动
在这里插入图片描述

代码位置

JS代码的存在形式：
当前HTML中。

<script type="text/javascript">
 // 编写JavaScript代码
</script>

在其他js文件中，导入使用。

<script src="static/my.js"></script>

一般会放到body的下方
在这里插入图片描述

注释

HTML的注释

<!-- 注释内容 -->

CSS的注释

/* 注释内容 */

JavaScript的注释

// 注释内容
  /* 注释内容 */

变量

在python中的变量：

A=”1”
print(A)

在js中的变量：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        var name = "1";
        
        console.log(name);/*写入到浏览器的控制台*/
    </script>
</body>
</html>

在这里插入图片描述

字符串类型

常用数据类型：
字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、对象(Object)、数组(Array)、函数(Function)
在这里插入图片描述

函数

在python中定义函数

def func():
    函数的内容...
    
func()#执行函数

在js中定义函数

function func(){
    ...
}
    
func()

案例：跑马灯

兔年快乐兔年大吉
所谓跑马灯就是不停的展示这一段文字，来简单实现下：

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

<span id="txt">兔年快乐兔年大吉</span>

<script type="text/javascript">
    function show() {
        // 去HTML中找到某个标签并获取他的内容（DOM）
		//InnerText获取或设置指定元素标记内的文本的值
        var tag = document.getElementById("txt");
        var dataString = tag.innerText;
        // 索引取第一个值dataString[0]
		//substring是从中截取一段字符串，在组成一个新的字符串
		//length是获取长度,substring(1,8)是将第一个拿出来返回剩余7个字符串
        var firstChar = dataString[0];
        var otherString = dataString.substring(1, dataString.length);
		var newText = otherString + firstChar;
        //在HTML标签中更新内容
        tag.innerText = newText;
    }
    // JavaScript中的定时器，如：每3s执行一次show函数。
    setInterval(show, 3000);
</script>
</body>
</html>

在这里插入图片描述

数组

var v1 = [11,22,33,44];
操作：
索引v1[0]
在这里插入图片描述
后面就不截图了
v1.push(“兔年”); // 尾部追加 [11,22,33,44,“兔年”]
v1.unshift(“兔年”); // 头部追加 [“兔年”, 11,22,33,44]
splice() 方法用于添加或删除数组中的元素。
v1.splice(索引位置,删除个数,元素);
v1.splice(1,0,“中国”); // 在1的位置删除0个并插入中国 [11,“中国”,22,33,44]
v1.splice(2,1); // 索引为2的元素删除1次 [11,22,44];
v1.pop() //尾部删除
v1.shift() //头部删除

for循环

语法为：
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
如，for/in - 循环遍历对象的属性：
var v1 = [11,22,33,44];
for(var idx in v1){
// idx=0/1/2/3/
data=v1[idx]
document.write(data+“
”);//
表示换行，文档节点的write()方法用于写入文档内容，可以传多个参数，写入的字符串会按HTML解析。
}
在这里插入图片描述
for循环代码块一定的次数：

var v1 = [11,22,33,44];
for(var i=0; i<v1.length; i++){
}

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="city">
        <!-- <li>北京</li> -->
</ul>
<span id="txt"></span>

<script type="text/javascript">
   var cityList = ["北京","上海","深圳"];
        for(var idx in cityList){
            var text = cityList[idx];
			//createElement() 方法通过指定名称创建一个元素
			// 创建 <li></li>
            var tag = document.createElement("li");
            // 在li标签中写入内容
            tag.innerText = text;
			// 添加到id=city那个标签的里面。DOM
			//getElementById() 方法可返回对拥有指定元素
            var parentTag = document.getElementById("city");
           //appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
			parentTag.appendChild(tag);
   }
</script>
</body>
</html>

运行后，在ul添加了3个li
在这里插入图片描述

绑定事件

定义一个函数，每点击按钮执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<!-- 增加一个按钮，绑定到addCityInfo函数 -->
<input type="button" value="点击添加" onclick="addCityInfo()">
<ul id="city">

</ul>

<script type="text/javascript">
    function addCityInfo() {
        //新建一个li另值为2023
        var newTag = document.createElement("li");
        newTag.innerText = "2023";
		//将newTag的值添加到id为city的元素里
        var parentTag = document.getElementById("city");
        parentTag.appendChild(newTag);
    }

</script>
</body>
</html>

点击3次后追加3个元素
在这里插入图片描述
新建一个输入框，获取输入的字符串，且不能为空，打印出来，同时清空输入框为下次做准备

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入内容" id="txtUser"/>
<input type="button" value="点击添加" onclick="addCityInfo()">
<ul id="city">

</ul>

<script type="text/javascript">
    function addCityInfo() {
        // 1.找到输入标签
        var txtTag = document.getElementById("txtUser");

        // 2.获取input框中用户输入的内容
        var newString = txtTag.value;

        // 判断用户输入是否为空，只有不为空才能继续。
        if (newString.length > 0) {
            // 3.创建标签 <li></li> 中间的文本信息就是用户输入的内容
            var newTag = document.createElement("li");
            newTag.innerText = newString;

            // 4.标签添加到ul中
            var parentTag = document.getElementById("city");
            parentTag.appendChild(newTag);

            // 3.将input框内容清空
            txtTag.value = "";
        }else{
            alert("输入不能为空");
        }

    }

</script>
</body>
</html>

在这里插入图片描述

后记

js还有很多需要学的东西，这只是入门，但是我不是前端开发，我可以看懂or修改就OK，在后续的开发中会引用三方框架，如使用jQuery、 vue、react来实现功能。下一篇《前端学习之使用jQuery》

水到渠成~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端学习之Javascript基础

前几天学习了css，这次来学习js常用的知识，js是一种编程语言，主要让页面实现动态功能：结合前几天学习的css来体验一下：和浏览器有了互动JS代码的存在形式：当前HTML中。在其他js文件中，导入使用。一般会放到body的下方HTML的注释CSS的注释JavaScript的注释变量在python中的变量：在js中的变量：常用数据类型：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、对象(Object)、数组(Array)、函数(Fun
复制链接

扫一扫