编程∶就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程。

  计算机程序∶就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌握的语言来编写的,所以人们要控制计算机一定要通过计算机语言向计算机发出命令。

  编程语言
    可以通过类似于人类语言的”语言”来控制计算机,让计算机为我们做事情,这样的语言就叫做编程语言(ProgrammingLanguage )。
    编程语言是用来控制计算机的一系列指令,它有固定的格式和词汇(不同编程语言的格式和词汇不一样),必须遵守。
    如今通用的编程语言有两种形式:汇编语言和高级语言。
    汇编语言和机器语言实质是相同的,都是直接对硬件操作,只不过指令采用了英文缩写的标识符,容易识别和记忆。

    高级语言主要是相对于低级语言而言,它并不是特指某一种具体的语言,而是包括了很多编程语言,常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift等。                                      编程语言有很强的逻辑和行为能力。在编程语言里你会看到很多if else 、for 、while等具有逻辑性和行为能力的指令,这是主动的。

    标记语言( html )不用于向计算机发出指令,常用于格式化和链接。标记语言的存在是用来被读取的,他是被动的。

  JavaScript是什么
    JavaScript是世界上最流行的语言之一,是一种运行在客户端的脚本语言( Script是脚本的意思)脚本语言∶不需要编译,运行过程中由js解释器(js 引擎)逐行来进行解释并执行
    现在也可以基于Node.js技术进行服务器端编程

  JavaScript的作用
    表单动态校验(密码强度检测)( JS产生最初的目的)
    网页特效
    服务端开发(Node.js)
    桌面程序(Electron)
    App(Cordova)

  常见的数据可视化库
    D3.js目前Web端评价最高的Javascript可视化工具库(入手难)ECharts.js百度出品的一个开源Javascript数据可视化库
    Highcharts.js国外的前端数据可视化库,非商用免费,被许多国外大公司所使用
    AntV蚂蚁金服全新一代数据可视化解决方案
    等等


    控制硬件-物联网(Ruff)
    游戏开发(cocos2d-js)

  什么是数据类型转换
    使用表单、prompt获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型。
    我们通常会实现3种方式的转换∶

    转换为字符串类型行

    转换为数字型

    转换为布尔型

1
2
3
4
5
6
7
8
9
10
11
12
// 1.把数字型转换为字符串型 toString()
  let num = 10;
  let str = num.toString();
  console.log(str);
  console.log(typeof str);
  console.log(parseInt('3.14'));
  console.log(parseInt('3.94'));
  console.log(parseInt('120px'));
  console.log(parseInt('rem120px'));
  console.log(parseFloat('3.14'));
  console.log(parseFloat('120px'));
  console.log(parseFloat('rem120px'));

  parseFloat()是转换字符串类型

  Boolean()是转换为布尔值

  运算符( operator )也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。

  表达式:是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合简单理解︰是由数字、运算符、变量等组成的式子
  表达式最终都会有一个结果,返回给我们,我们成为返回值

  前置递增和后置递增小结
      前置递增和后置递增运算符可以简化代码的编写,让变量的值+1比以前写法更简单单独使用时,运行结果相同
      与其他代码联用时,执行结果会不同
      后置:先原值运算,后自加(先人后己)
      前置:先自加,后运算(先已后人)

  在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
  简单理解︰流程控制就是来控制我们的代码按照什么结构顺序来执行
  流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。

  switch语句和if else if 语句的区别
    一般情况下,它们两个语句可以相互替换
    switch.case语句通常处理case为比较确定值的情况,而if..else..语句更加灵活,常用于范围判断(大于、等于某个范围)
    switch语句进行条件判断后直接执行到程序的条件语句,效率更高。而if..else语句有几种条件,就得判断多少次。
    当分支比较少时,it...else语句的执行效率比switch语句高。
    当分支比较多时,switch语句的执行效率比较高,而且结构更清晰。

  断点调试可以帮我们观察程序的运行过程
    浏览器中按F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点Watch:监视,通过watch可以监视变量的值的变化,非常的常用。
    F11:程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化。
    代码调试的能力非常重要,只有学会了代码调试,才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试,知识点花点功夫肯定学的会,但是代码调试这个东西,自己不去练,永远都    学不会。
    今天学的代码调试非常的简单,只要求同学们记住代码调试的这几个按钮的作用即呵,后面还会学到很多的代码调试技巧。

    for循环可以重复执行某些相同代码
    for循环可以重复执行些许不同的代码,因为我们有计数器for循环可以重复执行某些操作,比如算术运算符加法操作
    随着需求增加,双重for循环可以做更多、更好看的效果
    双重for循环,外层循环一次,内层for循环全部执行for循环是循环条件和数字直接相关的循环
    分析要比写代码更重要
    一些核心算法想不到,但是要学会,分析它艺行过程

    函数都是有返回值的
      1.如果有return则返回return后面的值
      2.如果没有return则返回undefined

    break ,continue ,return的区别
      break :结束当前的循环体(如for、while )
      continue :跳出本次循环,继续执行下次循环(如for、while )
      return :不仅可以退出循环,还能够返回return语句中的值,同时还可以结束当前的函数体内的代码

    当我们不确定有多少个参数传递的时候,可以用arguments来获取。在JavaScript中,arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有实参。

    通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高亨程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。

    在JavaScript中,根据作用域的不同,变量可以分为两种∶

      全局变量
      局部变量

  在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)。
    全局变量在代码的任何位置都可以使用
    在全局作用域下var声明的变量是全局变量
    特殊情况下,在函数内不使用var声明的变量也是全局变量(不建议使用)

  在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量)
    局部变量只能在该函数内部使用

    在函数内部var 声明的变量是局部变量

    函数的形参实际上就是局部变量

  全局变量和局部变量的区别
    全局变量︰在任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存
    局部变量︰只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被销毁,因此更节省内存空间

  我们js引擎运行js 分为两步:预解析代码执行
  预解析js引擎会把js里面所有的 var 还有 function 提升到当前作用域的最前面)

  代码执行按照代码书写的顺序从上往下执行

  预解析分为变量预解析(变量提升)和函数预解析(函数提升)
  变量提升就是把所有的变量声明提升到当前的作用域最前面不提升赋值操作函数提升就是把所有的函数声明提升到当前作用域的最前面

  在JavaScript中,对象是一组无序的相天属性和力汰以朵口,所有的手协都入,i43 1、、函数等。
    对象是由属性和方法组成的。
    属性∶

      事物的特征,在对象中用属性来表示(常用名词)

      方法:事物的行为,在对象中用方法来表示(常用动词)

  为什么需要对象:

    因为在工作中我们需要获取一个人的完整信息我们的变量还有数组实现的都不够清晰,但是我们的对象可以很清晰的来把我们的基本信息显示完整。

  在JavaScript中,现阶段我们可以采用三种方式创建对象( object ) :
    利用字面量创建对象
    利用new Object创建对象
    利用构造函数创建对象

  变量:单独声明赋值,单独存在
  属性:对象里面的变量称为属性,不需要声明,用来描述该对象的特征

  函数:单独存在的, 通过"函数名()"的方式就可以调用

  构造函数∶是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。

  1.构造函数名字首字母要大写

  2.我们构造函数不需要return就可以返回结果

  3.我们调用构造函数必须使用new

  构造函数和对象
    勾造函数,如Stars(),抽象了对象的公共部分,封装到了函数里面,它泛指某一大类( class )
    创建对象,如new Stars(),特指某一个,通过new关键字创建对象的过程我们也称为对象实例化

  new在执行时会做四件事情:

    1.在内存中创建一个新的空对象。

    2.让 this指向这个新的对象。

    3.执行构造函数里面的代码,给这个新对象添加属性和方法。

    4.返回这个新对象(所以构造函数里面不需要return ) .

    1.对象可以让代码结构更清晰

    2.对象复杂数据类型object.

    3.本质∶对象就是一组无序的相关属性和方法的集合。

    4.构造函数泛指某一大类,比如苹果,不管是红色苹果还是绿色苹果,都统称为苹果。

    5.对象实例特指一个事物,比如这个苹果、正在给你们讲课的pink老师等。

    6. for...in语句用于对对象的属性进行循环操作。

    JavaScript中的对象分为3种︰自定义对象、内置对象、浏览器对象
    前面两种对象是JS基础内容,属于ECMAScript;第三个浏览器对象属于我们JS独有的,我们JSAPI讲解

    内置对象就是指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)

    内置对象最大的优点就是帮助我们快速开发
    JavaScript提供了多个内置对象:Math、Date . Array、string等

    学习一个内置对象的使用,只要学会其常用成员的使用即可,我们可以通过查文档学习,可以通过MDN/W3C来查询。
    Mozilla开发者网络(MDN )提供了有关开放网络技术 (Open Web )的信息,包括HTML、CSS和万维网及HTML5应用的API。

    如何学习对象中的方法
      1.查阅该方法的功能

      2.查看里面参数的意义和类型

      3.查看返回值的意义和类型

      4.通过demo进行测试

   程序随机生成一个1~10之间的数字,并让用户输入一个数字

    1.如果大于该数字,就提示,数字大了,继续猜;

    2.如果小于该数字,就提示数字小了,继续猜;

    3.如果等于该数字,就提示猜对了,结束程序。

  基本包装类型
    为了方便操作基本数据类型,JavaScript还提供了三个特殊的引用类型:String、Number和Boolean。
    基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。

  根据字符返回位置
    字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。

  简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型。
    值类型︰简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型string , number , boolean , undefined , null
    引用类型∶复杂数据类型,在存储时变量中存储的仅仅是地址(引用),因此叫做引用数据类型通过new关键字创建的对象(系统对象、自定义对象),如Object、Array、Date等

  堆栈空间分配区别:
    1、栈(操作系统)︰由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;简单数据类型存放到栈里面
    2、堆(操作系统)︰存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。复杂数据类型存放到堆里面

  值类型(简单数据类型) : string , number , boolean , undefined , null值类型变量的数据直接存放在变量(栈空间)中

  复杂类型的内存分配
    引用类型(复杂数据类型):通过new关键字创建的对象(系统对象、自定义对象),如Object、Array、Date等
    引用类型变量(栈空间)里存放的是地址,真正的对象实例存放在堆空间中

  函数的形参也可以看做是一个变量,当我们把引用类型变量传给形参时,其实是把变量在栈空间里保存的堆地址复制给了形参,形参和实参其实保存的是同一个堆地址,所以操作的是同一个对象。

  JS基础阶段
    我们学习的是ECMAscript标准规定的基本语法要求同学们掌握Js基础语法
    只学习基本语法,做不了常用的网页交互效果目的是为了JS后面的课程打基础、做铺垫

  Web APls阶段
    web APIs是w3c组织的标准
    web APIs 我们主要学习DOM和BOMweb APIs 是我们Js 所独有的部分我们主要学习页面交互功能需要使用Js基础的课程内容做基础

  Js 基础学习ECMAscript基础语法为后面作铺垫,web APIs是Js 的应用,大量使用Js基础语法做交互效果

  APl
    APl ( Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。
    简单理解:API是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能。

  Web API
    Web API是浏览器提供的一套操作浏览器功能和页面元素的API( BOM和DOM)。现阶段我们主要针对于浏览器讲解常用的API,主要针对浏览器做交互效果。
    比如我们想要浏览器弹出一个警示框,直接使用alert(‘弹出’)
    MDN详细APl : https://developer.mozilla.org/zh-CN/docs/Web/API

    因为 Web API很多,所以我们将这个阶段称为Web APls

  API和Web API总结
    1.API是为我们程序员提供的一个接口,帮助我们实现某种功能,我们会使用就可以了,不必纠结内部何实现

    2. Web API主要是针对于浏览器提供的接口,主要针对于浏览器做交互效果。

    3.WebAPI一般都有输入和输出(函数的传参和返回值),WebAPI很多都是方法(函数)

    4.学习Web API可以结合前面学习内置对象方法的思路学习

  

   H5自定义属性
    自定义属性目的∶是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。自定义属性获取是通过getAttribute (属性)获取。
    但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性。H5给我们新增了自定义属性︰

  1.利用DOM提供的方法获取元素
    document.getElementByld0)
    document.getElementsByTagName(document.querySelector等
    逻辑性不强、繁琐

  2.利用节点层级关系获取元素
    利用父子兄节点关系获取元素逻辑性强,但是兼容性稍差

  节点概述
    网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM中,节点使用node来表示。
    HTML DOM树中的所有节点均可通过JavaScript进行访问,所有HTML元素(节点)均可被修改,也可以创建或删除。

  节点概述
    一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。

    元素节点nodeType 为1属性节点nodeType 为2  

    文本节点nodeType 为3(文本节点包含文字、空格、换行等)

  节点层级
    利用DOM树可以把节点划分为不同的层级关系,常见的是父子兄层级关系。

    parentNode属性可返回某节点的父节点,注意是最近的一个父节点如果指定的节点没有父节点则返回null

  1. document.write是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘
  2. innerHTMI是将内容写入某个DOM节点,不会导致页面全部重绘
  3. innerHTM 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂
  4. createElement()创建多个元素效率稍低一点点,但是结构更清晰

  文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。
  W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。
  1.对于JavaScript,为了能够使JavaScript操作HTML,JavaScript就有了一套自己的dom编程接口。2.对于HTML , dom使得html形成一棵dom树.包含文档、元素、节点

  主要修改dom的元素属性,dom元素的内容、属性表单的值等
    1.修改元素属性:src、href、title等

    2.修改普通元素内容:innerHTML、innerText

    3.修改表单元素: value、type、disabled等

    4.修改元素样式: style、className

  主要获取查询dom的元素
    1. DOM提供的API方法: getElementByld、getElementsByTagName古老用法不太推荐

    2.H5提供的新方法:querySelector、querySelectorAll提倡

    3.利用节点操作获取元素∶父(parentNode)、子(children)、兄(previousElementSibling.nextElementSibling)提倡

  DOM事件流
    事件流描述的是从页面中接收事件的顺序。
    事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。

  DOM事件流分为3个阶段∶
    1.捕获阶段
    2.当前目标阶段
    3.冒泡阶段

  事件冒泡︰IE最早提出,事件开始时由最具体的元素接收,然后逐级向上传播到到DOM最顶层节点的过程。
  事件捕获︰网景最早提出,由DOM最顶层节点开始,然后逐级向下传播到到最具体的元素接收的过程。

  什么是 BOM
    BOM ( BrowserObject Model )即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。
    BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
    BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。

  window对象是浏览器的顶级对象,它具有双重角色。
    1.它是JS访问浏览器窗口的一个接口。
    2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
    在调用的时候可以省略window,前面学习的对话框都属于window对象方法,如alert)、prompt()等。

  setTimeout()这个调用函数我们也称为回调函数callback普通函数是按照代码顺序直接调用。
    而这个函数,需要等待时间,时间到了才去调用这个函数,因此称为回调函威。简单理解︰回调,就是回头调用的意思。上一件事干完,再回头再调用这个函数。
    以前我们讲的element.onclick= function()}或者element.addEventListener("click" ,fn);里面的函数也是回调函数。

  JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互,以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。

  为了解决这个问题,利用多核CPU的计算能力,HTMLS提出 Web Worker标准,允许JavaScript脚本创建多个线程。于是,JS中出现了同步和异步。
  同步
    前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭,等水开了( 10分钟之后),再去切菜,炒菜。
  异步
    你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。

  同步任务
    同步任务都在主线程上执行,形成一个执行栈。
  异步任务
    JS的异步是通过回调函数实现的。一般而言,异步任务有以下三种类型:

    1、普通事件,如click、resize等

    2、资源加载,如load、error等

    3、定时器,包括setInterval、setTimeout等

  navigator 对象
    navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值N

  offset概述
    offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置偏移)、大小等。
    获得元素距离带有定位父元素的位置
    获得元素自身的大小(宽度高度)注意:返回的数值都不带单位

  mouseenter鼠标事件
·    当鼠标移动到元素上时就会触发mouseenter事件类似mouseover,它们两者之间的差别是
    mouseover鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter只会经过自身盒子触发

    之所以这样,就是因为mouseenter不会冒泡

    跟mouseenter搭配鼠标离开mouseleave同样不会冒泡

  节流阀
    防止轮播图按钮连续点击造成播放过快。
    节流阀目的:当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连续触发。核心实现思路:利用回调函数,添加一个变量来控制,锁住函数和解锁函数。
    开始设置一个变量var flag=true;
    lf(flag) {flag = false; do something}关闭城龙头
    利用回调函数动画执行完毕,flag= true打开水龙头

  触屏事件概述
    移动端浏览器兼容性较好,我们不需要考虑以前JS的兼容性问题,可以放心的使用原生JS书写效果,但是移动端也有自己独特的地方。比如触屏事件touch (也称触摸事件),Android和IOS都有。
    touch对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。

 

 

  触摸事件对象(TouchEvent )
    TouchEvent是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等
    touchstart、touchmove、touchend三个事件都会各自有事件对象。

 

 

  移动端拖动元素
    1.touchstart、touchmove、touchend可以实现拖动元素

    ⒉.但是拖动元素需要当前手指的坐标值我们可以使用targetTouches[0]里面的pageX和pageY

    3.移动端拖动的原理:手指移动中,计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离

    4.手指移动的距离:手指滑动中的位置减去手指刚开始触摸的位置
    拖动元素三步曲︰
      ( 1)触摸元素touchstart:获取手指初始坐标,同时获得盒子原来的位置

      (2)移动手指touchmove :计算手指的滑动距离,并且移动盒子

      ( 3)离开手指touchend:

  什么是插件
    移动端要求的是快速开发,所以我们经常会借助于一些插件来帮我完成操作,那么什么是插件呢?
    JS插件是js文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能且方便调用。如轮播图和瀑布流插件。特点∶它一般是为了解决某个问题而专门存在,其功能单一,并且比较小。
    我们以前写的animate.js 也算一个最简单的插件
    fastclick插件解决300ms延迟。使用延时
    GitHub官网地粘:https://github.com/ftlabs/fastclick

  Swiper 插件的使用
    中文官网地址:https://www.swiper.com.cn/

    1.引入插件相关文件。

    ⒉按照规定语法使用

  随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。
  本地存储特性
    1、数据存储在用户浏览器中

    2、设置、读取方便、甚至页面刷新不丢失数据

    3、容量较大,sessionStorage约5M、localStorage约20M

    4、只能存储字符串,可以将对象JSON.stringify)编码后存储

  jQuery 插件
    jQuery功能比较有限,想要更复杂的特效效果,可以借助于jQuery插件完成。
    注意:这些插件也是依赖于jQuery来完成的,所以必须要先引入jQuery文件,因此也称为jQuery插件。

    jQuery插件常用的网站:
      1. jQuery插件库http://www.jq22.com/

      2.jQuery之家http://www.htmleaf.com/

    

 

posted on   李子骞  阅读(172)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示