【前端】JavaScript详细教程(二)

❤️JavaScript必备知识详解❤️

  • 第一部分:JS操作符
    • (1)JS操作符的分类:
      • 效果展示:
    • (2)JS操作符的注意点:
      • 效果展示:
  • 第二部分:流程控制
      • 效果展示:
  • 第三部分:循环
      • 效果展示:
  • 第四部分:字符串方法
      • 效果展示:
  • 第五部分:数组方法
      • 效果展示:
  • 第六部分:小拓展之补充点常用方法:
  • 书籍介绍
    • 【书籍封面】
    • 《Python数据分析与可视化从入门到精通》
        • 【参考文案】
      • 【内容简介】
      • 【作者简介】
    • 《机器学习入门:基于数学原理的Python实战》
      • 【参考文案】
      • 【内容简介】
      • 【作者简介】
    • 《Web前端性能优化》
      • 【参考文案】
      • 【内容简介】
      • 【作者简介】
    • 《分布式一致性算法开发实战》
      • 【参考文案】
      • 【内容简介】
      • 【作者简介】


回馈粉丝活动,本篇博文将会在评论区抽出两位幸运观众送出《Python数据分析与可视化从入门到精通》||《机器学习入门:基于数学原理的Python实战》||《分布式一致性算法开发实战》||《Web前端性能优化》中任选一本【包邮哦~】。书籍介绍请看文末。

       
直接跳到末尾 ——>领取专属粉丝福利
       ☝️


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

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

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

【前端】JavaScript详细教程(二)_第1张图片


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

第一部分:JS操作符

(1)JS操作符的分类:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS操作符title>
head>
<body>

<script>
    var a = 1;
    var b = 2;
    // 算术运算符   +  、-  、 *  、 /  、 %、++、--
    document.write(a+b + "
"
); //doucument.write()将内容写入HTML页面 document.write(a-b + "
"
); document.write(a*b + "
"
); document.write(a/b + "
"
); document.write(a++ + "
"
); //如果++放a后面则先打印a,现在是1,然后再自增1; document.write(++a + "
"
); //如果++放a前面则先自增1并打印a,现在是2。 document.write(--a + "
"
); //--和++同理! document.write(b%a + "
"
); //取余 var c = 3; // 赋值运算符 = 、+=、-=、 *=、/=,%= document.write((c=5) + "
"
); //5 document.write((c+=1) + "
"
); //6 document.write((c-=1) + "
"
); //5 document.write((c*=2) + "
"
); //10 document.write((c/=2) + "
"
); //5 document.write((c%=2) + "
"
); //1 var d = '1'; var e = 1; var f = 3; // 比较运算符 >、>=、<、<=、==(等于)、===(全等) document.write((f>e) + "
"
); //true document.write((f>=e) + "
"
); //true document.write((e==d) + "
"
); //true ==等于,但不全等,它会先转换我们的类型,再进行比较 document.write((e===d) + "
"
) //false 全等,先比较类型是否一致,如果类型一致再比较值的大小。 // 逻辑运算符 &&(与)、||(或)、! (非) document.write((2>3&&2<5) + "
"
); //false document.write((2>3||2<4) + "
"
); //true document.write((!(2==3)) + "
"
);
script> body> html>
(本人运营微信公众号:孤寒者)
(欢迎喜欢Python,喜欢编程的小伙伴们的关注哦~)

效果展示:

【前端】JavaScript详细教程(二)_第2张图片

(2)JS操作符的注意点:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS操作符的注意点title>
head>
<body>

<script>
    // 算数运算符注意点:
    var a = 10;
    var str = "1";
    document.write((a + str) + "
"
); //101 document.write((a - str) + "
"
); //9 document.write((a + true) + "
"
); //11 document.write((a - false) + "
"
); //10 document.write((a + null) + "
"
); //10 document.write((a + undefined) + "
"
); //NaN document.write((0.1 + 0.2) + "
"
); //0.30000000000000004 document.write((10/3) + "
"
); //3.3333333333333335 //逻辑运算符注意点: 0,null,undefined,NaN,''空字符串,false这些在进行判断的时候为假。 document.write((!null) + "
"
); //true document.write(!0 + "
"
); //true document.write(!1 + "
"
); //false document.write(!undefined + "
"
); //true document.write(!NaN + "
"
); //true document.write(!'' + "
"
); //true document.write(!false + "
"
); //true
script> body> html>

效果展示:

【前端】JavaScript详细教程(二)_第3张图片

第二部分:流程控制

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程控制title>
head>
<body>

<script>

    var name = "奶茶";
    //if ... else  语句
    if(name=="奶茶"){
       
        document.write("我要喝奶茶");
    }else{
       
        document.write("有没有奶茶?");
    }

    //if ... else if ... else  语句
    a = "帅气";
    if(a=="美丽"){
       
        document.write("你很美丽啊!");
    }else if(a=="可爱"){
       
        document.write("你很可爱啊!")
    }else{
       
        document.write("你很帅气啊!")
    }

    //switch ... case ... default
    var day = 2;
    switch (day){
       
        case 1:
            document.write("今天星期一");
            break;
        case 2:
            document.write("今天星期二");
            break;
        case 3:
            document.write("今天星期三");
            break;
        default:
            document.write("请输入1-7之间的数字!")
    }


script>

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

效果展示:

【前端】JavaScript详细教程(二)_第4张图片

第三部分:循环

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环title>
head>
<body>

<script>
    // for循环   for(声明循环变量;判断循环条件;更新循环变量)
    for(var i=1;i<=5;i++){
             //x先判断后执行
        document.write("我跑了" + i + "圈" + "
"
); } // while循环 先判断后执行 var a = 1; while (a<=5){ document.write("我跑了" + a + "圈" + "
"
); a++ } // do ... while循环 先执行后判断 var b = 1; do{ document.write("我跑了" + b + "圈" + "
"
); b++; }while(b<=5)
script> body> html>

效果展示:

【前端】JavaScript详细教程(二)_第5张图片

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

第四部分:字符串方法

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串方法title>
head>
<body>

<script>
    
    var str = "hello world";
    var str1 = "ABCDEFG";

    // 长度                 输出字符串的长度。
    document.write(str.length + "
"
); // 下标(两种方法) 查找字符串中对应下标的字符。 document.write(str[2] + "
"
); //下标从0开始。 如果下标超出字符串长度,报undefined。 document.write(str.charAt(2)) // 替换 document.write(str.replace("h","y") + "
"
); //将字符串中的h替换为y,如果是这样写,只会替换匹配到的第一个字符。 document.write(str.replace(/o/g,"a") + "
"
); //如果这样写,是替换所有匹配的字符,全局搜索。 // 分割 将指定的字符变为逗号实现分割。 document.write(str.split("o") + "
"
); // 索引 document.write(str.indexOf("d") + "
"
); //查询指定的字符在字符串中对应的下标。如果在字符串中多次出现,则只查询第一次出现的下标。 document.write(str.indexOf("o",4) + "
"
); //指定查询开始的字符下标。这样就可以查询到后面的字符的下标。 document.write(str.lastIndexOf("l") +"
"
); //从字符串尾部向头查询指定字符串的下标。 作用:可以快速查询到最后一个指定字符的下标。 // 截取 左闭右开 .substring(截取部分开始下标,截取部分结束下标加1) document.write(str.substring(1,4) + "
"
); //ell // 切割 左闭右开 .slice(切割部分开始下标,切割部分结束下标加1) document.write(str.slice(1,4) + "
"
); //ell // 小写变大写 document.write(str.toUpperCase()+"
"
); //HELLO WORLD // 大写变小写 document.write(str1.toLowerCase()+ "
"
); //abcdefg // 拓展:截取和切割的区别: // 第一点:截取会自动比较参数的大小;但是切割不会! // 截取: document.write(str.substring(1,4) + "
"
); //ell document.write(str.substring(4,1) + "
"
); //ell // 切割: document.write(str.slice(1,4) + "
"
); //ell document.write(str.slice(4,1) + "
"
); //没有东西,即不行! // 第二点:截取不能取负值;但是切割可以! // 截取: document.write(str.substring(-4,-1) + "
"
); //没有东西,即不行! // 切割: document.write(str.slice(-4,-1) + "
"
); //orl
script> body> html>

效果展示:

【前端】JavaScript详细教程(二)_第6张图片

第五部分:数组方法

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组方法title>
head>
<body>

<script>
    // 定义数组
    var array = ["香蕉","西红柿","椰子","橙子"];

    // 数组的长度
    document.write(array.length + "
"
); //4 // 下标 获取指定下标的数组的值 document.write(array[2] + "
"
); //椰子 // 追加 加在数组的最后面 document.write(array.push("无花果") + "
"
); //5 document.write(array + "
"
); //香蕉,西红柿,椰子,橙子,无花果 // 添加 加在数组的最前面 document.write(array.unshift("黄瓜") + "
"
); //6 document.write(array + "
"
); //黄瓜,香蕉,西红柿,椰子,橙子,无花果 // 后删 删除数组的最后一个 document.write(array.pop() + "
"
); //无花果 document.write(array + "
"
); //黄瓜,香蕉,西红柿,椰子,橙子 // 前删 删除数组的最前面一个 document.write(array.shift() + "
"
); //黄瓜 document.write(array + "
"
); //香蕉,西红柿,椰子,橙子 // 索引 获取指定数组元素的下标 document.write(array.indexOf("椰子") + "
"
); //2 // 切片 左闭右开 可以取负值 document.write(array.slice(1,3) + "
"
); //西红柿,椰子 document.write(array.slice(3,1) + "
"
); //不可行,没有用哦! document.write(array.slice(-3,-1) + "
"
); //西红柿,椰子 // 替换 splice(开始下标,替换个数,替换内容) 替换内容可以没有,可以多于替换个数,可以少于替换个数。 document.write(array.splice(1,2,"菠萝","杨桃") +"
"
); //西红柿,椰子 document.write(array + "
"
); //香蕉,菠萝,杨桃,橙子 // 拼接 指定数组里面元素之间的符号 document.write(array.join("-") + "
"
); //香蕉-菠萝-杨桃-橙子 var arr = ["a","d","b","c"]; // 排序 按照字符集编码进行排序 document.write(arr.sort() + "
"
); //正向排序 //a,b,c,d document.write(arr.reverse() + "
"
); //反向排序 //d,c,b,a var arr1 = ["a","d","b","c"]; // 连接 多个数组连接在一起 document.write(array.concat(arr) + "
"
); //香蕉,菠萝,杨桃,橙子,d,c,b,a document.write(array.concat(arr,arr1) + "
"
); //香蕉,菠萝,杨桃,橙子,d,c,b,a,a,d,b,c
script> body> html>

效果展示:

【前端】JavaScript详细教程(二)_第7张图片

第六部分:小拓展之补充点常用方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>补充方法</title>
</head>
<body>

<script>
    var num = 1.23;
    console.log(typeof num);                      //number
    // 字符串            将别的数据类型转换为string字符串类型
    console.log(num.toString());                  //1.23
    console.log(typeof num.toString());           //string
    // 小数字符串        .toFixer()里面参数指定保留小数位数
    console.log(num.toFixed(1));                  //1.2
    console.log(typeof num.toFixed(1));           //string
    // 整数              将别的数据类型转换为整数    转换之后数据类型为number
    var str = "1.23 12px";
    var str1 = "123";
    console.log(parseInt(num));                   //1
    console.log(parseInt(str));                   //1
    console.log(parseInt(str1));                  //123
    // 浮点数             将别的数据类型转换为浮点数   转换之后数据类型为number
    console.log(parseFloat(str));                 //1.23
    // 数字               将别的数据类型转换为number,如果不纯是数字则为NaN
    console.log(Number(str));                     //NaN
    console.log(Number(str1));                    //123
    // 判断NaN            要结合Number()使用,先取出数字再进行判断NaN
    console.log(isNaN(Number(str)));             //true
    console.log(isNaN(Number(str1)));            //false
    // 判断数组           判断是不是数组
    var arr = [1,2,3];
    console.log(Array.isArray(arr));             //true
</script>

</body>
</html>

书籍介绍

【书籍封面】

【前端】JavaScript详细教程(二)_第8张图片

《Python数据分析与可视化从入门到精通》

【参考文案】

(1)没有高深理论,每章都以实例为主,读者参考书中源码运行,就能得到与书中一样的结果。
(2)专注于Python数据分析与可视化操作中实际用到的技术。相比大而全的书籍资料,本书能让读者尽快上手,开始项目开发。
(3)书中的“新手问答”和“小试牛刀”栏目能让读者巩固知识,举一反三,学以致用。

【内容简介】

本书以“零基础”为起点,系统地介绍了Python在数据处理与可视化分析方面的应用。全书共分3篇12章内容,具体安排如下。
第1篇:基础篇,包括第1-4章。第1章 先来认识一下大蟒:Python入门。第2章 磨好利牙,子弹上膛:准备好工作环境。第3章 大蟒的基本技能之一:Python语言基础。第4章 大蟒的基本技能之二:Python语言进阶。
第2篇:应用篇,包括第5-11章。第5章 给大蟒找食:Python的数据存取操作。第6章 洗干净了再吃:使用Python预处理数据。第7章 什么食物有营养:大数据分析及可视化基础知识。第8章 大蟒神通之一:使用matplotlib绘制基础图形。第9章 大蟒神通之二:使用matplotlib美化和修饰图形。第10章 大蟒神通之三:数据可视化之3D图形应用。第11章 大蟒神通之四:使用图像和地图绘制图表。
第3篇:实战篇,第12章 综合案例:全国县级市天气预报数据可视化分析。以抓取中国天气网相关数据存入MySQL数据库,并绘制相应图形为主线,综合本书各章知识点介绍了数据采集、清理、保存以及绘制可视化图形的基本步骤和方法。
本书既适合希望从事Python数据处理与可视化的用户学习,也适合广大职业院校作为相关专业教材,还可作为社会培训班的参考用书。

【作者简介】

高博,高级工程师,IT杂家。主要研究方向为云计算与大数据、数据可视化等,熟悉.Net、PHP、Python,DevOps,MySQL、SQLServer等技术和工具。作为第一作者编写了《Discuz!社区管理员实用教程》《代码的力量——Discuz!源码分析与插件开发实例进阶》《PHP+MySQL+AJAX Web开发给力起飞》,参与编写了《Web 2.0社区网站实用宝典》《ASP.NET 4.0 MVC敏捷开发给力起飞》《Java Web应用开发给力起飞》等书籍。主持省部级纵向课题3项,参与纵向、横向课题16项,获得软件著作权12项。
刘冰,博士研究生,重庆邮电大学计算机科学与技术学院/人工智能学院教师,先后翻译出版程序设计、图像处理、计算机视觉等领域著作4部,编写教材5部,获发明专利2项,发表SCI/EI论文4篇,参与guojia级、省部级项目3项。荣获重庆邮电大学优秀班主任、优秀班导师、优秀青年教师等荣誉称号。
李力,毕业于西安交通大学计算机学院,现工作于教育考试招生战线,曾长期在国防军工单位从事网络战、信息战研究,擅长需求分析与设计,参与纵、横向课题12项,获得软件著作权4项。

京东自营购买链接

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

当当自营购买链接

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

《机器学习入门:基于数学原理的Python实战》

【参考文案】

1.与周志华编写的《机器学习》相比,本书多了对算法的数学原理详细严谨的推导。
2.与李锐翻译的《机器学习实战》相比,本书多了用面向对象思想将算法模块化,并且书中代码在Python 3 环境下运行。
3.为了照顾初学者,本书补充了全书涉及的高等数学、线性代数、概率论与数理统计、Jessen不等式等数学基础知识。

【内容简介】

机器学习是一门涉及高等数学、线性代数、概率论、统计学和运筹学等领域的交叉学科。机器学习的基础就是数学,这也就要求学习者要有良好的数学基础。为了降低机器学习的学习门槛,本书深入浅出地对机器学习算法的数学原理进行了严谨的推导;并利用Python 3对各种机器学习算法进行复现,还利用介绍的算法在相应数据集上进行实战。本书主要内容包括机器学习及其数学基础;线性回归、局部加权线性回归两种回归算法;Logistic回归、Softmax回归和BP神经网络3种分类算法;模型评估与优化;K-Means聚类算法、高斯混合模型两种聚类算法和一种降维算法——主成分分析。
《机器学习入门:基于数学原理的Python实战》理论性与实用性兼备,既可作为初学者的入门书籍,也可作为求职者的面试宝典,更可作为职场人士转岗的实用手册。本书适合需要全面学习机器学习算法的初学者、希望掌握机器学习算法数学理论的程序员、想转行从事机器学习算法的专业人员、对机器学习算法兴趣浓厚的人员、专业培训机构学员和希望提高Python编程水平的程序员。

【作者简介】

戴璞微,中国民航大学硕士,CSDN博客专家。曾获得全国大学生数学竞赛国家一等奖、北美数学建模二等奖,参与国家自然科学基金项目1项。对计算机视觉、机器学习和深度学习有深入研究。
  潘斌,浙江大学应用数学系博士,现任辽宁石油化工大学理学院副院长。2018年入选辽宁省“兴辽英才计划”青年拔尖人才,2016年主持国家自然科学基金青年基金项目1项;2015年主持辽宁省自然科学基金项目1项;2016年主持浙江大学CAD&CG国家重点实验室开放课题2项。近年来,指导本科生获全国大学生数学建模竞赛国家一等奖。

京东自营购买链接

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

当当自营购买链接

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

《Web前端性能优化》

【参考文案】

性能就像一条管道,数据流在管道流动的过程中,哪里容易堵塞,哪里就存在瓶颈。
《Web前端性能优化》通过三大优化思维+八处优化落点+40多个典型案例,教你轻松学会“大厂”的优化套路!

【内容简介】

《Web前端性能优化》以Web性能优化为重点,深入浅出地介绍了性能优化所涉及到的方方面面知识,详细解答了为何要做性能优化,性能优化又需要从何处着手,性能优化的过程又需要考虑到哪些问题?需要做怎样的权衡?内容包括:第1章 用户体验(UE——userexperience);第2章 前端性能瓶颈(Front-end performance bottleneck);第3章 前端的分层(Front-end layering);第4章 HTML层级优化;第5章 CSS层级优化;第6章 JavaScript层级优化;第7章 资源加载优化(Resource loading optimization);第8章 其他层级优化(Other hierarchical optimization);第9章 前端调试(Front-end debugging);第10章 常见自动化构建工具(Common automated build tools);第11章新技术对性能的提升(Performance improvements from new technologies);第12章 思想高于逻辑 逻辑强于代码(Thought over logic over code)。第13章 性能优化案例分析(Performance optimization case study),本书适合程序员及Web开发者阅读。

【作者简介】

陈铎鑫,Web前端开发工程师,多年一线开发经验,慕课网认证作者。在博客园、慕课网累计发布前端相关技术文章50余篇,累计字数超30万字。
  2018年负责大规模考试系统前端架构设计及前端技术选型,并实际落地应用于各大高校平台。
  2019年参与公司平台数据可视化展示、3D实景应用、智感小区等前端AI人脸识别落地应用产品的研发,目前已开始落地推广。

京东自营购买链接

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

当当自营购买链接

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

《分布式一致性算法开发实战》

【参考文案】

系统:选举、日志和多个高级主题逐步深入讲解。
2.详尽:通过3万行源码和测试,详细分析设计细节及实现难点。
3.生产级:基于Netty的生产级异步IO实现。
4.完整:包含交互式客户端的简易分布式KV服务。

【内容简介】

从介绍分布式一致性算法开始,分析了Raft算法以及Raft算法所依赖的理论,在此基础上讲解并实现了Raft算法以及基于Raft算法的KV服务。通过本书,可以深入了解Raft算法的运行机制,也可以学到如何相对正确地实现Raft。
  《分布式一致性算法开发实战》分为11章,第1章简单介绍分布式一致性算法,第2章详细分析Raft算法,第3章在第2章的基础上进行整体设计,第4~8章逐个讲解基于Raft算法的KV服务的各个组件的实现,第9章讲解日志快照,第10章是生产环境必需的服务器成员变更功能,第11章介绍一些相关的Raft算法优化。
  本书详细介绍了Raft的核心算法、服务器成员变更以及各种优化的实现,适合那些想尝试实现Raft算法或者在生产环境加入Raft算法的人,也适合那些对于Raft算法有兴趣的读者。

【作者简介】

赵辰,男,1989年生于上海,软件工程师。曾在蚂蚁金服工作四年,擅长基于Java语言的后端开发,对Java语言下的多线程编程、分布式计算、多核编程有深入研究。

京东自营购买链接

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

当当自营购买链接

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

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

公众号后台回复【JS第二篇】,可得本文MD原文笔记~
【可以公众号里私聊并标明来自CSDN,会拉你进入技术交流群(群内涉及各个领域大佬级人物,任何问题都可讨论~)--->互相学习&&共同进步(非诚勿扰)】

你可能感兴趣的