JavaScript笔记+案例(上)

简介: JavaScript笔记+案例

前端开发 第四节JavaScript


JavaScript:概要


概要:


  • JavaScript,是一门编程语言。浏览器就是JavaScript语言的解释器
  • DOM和BOM
相当于编程语言内置的模块。
例如:Python中的re、random、time、json模块等。


  • jQuery
相当于是编程语言的第三方模块
例如:requests、openpyxl


1. JavaScript


1.1 代码位置


1.写在head标签内部

2.写在body结尾的内部


推荐写在body结尾的内部


原因:


1.HTML是从上往下执行,如出现输出语句,则先输出再显示页面内容

2.如JavaScript内容过多,则影响页面显示速度,影响用户体验


JS代码存在形式


  • 存在HTML文件中
  • 存放在JS文件中,再引入HTML


1.2 注释


  • HTML的注释
<!-- 注释内容 -->


  • CSS的注释
/* 注释内容 */


  • JavaScript的注释
// 注释内容
/* 注释内容 */


1.3 变量


  • Python,编程语言。
name = "刘备"
print(name)


  • JavaScript,编程语言。
<script type="text/javascript">
    var name = "刘备";
    console.log(name);  // 输出
</script>


1.4 字符串类型

// 声明
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>Title</title>
</head>
<body>
<span id="txt">中国联通</span>
<script type="text/javascript">
    function show(){
        // 在HTML中找到id为txt的标签并获取他的内容
        var tag = document.getElementById("txt");
        var dataString = tag.innerText;
        // 动态起来,把文本中的第一个字符放在字符串的最后面
        var firstChar = dataString[0];
        var otherString = dataString.substring(1, dataString.length);
        var newText = otherString + firstChar;
        // 在HTML标签中更新内容
        tag.innerText = newText;
        console.log(dataString);
    }
    setInterval(show, 1000)
</script>
</body>
</html>


1.5 数组

// 定义
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,"中国",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 idx in v1){
    // idx=0/1/2/3/   data=v1[idx]  
}
var v1 = [11,22,33,44]; 
for(var i=0; i<v1.length; i++){
    // i=0/1/2/3  data=v1[idx]
}


案例:动态数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="city">
    </ul>
<script>
    var cityList = ["北京","上海","深圳"];
    for (var idx in cityList){
        var text = cityList[idx];
        // 创建li标签
        var tag = document.createElement("li")
        // 在li标签中写入内容
        tag.innerText = text;
        // 添加到id=city标签里面
        var parentTag =  document.getElementById("city");
        parentTag.appendChild(tag)
    }
</script>
</body>
</html>


1.6 对象(字典)

info = {
  "name":"刘备"
    "age":50
}
info = {
  name:"刘备"
    age:50
}
info.age
info.name = "关羽"
delete info["age"]
info = {
    name:"刘备",
    age:18
}
for(var key in info){
    // key=name/age   data=info[key]
}


案例:动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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>刘备</td>-->
<!--                <td>50</td>-->
<!--            </tr>-->
        </tbody>
    </table>
<script type="text/javascript">
    var info = {id:1, name:"刘备", age:50};
    var tr = document.createElement("tr");
    for (var key in info){
        var text = info[key];
        var td = document.createElement('td');
        td.innerText = text;
        tr.appendChild(td);
    }
    var bodyTag = document.getElementById("body");
    bodyTag.appendChild(tr);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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>刘备</td>-->
<!--                <td>50</td>-->
<!--            </tr>-->
        </tbody>
    </table>
<script type="text/javascript">
    var dataList = [
        {id:1, name:"刘备", age:50},
        {id:2, name:"刘备", age:50},
        {id:3, name:"刘备", age:50},
        {id:4, name:"刘备", age:50},
        {id:5, name:"刘备", age:50},
    ];
    for (var idx in dataList){
        var info = dataList[idx]
        var tr = document.createElement("tr");
        for (var key in info){
            var text = info[key];
            var td = document.createElement('td');
            td.innerText = text;
            tr.appendChild(td);
        }
        var bodyTag = document.getElementById("body");
        bodyTag.appendChild(tr);
    }
</script>
</body>
</html>


1.7 条件语句

if(条件){
}else{
}
if(1==1){
}else{
}
if(条件){
}else if(条件){
}else if(条件){
}else{
}


1.8 函数

# python定义函数
def func():
    函数内容...
# python执行函数
func()
// javascript定义函数
function func(){
  函数内容...
}
// javascript执行函数
func()


2.DOM


DOM是一个模块,模块可以对HTML页面中的标签进行操作。

// 根据ID获取标签
var bodyTag = document.getElementById("body");
// 获取标签中的文本
tag.innerText
// 修改标签中的文本
tag.innerText = "刘备";
// 创建标签 <div></div>
var tag = document.createElement("div");
// 标签写内容  <div>刘备</div>
tag.innerText = "刘备";


例如:

<ul id="city">
</ul>
<script type="text/javascript">
    // 找到标签
  var tag = document.getElementById("city");  
    // 生成标签和内容
    var newTag = document.createElement("li");
    newTag.innerText = "北京";
    // 加入标签和内容
    tag.appendChild(newTag);
</script>


2.1 事件的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="点击添加" onclick="addCityInfo()">
    <ul id="city">
    </ul>
<script type="text/javascript">
    function addCityInfo(){
        var newTag = document.createElement("li");
        newTag.innerText = "联通";
        var parentTag = document.getElementById("city");
        parentTag.appendChild(newTag);
    }
</script>
</body>
</html>
<!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(){
        // 找到输入标签
        var txtTag = document.getElementById("txtUser");
        // 获取input框中用户输入的内容
        var newString = txtTag.value;
        // 判断用户输入是否为空,只有不为空才能继续。
        if (newString.length > 0){
            // 创建标签 <li></li>
            var newTag = document.createElement("li");
            newTag.innerText = newString;
            // 标签添加到ul中
            var parentTag = document.getElementById("city");
            parentTag.appendChild(newTag);
            // 将input框内容清空
            txtTag.value = "";
        }else{
            alert("输入不能为空");
        }
    }
</script>
</body>
</html>


3. jQuery


jQuery是一个JavaScript第三方模块(第三方类库)。


  • 基于jQuery,自己开发一个功能。
  • 现成的工具 依赖jQuery,例如:BootScript动态效果。


3.1 快速上手


  • 下载jQuery
https://jquery.com/


  • 应用jQuery
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 id="txt">中国联通</h1>
<script src="static/js/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
    // 利用jQuery中的功能实现某些效果
    // 1.找到id=txt的标签; 2.内容修改
    $("#txt").text("广西移动");
</script>
</body>
</html>


JavaScript笔记+案例(下):https://developer.aliyun.com/article/1427908

目录
相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
46 0
|
4月前
|
数据采集 Web App开发 JavaScript
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
|
1月前
|
自然语言处理 JavaScript 前端开发
[JS]同事看了我做的this笔记,直摇头,坦言:我还是参考启发博文吧
本文介绍了JavaScript中`this`关键字的重要性和使用规则。作者回顾了早期笔记,总结了`this`指向的各种情况,并分享了最新的理解。文章强调了`this`在不同上下文中的指向,包括对象方法、全局函数、箭头函数等,并提供了改变`this`指向的方法。适合JavaScript开发者参考。
48 2
|
3月前
|
JavaScript 前端开发 Java
JavaScript笔记(回顾一,基础知识篇)
JavaScript基础知识点回顾,包括语言定义、ECMAScript规范、字面量、变量声明、操作符、关键字、注释、流程控制语句、数据类型、类型转换和引用数据类型等。
JavaScript笔记(回顾一,基础知识篇)
|
2月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
36 0
|
4月前
|
JavaScript 前端开发 UED
Javaweb之javascript的小案例的详细解析
通过上述步骤,我们得到了一个动态更新的实时时钟,这个简单的JavaScript案例展示了定时器的使用方法,并讲解了如何处理日期和时间。这个案例说明了JavaScript在网页中添加动态内容与交互的能力。对于涉足JavaWeb开发的学习者来说,理解和运用这些基础知识非常重要。
42 11
|
4月前
|
JavaScript API 图形学
一个案例带你从零入门Three.js,深度好文!
【8月更文挑战第1天】本教程无需任何Threejs知识!本教程以入门为主,带你快速了解Three.js开发
93 2
一个案例带你从零入门Three.js,深度好文!
|
4月前
|
前端开发 JavaScript 开发者
fuse.js前端搜索简单使用的三个案例
通过这三个例子可以看出,Fuse.js 是一个功能丰富、易于实现的前端搜索库。它使开发者能够便捷地实现从基础到高级的搜索功能,无论是简单的列表搜索还是实时的搜索建议,都能够高效、精确地提供给用户所需的信息。
225 0
|
4月前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(四):成绩案例
Vue.js 2 项目实战(四):成绩案例
|
4月前
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(三):综合案例-小黑记事本
Vue.js 2 项目实战(三):综合案例-小黑记事本