Python（三十八）JavaScript基础

作者: Lonelyroots | 来源:发表于2021-12-26 22:02 被阅读0次

Python（三十八）JavaScript基础
这段时间开始记录Python Web的学习历程。
你要用的各种前端网站
基础编程教程推荐
第14天，JavaScript
Python 和 JavaScript
JS-Basic
JavaScript-01
Js全局变量和局部变量
JavaScript学习指南

Python连载已经创建，有喜欢Python的朋友，可以拨冗阅读一下，每期内容都会随着简信的内容更新，今天都会比昨天亮眼，望君不解就问，互相探讨，一起提高。

JavaScript可以说是前端三巨头中我觉得最有意思的一个，如果把HTML比做一个人，那么CSS就是衣物装饰，而JS就是人的动作和行为，听我这样一讲，你觉得哪个更有趣？

1. JavaScript介绍

1.1. JS书写

JS代码可以通过第一种方式直接写在script标签里面，或者照着第三种方式写在其它的.js后缀文件中，并通过script标签引入。注意：在引入js文件的script标签里面，一定不能写任何的js代码。当然也可以在标签内写js代码，但是这种方式我不推荐，也就是下方代码所讲的第二种。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS writing</title>
    <!--JS书写方式二：在head里书写-->
    <script>
        // 加载完界面所有的代码后，才可以运行这里面的代码
        window.onload=function (){
            alert("123")
        }
    </script>

<!--    JS书写方式三：在JS文件里书写，然后导入-->
    <script src="JS%20get%20element.js"></script>
</head>
<body>

<!--JS书写方式一：在body里书写-->
<script type="text/javascript">
    <!--弹出框-->
    alert('123')
</script>

</body>
</html>

1.2. JS要求

1.一般把script标签写在head或者body里；
2．要注意的是是否需要加上window.onload；
3．如果没有特殊要求，一般script标签放在body结束之前。

2. JS获取元素

为什么要学习获取元素：在js中想要操作元素，或者说执行一些行为，首先需要获取到对应的元素。才能进行下一步的操作，所以需要先学会如何获取元素。

2.1. JavaScript获取独有标签

console.log(document.title);：获取标题信息
console.log(document.head);：获取head信息
console.log(document.body);：获取body信息

2.2. JavaScript获取其它标签

console.log(document.getElementById('p1'));：通过id获取数据；
console.log(document.getElementsByClassName('p2')[0]);：通过class获取数据，返回的是数组，能得到数据，但是需要加索引才可以单独打印数据；
console.log(document.getElementsByTagName('span')[0]);：通过标签名获取数据，返回的是数组，能得到数据，但是需要加索引才可以单独打印数据；
console.log(document.getElementsByName('sex')[0]);：通过name获取数据，返回的是数组，能得到数据，但是需要加索引才可以单独打印数据；
console.log(document.querySelector('.p2'));：通过CSS选择器获取一个数据，单独打印；
console.log(document.querySelectorAll('.p2')[0]);：通过CSS选择器获取所有数据，返回的是数组，能得到数据，但是需要加索引才可以单独打印数据。
【注】id前面必须是document，其它的前面可以是某个元素（id,document），但不能是集合。

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

<p id="p1">这是一个段落</p>
<p class="p2">床前明月光</p>
<span class="p2">疑是地上霜</span>
<span class="p3">我是个小标签</span>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<input type="radio" name="sex" value="-1">保密
<script type="text/javascript">
    // console.log(document.title);    //获取标题信息
    // console.log(document.head);     //获取head信息
    // console.log(document.body);     //获取body信息
    // document.title='这是我们js的第一节课'    //直接改网页标题
    // document.body.innerText='<p>陈宏是个好学生</p>'    //不会解析HTML标签
    // document.body.innerHTML='<h1>床前明月光</h1>'    //会解析HTML标签

    // console.log(document.getElementById('p1'));
    // console.log(document.getElementsByClassName('p2')[0]);     //返回的是数组，能得到数据，但是需要加索引才可以单独打印数据
    // console.log(document.getElementsByTagName('span')[0]);      //返回的是数组，能得到数据，但是需要加索引才可以单独打印数据
    // console.log(document.getElementsByName('sex')[0]);          //返回的是数组，能得到数据，但是需要加索引才可以单独打印数据

    // console.log(document.querySelector('.p2'));     //单独打印
    // console.log(document.querySelectorAll('.p2'));      //返回的是数组，能得到数据，但是需要加索引才可以单独打印数据

    var p_1 = document.querySelectorAll('.p2')[0];
    p_1.innerHTML = '春眠不觉晓'

</script>

</body>
</html>

运行结果：

3. JS简单事件

事件，简单来说就是指JavaScript捕获到用户的操作，进而做出正确的响应。onclick：左键单击；ondbclick：左键双击；onmouseover/onmouseenter：鼠标移入；onmouseout/onmouseleave：鼠标移出。

事件是通过函数完成，可以在函数内部书写自己想要实现的效果。

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


    <p id="p1">这是一个段落</p>
    <p class="p2">床前明月光</p>
    <span class="p2">疑是地上霜</span>
    <span class="p3">我是个小标签</span>
    <script>
        p_1=document.getElementById('p1')
        // 鼠标单击事件
        p_1.onclick=function (){
            p_1.innerText='举头望明月'
            p_1.style.color='red'
        }

        p_2=document.getElementsByClassName('p2')[0]
        // 鼠标双击事件
        p_2.ondblclick=function (){
            // 一次改变单个，且使用驼峰命名法
            p_2.style.backgroundColor='blue'
            // // 也可以不使用驼峰命名法
            // p_2.style['background-color']='blue'
            // 一次修改多个属性
            p_2.style.cssText='color:yellow; font-size:25px'
        }

        p_3=document.getElementsByClassName('p2')[1]
        // 鼠标移入事件
        p_3.onmouseenter=function (){
            p_3.style.backgroundColor='blue'
        }
        // 鼠标移出事件
        p_3.onmouseout=function (){
            p_3.style.backgroundColor='white'
        }
    </script>

</body>
</html>

运行结果：

4. JS修改样式

JS可以修改不规范（自定义）和规范的标签样式，还可以配合点击事件一起使用。
*规范的标签属性：.符号直接操作（可读可写）
*不规范（自定义）的标签属性：①获取：.getAttribute()；②设置：.setAttribute()；③移除：.removeAttribute()

【注】修改样式注意事项：

所有的路径、颜色获取的结果不一定是你写的内容；

通过id获取的元素赋值给变量后，假设修改了id，这个变量还是表示这个元素；

自定义标签属性的操作方式，同意可以操作符合规范的标签属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS modify style and data type</title>
</head>
<body>

    <p id="p1">这是一个段落</p>
    <p class="p2">床前明月光</p>
    <span class="p2">疑是地上霜</span>
    <span class="p3">我是个小标签</span>
    <script>
        p_2=document.getElementsByClassName('p2')[0]
        p_2.ondblclick=function (){
            // 设置属性，有则改，无则增
            p_2.setAttribute('id','p2')
            p_2.setAttribute('class','p3')
            // 获取属性
            console.log(p_2.getAttribute('id'));
            // 移除属性
            p_2.removeAttribute('class')
        }
        console.log(typeof(1.2))
        console.log(typeof(12))
        console.log(typeof('123'))
    </script>

</body>
</html>

运行结果：

5. JS数据类型

number：数字，在JS里面的小数和整数都是数字，在-2^53~253超出范围之后，精度就会变得不准确；
boolean：布尔值（True、False）；
undefind：未定义，一个变量声明之后，如果没有赋值就是undefind；
string：字符串；
null：空值，在JS里面null属于对象类型，但它不具有对象的特征，所以将它单独列为一种数据类型；
object：对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS modify style and data type</title>
</head>
<body>

    <script>
       console.log(typeof(1.2))
        console.log(typeof(12))
        console.log(typeof('123'))
    </script>

</body>
</html>

文章到这里就结束了！希望大家能多多支持Python（系列）！六个月带大家学会Python，私聊我，可以问关于本文章的问题！以后每天都会发布新的文章，喜欢的点点关注！一个陪伴你学习Python的新青年！不管多忙都会更新下去，一起加油！

Editor：Lonelyroots

Python（三十八）JavaScript基础
Python连载已经创建，有喜欢Python的朋友，可以拨冗阅读一下，每期内容都会随着简信的内容更新，今天都会比昨...
这段时间开始记录Python Web的学习历程。
1.Python入门基础 2.Python高级编程 3.HTML5+CSS3 4.JavaScript 5.Rea...
你要用的各种前端网站
菜鸟教程：菜鸟教程提供了包括HTML、CSS、Javascript、PHP、C、Python等各种基础编程教程。同...
基础编程教程推荐
推荐一下廖雪峰老师的几门基础教程，包括 Java、Python、JavaScript、SQL 和 Git，无论是否...
第14天，JavaScript
第14天，JavaScript @(前端基础)[JavaScript] 目录一、JavaScript基础一个完...
Python 和 JavaScript
Python 和 JavaScript 2020年你认为那个走的更长远？ Python 和 JavaScript ...
JS-Basic
本文主要结构任务JavaScript基础练习JavaScript集合练习 JavaScript基础练习学到的主要...
JavaScript-01
A 什么是JavaScript JavaScript 定义JavaScript JavaScript基础语法常用...
Js全局变量和局部变量
//结果: Javascript语言基础 //结果: Javascript语言基础 //结果:Javascri...
JavaScript学习指南
1.1 JavaScript基础概念： JavaScript (ECMAScript) ：JavaScript 是...