前言
前几天学习了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》