目录
一、初识JavaScript
二、JavaScript的基础
1、初步了解
2、代码位置
3、注释
4、变量
①字符串
②数组
③对象
④条件语句
⑤函数
三、DOM模块
一、初识JavaScript
- JavaScript，是一门编程语言。浏览器就是JavaScript语言的解释器。
- DOM和BOM 相当于编程语言内置的模块。
- JQuery 相当于是编程语言的第三方模块。
- JavaScript让程序实现一些动态效果。
二、JavaScript的基础
1、初步了解
<!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>
<script type="text/javascript">
function myFunc(){
alert("你好呀")
confirm("是否要继续？")
}
</script>
</div>
</body>
</html>
前端三大组件：
- HTML，裸体
- CSS，好看的衣服
- JavaScript，动态
2、代码位置
js代码的存在形式：
- 当前的HTML文件中
head中：CSS代码的下面
body中：（推荐）
注意: 如果写在了
head中,body的html代码不会执行,会先执行head中的javascript之后,才会显示html代码
- 在其他js文件中，导入使用
<body>
<script src="static/js/my.js"></script>
</body>3、注释
- HTML的注释
<!-- 注释内容 -->
- CSS的注释，style代码块
/* 注释内容 */
- JavaScript的注释，script代码块
// 注释内容
/* 注释内容 */
4、变量
python，编程语言
name = "派大星"
print(name)JavaScript，编程语言
定义变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var name = "派大星";
console.log(name);
</script>
</body>
</html>①字符串
//声明
var name = "派大星";
var name = String("派大星");
常见功能
var name = "中国联通"
var v1 = name.length; //获取字符长度
var v2 = name[0]; //获取数据
var v3 = name.trim(); //去除空白
var v4 = name.substring(0,2) //切片, 前取后不取
案例：跑马灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="txt">欢迎中国联通领导莅临指导</div>
<script type="text/javascript">
function show() {
//1.去HTML中找到某个标签并获取他的内容 (DOM)
var tag = document.getElementById("txt");
var dataString = tag.innerText;
//2.动态起来,把文本中的第一个字符放在字符串的最后面
var firstChar = dataString[0];
var otherString = dataString.substring(1, dataString.length);
var newText = otherString + firstChar;
//3.在HTML标签中更新内容
tag.innerText = newText;
}
//Javascript中的定时器
//每秒钟执行这个show函数
setInterval(show, 1000); //毫秒
</script>
</body>
</html>
②数组
//定义
var v1 = [11,22,33,44];
var v2 = Array([11,22,33,44]);
//操作
var v1 = [11,22,33,44];
v1[1]
v1[0] = "派大星"
//追加
v1.push("联通"); //尾部追加 [11,22,33,44,"联通"]
v1.unshift("联通"); //头部追加 ["联通",11,22,33,44]
v1.splice(索引,0,元素);
v1.splice(1,0,"中国"); //指定位置追加 [11,"中国",22,33,44]
//删除
v1.pop(); //尾部删除
v1.shift(); //头部删除
v1.splice(索引位置,1);
v1.splice(2,1); //索引为 2 的元素删除 [11,22,44]
//循环
var v1 = [11,22,33,44];
//循环的是索引
for(var index in v1){
//data=v1[index]
...
}
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>
<li>天津</li>
<li>西安</li> -->
</ul>
<script type="text/javascript">
var cityList = ["北京","上海","深圳"];
for(var idx in cityList) {
var text = cityList[idx];
//创建 <li></li> 标签
var tag = document.createElement("li");
//在 li 标签中写入内容
tag.innerText = text;
//添加到 id=city 那个标签的里面 DOM
var parentTag = document.getElementById("city");
parentTag.appendChild(tag);
}
</script>
</body>
</html>③对象
info = {
"name":"派大星",
"age":18,
}
info = {
name:"派大星",
age:18
}
info.age;
info.name = "海绵宝宝"
info["age"]
info["name"] = "海绵宝宝";
delete info["age"]
//循环
for(var key in info){
//key值 data=info[key]
...
}
案例：动态表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="body">
<tr>
<!-- <td>1</td>
<td>poker</td>
<td>25</td> -->
</tr>
</tbody>
</table>
<script type="text/javascript">
var dataList = [
{ id: 1, name: "派大星", age: 23 },
{ id: 1, name: "派大星", age: 23 },
{ id: 1, name: "派大星", age: 23 },
{ id: 1, name: "派大星", age: 23 },
{ id: 1, name: "派大星", age: 23 },
{ id: 1, name: "派大星", age: 23 },
];
for (var idx in dataList) {
var info = dataList[idx]
//1.创建 tr 标签
var tr = document.createElement("tr")
for (var key in info) {
var text = info[key];
//2.创建 td 标签
var td = document.createElement("td");
td.innerText = text;
tr.appendChild(td);
}
//3. 追加数据
var bodyTag = document.getElementById("body");
bodyTag.appendChild(tr);
}
</script>
</body>
</html>
④条件语句
if (条件) {
...
}else{
...
}
if (条件) {
...
else if (条件){
...
}else{
...
}
⑤函数
function func(){
...
}
//执行
func()
三、DOM模块
DOM 是一个模块,模块可以对HTML页面中的标签进行操作
//根据 ID 获取标签
var tag = doucment.getElementById("xx");
//获取标签中的文本
tag.innerText
//修改标签中的文本
tag.innerText = "111111fff";
案例：
<body>
<ul id="city">
<!-- <li>北京</li>
<li>天津</li>
<li>上海</li> -->
</ul>
<script type="text/javascript">
var cityList = ["北京","天津","上海"];
for(var idx in cityList) {
var text = cityList[idx];
//创建 <li></li> 标签
var tag = document.createElement("li");
//在 li 标签中写入内容
tag.innerText = text;
//添加到 id=city 那个标签的里面 DOM
var parentTag = document.getElementById("city");
parentTag.appendChild(tag);
}
</script>
</body>
事件的绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="请输入内容" id="content">
<input type="button" value="点击添加" onclick="addCityInfo()">
<ul id="city">
</ul>
<script type="text/javascript">
function addCityInfo() {
//1.找到标签
var userContent = document.getElementById("content");
//2.获取input中用户输入的内容
var newString = userContent.value;
//判断用户输入是否为空
if (newString.length > 0) {
//3.创建 li 标签,传入用户输入的内容
var newTag = document.createElement("li");
newTag.innerText = newString;
//4.标签添加到 ul 中
var parentTag = document.getElementById("city");
parentTag.appendChild(newTag);
//5.将 input text 内容清空
userContent.value = "";
}else{
alert("输入不能为空!")
}
}
</script>
</body>
</html>
