IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 【前端】JavaScript详细教程(三) -> 正文阅读

[JavaScript知识库]【前端】JavaScript详细教程(三)


???????👇
👉🚔直接跳到末尾🚔👈 ——>领取专属粉丝福利💖
?????????


【回馈粉丝——本篇博文文末评论区以及今日社区打卡中各抽取一人送《Python编程从入门到精通》一本~】

?

?👻上两篇博文保姆级教程HTML两万字笔记大总结【建议收藏】(上篇)保姆级教程HTML两万字笔记大总结【建议收藏】(下篇)被众多小伙伴们阅读之后,很多小伙伴私信我——催我出CSS和JavaScript的版本~👻

?😬前不久刚刚发布CSS版本(上下共两篇),你们就又都私信催我JavaScript版本的!(苦笑)既然小伙伴们学习热情那么强烈,那我怎么着也不能辜负了你们!所以本博主又连夜苦肝,苦苦熬制出了JavaScript版本的(篇幅过长,不出意外会出共三篇~)😬

?😜在这三篇博文中,本博主就带领小伙伴们认真地学习一下JavaScript(原名livescript)相关的必备知识——如果说我们上两篇讲的HTML是用于定义网页里面有什么内容,那么JavaScript就是用于动态的控制页面。😜

请添加图片描述


重点来啦!重点来啦!!💗💗💗
小伙伴们,快拿出你们的笔记本,开始上课啦!(要打起十足的精神哦~)

第一部分:MATH对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MATH对象</title>
</head>
<body>

<script>
    // 开方
    document.write(Math.sqrt(4) + "<br>");        //2
    // 绝对值
    document.write(Math.abs(-5) + "<br>");       //5
    // pi
    document.write(Math.PI + "<br>");            //3.141592653589793
    // x的y次方
    document.write(Math.pow(2,3) + "<br>");      //8
    // 取整            四舍五入
    document.write(Math.round(3.6) + "<br>");    //4
    // 向下取整
    document.write(Math.floor(2.7) + "<br>");    //2
    // 向上取整
    document.write(Math.ceil(2.4) + "<br>");     //3
    // 最大数
    document.write(Math.max(3,6,21,3) + "<br>");     //21
    // 最小数
    document.write(Math.min(3,6,4,2) + "<br>");      //2
    // 随机数      默认0到1(左闭右开)
    document.write(Math.random() + "<br>");      
    document.write(Math.random()*100 + "<br>");             //0到100的随机数
    document.write(Math.round(Math.random()*100) + "<br>");  //0到100的随机整数
</script>

</body>
</html>
(本人运营微信公众号:孤寒者)
(欢迎喜欢Python,喜欢编程的小伙伴们的关注哦~)

效果展示:

在这里插入图片描述

第二部分:日期对象

知识点补给站:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期对象</title>
</head>
<body>

<script>
    // 定义一个日期对象
    var today = new Date();      //得到本机电脑的时间
    // 获取年
    var year = today.getFullYear();
    document.write(year + "<br>");
    // 获取月      注意:获取的月份从0开始   比如:本机电脑是1月,则获取是0月。
    var month = today.getMonth()+1;
    document.write(month + "<br>");
    // 获取日期
    var date = today.getDate();
    document.write(date + "<br>");
    // 获取周几
    var day = today.getDay();
    document.write(day + "<br>");
    // 获取小时
    var hour = today.getHours();
    document.write(hour + "<br>");
    // 获取分钟
    var minute = today.getMinutes();
    document.write(minute + "<br>");
    // 获取秒数
    var second = today.getSeconds();
    document.write(second + "<br>");
    // 时间戳
    var time = Date.now();
    document.write(time);
</script>

</body>
</html>

效果展示:

在这里插入图片描述

(本人运营微信公众号:孤寒者)
(欢迎喜欢Python,喜欢编程的小伙伴们的关注哦~)

第三部分:函数

(1)定义一个函数?

function funName(){}

(2)函数分类?

  • 有名函数
  • 匿名函数

(1)函数基操:

(效果很明显,自行演示查看,一步步琢磨哦~)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数</title>
</head>
<body>

<p onclick="add()">我是一个段落标签</p>
<p onclick="add2('你是段落标签2')">我是一个段落标签2</p>
<p onclick="add3()">我是一个段落标签3</p>

<script>
    // 有名函数      可以进行调用
    function add() {        //add就是函数名字
        alert("你是段落标签1");
    };

    // 函数传参
    function add2(a) {
        alert(a)
    };

    // 匿名函数      不可进行调用  一般充当事件函数!
    var p1 = document.getElementsByTagName("p")[2];
    p1.onclick = function () {
        alert("你是段落标签3");
    };

    // 函数返回值  return
    function add4(a) {
        return a;
    }
    var b = add4("我是函数返回值");
    alert(b);

    // 不定长参数        arguments可以接收任意多个参数!
    function fun() {
        console.log(arguments);
    }
    fun(1,2,3,4,5);


</script>

</body>
</html>

(2)自定义函数(自调用函数):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数</title>
</head>
<body>

<script>

    // 自定义函数(自调用函数)     自己会调用自己,直接就执行函数了。 ! 或者 ~ 或者 + 或者 - 或者 () 都可以表示;
    ~function () {
        console.log("我是自调用函数1");
    }();
    // 小括号表示自定义函数的另外两种写法:
    (function () {
        console.log("我是自调用函数2");
    })();

    (function () {
        console.log("我是自调用函数3");
    }());


</script>

</body>
</html>
(本人运营微信公众号:孤寒者)
(欢迎喜欢Python,喜欢编程的小伙伴们的关注哦~)

效果展示:

在这里插入图片描述

(3)JavaScript里函数的作用域:

(效果很直观,请自行操作观察,一步步琢磨哦~)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数</title>
</head>
<body>

<script>

    // JS里函数的作用域
    var a = 10;        //全局变量
    function fun3() {
        // 函数作用域:局部变量
        var a = 20;     //如果把var去掉,弹出结果就变成:10 20 20。涉及:子作用域会改变父作用域的值。  这时a就相当于全局变量了。
        alert(a);
    }
    alert(a);
    fun3();
    alert(a);
    // 弹出为:10  20  10
    // 来个例子分析:  子作用域会改变父作用域的值
    var a = 10;
    function fun() {
        var a = 20;
        function fun1() {
            a = 30;     //因为此处没有加var,子作用域会改变父作用域的值。所以调用fun()得到的a是30。
        }
        fun1();
        alert(a);
    }
    alert(a);           //10        程序从上往下执行,遇到函数先跳过,所以此处a是10。
    fun();              //30
    alert(a);           //10        要注意:子作用域是会改变父作用域的值,但只是父作用域的值,再往上(爷爷辈的)就不会改变了!!!

    // 小拓展:
    // let定义局部变量的关键字
    {
        // 块级作用域        只能在这个花括号里面使用,如果在花括号外面使用会报错,显示i未被定义!  但是如果使用var定义的就都可以。
        let i = 1;
        console.log(i)
    }

</script>

</body>
</html>
(本人运营微信公众号:孤寒者)
(欢迎喜欢Python,喜欢编程的小伙伴们的关注哦~)

第四部分:定时器

(温馨小提示:小伙伴们可以尝试把清除定时器注释了观察哦~)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
</head>
<body>
<script>

    // 第一种定时器:::
    // 在指定时间后执行一次
    var time1 = setTimeout(function () {
        console.log(123);
    },3000);        //时间单位是ms
    // 清除定时器
    clearTimeout(time1);

    // 第二种定时器:::
    // 以指定的时间为周期循环执行
    var time2 = setInterval(function () {
        console.log(456);
    },1000);
    // 清除定时器
    clearInterval(time2);

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

?

小福利—书籍介绍:

书籍名:《Python编程从入门到精通》

请添加图片描述
【参考文案】

随着人工智能技术的快速发展,各行各业都需要智能化的提高,越来越多的智能产品需要 Python 语言的参与和实现。Python 帮助了更多的人在各行各业中实现自己的价值,做量化分析的金融人士可以使用 Python 语言实现自动化,临床医学专业的医护人员可以使用 Python 语言进行药品的临床分析…
本书通过趣味的生活案例帮助读者理解编程中的专业概念,通过实用的程序学习编程中的逻辑方法,通过“理论 + 小案例”的形式对各个知识点进行讲解,并结合各个知识点进行综合实战的演练。

【内容简介】

本书侧重于Python程序开发过程中重点和难点的理解,结合具有典型性的程序案例,用通俗的语言由浅入深、循序渐进地帮助读者掌握Python语言。知识点都使用生活中的案例帮助理解,每个案例都有详尽的代码解释,实战部分也会将Python语言与Web和数据分析等技术相结合,进行技术应用上的扩展。
本书由Python编程基础、Python高级编程、Python应用技术和Python实战演练4个部分组成。Python编程基础针对程序设计的入门,介绍从过程化的编程要点到代码中使用的各种数据类型;Python高级编程针对程序设计的提高,介绍从面向对象的使用到算法上的提升;Python应用技术针对程序设计的场景运用,介绍从Web的开发到数据分析的思路;Python实战演练针对程序设计的逻辑,从游戏的开发到基本网站的建设。旨在使读者通过对本书内容一步步的学习,能够学会编程方法,打好编程基础,提升编程能力,扩展编程应用,锻炼编程思维,培养编程逻辑。
本书适用于学习Python的初学者、爱好者和进取者。对程序没有概念的人员可以看得懂,学得会;有程序基础的人员可以加点“料”,扩思路;程序上的“大咖”可以多提宝贵意见,更好地为读者服务。

【作者简介】

李刚,项目经理,从事IT行业超过十年,具有丰富的一线项目、授课、就业相关的实战经验。通晓Java、前端、Python等当下流行的技术,研究方向专注于人工智能、大数据等领域。

京东自营购买链接:

https://item.jd.com/13397238.html

当当自营购买链接:

http://product.dangdang.com/29285785.html

?

👇🏻可通过点击下面——>关注本人运营 公众号👇🏻

公众号后台回复【JS第三篇】,可得本文MD原文笔记~
【可以公众号里私聊并标明来自CSDN,会拉你进入技术交流群(群内涉及各个领域大佬级人物,任何问题都可讨论~)--->互相学习&&共同进步(非诚勿扰)】
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-12-07 11:56:25  更:2021-12-07 11:56:27 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 8:45:14-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码