JavaScipt基础入门

有梦想的小晨

已于 2024-07-09 13:51:00 修改

阅读量509

点赞数 19

文章标签： python django

于 2024-07-09 13:46:29 首次发布

本文链接：https://blog.csdn.net/HISAY_ONE/article/details/140037227

版权

1.前端JavaScript

·JavaScript是一门编程语言。浏览器就是javascript语言的解释器。

·DOM和BOM：相当于编程语言内置的模块。

·jQuery:相当于编程语言的第三方模块。

初识JS：

<!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>

    

    <!--js代码块-->
    <script type="text/javascript">
        function myFunc()
        {
            confirm("是否要继续？")
        }

    </script>


</body>
</html>

前端三大组件：

1.HTML：裸体。

2.CSS：穿上好看的衣服。

3.JavaScipt:让人动态起来。

1.1 代码位置

由于HTML代码也是从上到下进行解析的，如果js中有耗时操作，那么会导致页面的数据一直看不到，直到js的耗时动作结束。

若是选择通过引入js文件的方式去编写js程序，则是在static中-->创建一个JavaScript文件(my.is)-->然后通过<script src="static/my.js"></script>来进行外部js文件的引用。

1.2 注释

（1）HTML注释（HTML程序中除了style代码块、script代码块之外的都遵循HTML注释）

<!--注释内容-->

（2）CSS的注释（style代码块）

/*注释内容*/

（3）JavaScript（script代码块）

// 注释内容

/*注释内容*/

1.3 变量

<!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>

1.4 字符串类型

//声明
var name = "高清";
var name = String("高清");

//常见功能
var name = "中国香港";

var v1 = name.length;
var v2 = name[0];                //取"中"。也可以通过name.charAt(3)
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(){
                    //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中的定时器，如：每1s执行一次show函数。
            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,"中国");     //在第一个字符后面插入"中国"

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
}

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="city">
        <!--<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.appendfChild(tag);
        }

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

1.6 对象（字典）

info = {
    "name":"高清",
    "age":18
}

info = {
    name:"高清",
    age:18
}

info.age
info.name = "小晨"

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>
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="body">
        </tbody>
    </table>
<script type="text/javascript">
    var info = {id: 1, name:"小晨",age:19};

    var tr = document.createElement("tr"):
    for(var key in info){
        var text = info[key];
        var td = docunment.createElement('td');
        td.innerText = text;
        tr.appendChild(td);
    }
    var bodyTag = docunment.getELementById("body");
    bodyTag.appendChild(tr);

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

1.7 条件语句

if(条件){

}else{

}

if (1==1){

}else{

}

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

}else if(条件){

}else{

}

1.8 函数

function func(){

········
}

func()

2. DOM

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

//根据ID获取标签
var bodyTag = document.getElementById("xx");

//获取标签中的文本
tag.innerText

//创建标签中的文本
tag.innerText = "哈哈哈哈哈";

// 创建标签 <div>哈哈哈哈哈<div>
var tag = document.creatElement("div");

// 标签写内容
tag.innerText = "哈哈哈哈哈";

    <ul id="city">
        <li>北京</li>
    </ul>

    <script type="text/javascript">
        //发送网络请求
        var tag = document.getElementByTd("city");

            //创建 <li></li>
            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="text" placeholder="请输入内容" id="txtUser" />
    <input type="button" value="点击继续" onclick="addCityinfo()">
    <ul id="city">

    </ul>

    <script type="text/javascript">
        function addCityInfo()
        {
            // 1.找到输入标签
            var newTag = 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 parenTag = document.getElementById("city");
                parentTag.appendChild(newTag);

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

        }

    </script>

</body>
</html>

注意：DOM中还有很多操作。

DOM可以实现很多功能，但是比较繁琐。
页面上的效果：jQuery来实现/ vue.js / react.js

知识点回顾：

·常见的数据类型：int, bool, str, list, tuple, dict, set, float,None。

1.哪些能转化成布尔值为False: 空，None，0。

2.可变和不可变的划分，可变的有哪些：list，set，dict。

3.可哈希和不可哈希，不可哈希的有哪些：list，set，dict。

4.字典的键/集合的元素，必须是可哈希的类型（list，set，dict不能做字典的键和集合元素）。

·主要数据类型：

1.str（字符串）

（1）独有功能：upper/lower/startswith/split/strip/join...。

注意：str不可变，不会对原字符串进行修改，新的内容。

（2）公共功能：len/索引/切片/for循环/判断是否包含。

2.list（列表）

（1）独有功能：append，insert，remove，pop...。

注意：list可变，功能很多都是对原数据操作。

（2）公共功能：len/索引/切片/for循环/判断是否包含。

3.dict（字典）

（1）独有功能：get/keys/items/values。

（2）公共功能：len/索引/for循环/判断是否包含（判断键效率很高）。

3.运算符

特殊的逻辑运算
 v1 = 99 and 88  # V1 = 88。对于and来讲，前面的若是为真（99为真），则其完全只取决于后面的那个值。
 
 v2 = 5 or 10    # v2 = 5。对于or来讲，前面若是为真（5为真） ，则后面的值没有作用。

 v2 = [] or 10   #v2 = 10。

·推导式（简化生成数据）

data = []
for i in range(10):
    data.append(i);


data_1 = [i for i in range(10)]

data_2 = [i for i in range(10) if i<5]            #[0,1,2,3,4]

·函数编程

1.函数的基础知识:

（1）定义

（2）参数。概念：位置传参/关键字传参/参数默认值/动态参数*args, **kwargs。

（3）返回值。<1>.函数中一旦遇到return就立即返回，后续代码不再执行。

<2>.函数没有返回值默认返回None。

2.函数的进阶知识：

（1）python中是以函数为作用域。

（2）全局变量和局部变量。规范：全局变量（大写），局部变量（小写）。

（3）在局部变量中可以使用global关键字，global的作用：这个变量不是局部新建的，而是引用全局的。

内置函数（python内部提供的函数）：

- bin/hex/odc/max/min/divmod/sorted/open文件操作。

文件操作：

---基本操作：打开，操作，关闭，为了防止忘记关闭文件，我们用with。

---打开文件时有模式：

- r/rb,读 [若文件不存在，则会报错] [若文件夹不存在，则会报错]

- w/wb，写（清空） [若文件不存在，则会自动新建] [若文件夹不存在，则会报错]

- a/ab，追加 [若文件不存在，则会自动新建] [若文件夹不存在，则会报错]

注意：os.makedirs/os.path.exsits, 判断是否存在，不存在则会新建。

·模块

3.模块的分类：

（1）自定义模块：

<1> os.path: 导入模块时python内部都会回去那个目录中找。

<2> 自己写py文件时，不要与python内置模块同名。

<3> import/from xx import xx。

（2）内置模块：time/datetime/json/re/random/os....。

（3）第三方模块：requests, openpyxl, python-docx, flask，bs4。

——内置模块详细说明：

（1）关于os模块：查看当前目录下所有的文件：os.listdir / os.walk。

（2）关于时间模块：时间戳 / datetime 格式 / 字符串，三种时间格式可以互相转化。

（3）关于JSON模块：（1）JSON本质上是字符串，只不过他会有一些他自己的格式的要求，例如：无元组 / 无单引号。（2）json.dumps序列化时，只能序列化python常用的数据类型。

（4）关于re正则模块：

（1）正则：\d \w。贪婪匹配和非贪婪匹配（默认），想让他不贪婪则在他的个数后面 + "?"。

（2）正则：re.search/re.match/re.findall。

4.面向对象

目标：不是为了用面向对象编程（推荐使用函数编程，但面向对象要看的懂）。

面向对象三大特性：封装，继承，多态。

5.前端开发

--前端知识点分为三部分：

（1）HTML：标签具有模式特点。

（2）CSS，修改标签的特点。

（3）JavaScript, 动态。

<1>HTML标签

-- div/span/a/img/input/form/table/ul.......

-- 块级和行内标签：div：块级标签；span：行内标签。

注意:CSS样式，发现行内标签设置高度，宽度，内边距，外边距都是无效的。

-- form表单 + input/select/textarea 数据框。

- action，提交地址。

- method，提交方式。

- form标签中有一个submit。

-内部标签都需要设置name属性。

<2>CSS样式

- 布局一定会用到的样式：div + float(脱离文档流，clear:both;clearfix)。

- 高度和宽度

- 边距

- 内边距：padding。

- 外边距：margin。

- 字体大小/颜色

- 边框

- 背景颜色

- hover：鼠标放上去就会触发的CSS样式。

有梦想的小晨

关注

19
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScipt基础入门

JavaScript是一门编程语言。浏览器就是javascript语言的解释器。·DOM和BOM：相当于编程语言内置的模块。·jQuery:相当于编程语言的第三方模块。前端三大组件：1.HTML：裸体。2.CSS：穿上好看的衣服。3.JavaScipt:让人动态起来。1.1 代码位置由于HTML代码也是从上到下进行解析的，如果js中有耗时操作，那么会导致页面的数据一直看不到，直到js的耗时动作结束。
复制链接

扫一扫