JS基础知识| 青训营

123 阅读6分钟

JavaScript 是⼀种客户端脚本语⾔(脚本语⾔是⼀种轻量级的编程语⾔,语法和java类似。 JavaScript 通常被直接嵌⼊ HTML ⻚⾯,由浏览器解释执⾏

JavaScript 是⼀种解释性语⾔(就是说,代码执⾏不进⾏预编译)。

特点:弱类型和基于对象。(因为⾯向对象需要具有封装、继承、多态的特征)

JavaScript语⾔中包含三个核⼼:ECMAScript基本语法、DOM、BOM

在前面的学习中,我们已经了解到前端Web技术的组成有 HTML、CSS、JavaScript

1)HTML是⼀种标记语⾔,⽤来结构化我们的⽹⻚内容并赋予内容含义,例如定义段落、标题和数据表,或在⻚⾯中嵌⼊图⽚和视频。

2)CSS 是⼀种样式规则语⾔,可将样式应⽤于 HTML 内容, 例如设置背景颜⾊和字体,在多个列中布局内容。

3)JavaScript 是⼀种脚本语⾔,可以⽤来创建动态更新的内容,控制多媒体,制作图像动画等等。

JS有如下的具体使用方法

可以像添加CSS那样将 JavaScript 添加到 HTML ⻚⾯中。

JS的基本语法如下

1、输出弹出框 仅仅向文档输写内容 如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖 alert(“hello world !”) 弹出框会停止代码往下执行,当点击确定之后才继续执行

2、分号 分号用于分隔 JavaScript 语句 通常我们在每条可执行的语句结尾添加分号。 使用分号的另一用处是在一行中编写多条语句(一行中编写多条语句必须使用分号)

3、JS对大小写是敏感的

4、JS会忽略多余的空格

5、可以在文本字符串中使用反斜杠对代码行进行换行

6,单行注释//(快捷键:Ctrl键加/键)和多行注释/* … */(快捷键:Ctrl键加Shift键加/键)

7,JS中的console.log()相当于Python中的print()

如何写好JS

  • 各司其责(HTML,CSS,JS职能分离)
  • 组件封装(好的UI组件具备正确性、扩展性、复用性)
  • 过程抽象(应用函数式编程思想)

让JS的组件各司其职结论 1.应当避免不必要的由JS直接操作样式 2.可以用class表示状态 3.纯展示类交互寻求零JS方案

用JS写电商网站的轮播图: 结构:HTML 轮播图是一个典型的列表结构,可以使用无序列表ul元素实现

表现:CSS

  • 使用CSS绝对定位将图片重叠在同一个位置
  • 轮播图切换状态使用修饰符
  • 轮播图切换动画使用CSS transition

行为:JS

API

  • Slider
  • getSelectedltem()
  • getSelectedltemIndex()
  • slide To
  • slide Next
  • slidePrevious

控制流 使用自定义事件解耦

总结:基本方法

  • 结构设计
  • 展现效果
  • 行为设计(API-功能;Event-控制流)

重构:插件化

解耦

  • 将控制元素抽取成插件
  • 插件与组件之间通过依赖注入方式建立联系

重构:模版化

解耦(将HTML模版化,更易于拓展)

重构:组件框架 抽象(将通用组件模型抽象出来)

组件封装总结

  • 组件设计原则:封装性、正确性、扩展性、复用性
  • 实现组件步骤:结构设计、展现效果、行为设计
  • 三次重构

过程抽象

用来处理局部细节控制的一些方法

函数式编程思想的基础应用

Once 为了能够让“只执行一次”的需求覆盖不同的事件处理,将需求剥离出来的过程称为过程抽象

高阶函数

  • 以函数作为参考
  • 以函数作为返回值
  • 常用作于函数装饰器
  • 常用:Once,Throttle,Debounce,Consumer/2,Iterative

写代码最应该关注 风格、效率、约定、使用场景、设计

交通灯例子中改进方法

  • 数据抽象
  • 过程抽象
  • 异步+函数式

通过JS的学习,我了解到作为前端开发的一部分,是一门解释型语言,浏览器充当解释器。 JS执行引擎并不是一行一行的执行,而是一段一段的分析执行。

在第一阶段完成HTML+CSS的学习之后,我相信不少人都会被第二阶段JS难倒——JS语法、JS数据类型、JS对象,JS给我们的印象总是那么的“复杂”,因为它相比html来说是动态的,是编程语言,更深奥一些。想要熟练掌握JS难度很大,不过如果把知识点梳理清楚,真正的理解并加以运用,就可以掌握它。那么该如何才能学好JS,在这里我给大家分享一些学习JS的经验,希望能对新手有些帮助

Js给人那种感觉的原因多半是因为它如下的特点:

第一:本身知识很抽象、晦涩难懂,如:闭包、内置对象、DOM。

第二:本身内容很多,如函数库、对象库就一大堆。

第三:混合多种编程思想。它里面不但牵涉面向过程编程思想,又有面向对象编程思想,同时,它的面向对象还和别的编程语言(如:C++,JAVA,PHP)不大一样。

以下是我的一些建议:

初学者在学习JS时,要先了解其基本语法。它是一种面向对象的语言,它使用变量、函数、对象和数组等基本元素来构建程序。了解这些基本元素的语法和用法是非常重要的。

其次JS有很多内置函数和方法,这些函数和方法可以帮助完成各种任务。例如,你可以使用alert()函数来显示一个弹出窗口,或者使用document.getElementById()方法来获取HTML元素。熟悉这些常用函数和方法可以让你更加高效地编写代码。

最重要的是要练习编写简单的程序

练习编写简单的程序是学习任何编程语言的关键。你可以从编写一些简单的程序开始,例如计算器或者猜数字游戏。这些程序可以帮助更好熟悉JS的语法和基本概念。

当遇到不懂的问题时,参与JS社区可以帮助学习更多的知识和技巧。初学者可以加入一些JS社区,例如GitHub、Stack Overflow和Reddit等。在这些社区中,可以向其他开发者提问、分享自己学会的经验和知识,并从其他人的经验中学习。

总之,学习JavaScript需要一定的时间和耐心。但是只要你掌握了一些基本的概念和技巧,就可以轻松入门。通过不断地练习和学习,最终就可以成为一名优秀的JavaScript开发者。