Skip to content

Latest commit

 

History

History
448 lines (324 loc) · 22.6 KB

1.编程语言是什么.md

File metadata and controls

448 lines (324 loc) · 22.6 KB
Raw

知识点：

一、编程语言是干什么的？
二、javascript由哪些部分组成？
三、HTML中怎么使用javascript?
四、变量的定义和储存值的类型判断
五、面试题

一、编程语言是干什么的？用来做哪些事？

编程语言是处理数据或按照某种逻辑来处理数据的，而数据是程序里最基本的“生产生活资料”，比如1,2,3，“abscd”,true，false，[]，Function等，数据是任何编程语言的基础；无论什么编程语言，最先学习的就是数据类型和数据；

二、javascript是由哪些部分组成的？

一个完整的javascript实现应该有下列三个不同部分组成：

  • 核心(ECMAScript)：提供核心语言功能；
  • 文档对象模型(document object model 简称DOM)：提供访问和操作网页内容的方法和接口；
  • 浏览器对象模型(broser object model 简称 BOM)：提供与浏览器交互的方法和接口；
1、核心部分：

WEB浏览器只是ECMA的宿主环境之一，也可以不依赖浏览器，比如宿主环境可能还包括Node和Adobe Flash； ECMAScript规定了Javascript这门语言的组成部分；主要规定了语法、类型、语句、关键字、保留字、操作符、对象；

2、DOM部分

文档对象 模型把整浏览器页面映射为一个多层节点结构，页面中每个组成部分都是某种类型的节点，这些节点又包含了不同类型的数据；

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="UTF-8">
          <title>这是显示在浏览器选项卡上的文字标题</title>
      </head>
      <body>
        <div id="page">您好啊，我是HTML</div>
      </body>
      </html>

HTML页面，通过DOM可以看成树形图，借助DOM提供的API，可以轻松的增删改查；下面是几个标签的层级关系

<!DOCTYPE html>
<html>
  <head>
    <!--meta标签是head的儿子，是title的哥哥-->
    <meta charset="UTF-8">
    <!--titles head的儿子，是meta的弟弟-->
    <title>这是显示在浏览器选项卡上的文字标题</title>
  </head>

  <!--body标签是html的儿子，是head的弟弟，是id=page这个div的父亲-->
  <body>
    <!--div标签是body的儿子-->
    <div id="page">您好啊，我是HTML</div>
  </body>
  <!--html是head和body的父亲-->
</html>

DOM的几个级别的介绍；DOM目前分为三个级别；DOM1级，DOM2级，DOM3级；

  • DOM1级：是很早以前成为W3C标准的，由DOM核心和DOM HTML两部分组成，DOM核心规定是如何映射基于XML的文档结构，以便简化对文档中任意部分的访问和操作；DOM HTML模块则在DOM核心的基础上加以扩展，添加了针对HTML的对象和方法；主要目标是映射文档的结构；

  • DOM2级：在原来的DOM1级基础上扩充了鼠标和用户界面事件等；主要包括DOM视图，DOM事件、DOM样式、DOM遍历和范围；

  • DOM3级：引入了以统一方式加载和保存文档的方法（在DOM加载和保存模块中定义）；新增了验证文档的方法（在DOM验证模块中定义）；DOM3级也对DOM核心进行了扩展，开始支持XML1.0，涉及XML infoset，Xpath和XML Base。

    3、BOM部分；

BOM最蛋疼的部分是没有统一的标准；从根本上讲BOM只处理浏览器窗口和框架；主要有

  • 弹出新浏览器窗口的功能；
  • 移动、缩放和关闭浏览器窗口的功能；
  • 提供浏览器详细信息的navigator对象；
  • 提供浏览器所加载页面的详细信息的location对象；
  • 提供用户显示器分辨率详细信息的srceen对象；
  • 对cookies的支持；
  • 像XMLHttpRequest和IE的ActiveXObject这样的自定义对象；
  • 有了HTML5后，DOM实现的细节有望朝着兼容性越来越高的方向发展；

JavaScript中我们学的所有的知识点其实都是基于浏览器内置类实现的，这也说明了js是由一个个类组成的，而我们要学习的就是类、实例的关系和类上面的私有或者公有的属性或者方法---这就是我们经常听到的面向对象编程

↑ 返回目录

三、HTML中怎么使用javascript?

  • 1、行内使用Javascript
  • 2、嵌入式；
  • 3、外联式；
1、行内使用Javascript介绍；

最常用的就是在a标签的href上使用Javascript:;

<a href="javascript:;">链接ZAB</a>

这段代码，就是当点击连接[链接ZAB]的时候，没有任何反应；这是最常用的行内Javascript用法；

如果需要使用点击链接弹窗文字；可以如下的写法；

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
	<div id="div1">
	    <a href="javascript:;">链接ZAB</a>
	    <a href="javascript:;" onclick="alert('这是一段测试代码')">有弹窗的链接</a>
	</div>
  <script>
  function zab(){
    alert("这是一段测试代码")
  }
  </script>
  </body>
</html>

这时候点击连接有弹窗的链接的时候，就会弹窗"这是一段测试代码"的消息提醒；行内使用Javascript的方法，不推荐大家使用，不易维护 ；

2、嵌入式是直接写在HTML页面中的；

下面的，绑定事件的，就是嵌入式的写法；

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<div id="div1">
    <a href="javascript:;" onclick="zab()">222</a>
</div>
<div id="div2">
    <a href="javascript:;">链接ZAB</a>
    <a href="javascript:;">有弹窗的链接</a>
</div>

<script>
    var oDiv=document.getElementById("div2");
    oDiv.onclick=function(){
        zab();
    };
    function zab(){
        alert("这是一段测试代码")
    }
</script>
</body>
</html>
3、外联式；

通过script的src属性引用一个文件；关于script的标签位置，按照传统的做法，是写在head元素中；这种做法的目地是把所有外部文件(CSS,JS)的引用都放在相同的地方；可是如果放在顶部；HTML加载的时候，是从上到下依次解析的；页面加载很多HTL的时候，就会堵塞后面的DOM节点加载；导致页面呈现的内容出现延迟，而延迟七剑浏览器窗口将是空白的；为了避免这个问题，现在的WEB一般是全部javascript都放在之前； 还有一点需要注意的，如果放在head中，直接获取元素的时候，是获取不到的;比如获取ID，就是获取不到的；需要做延迟加载才好

  <!doctype html>
  <html>
  <head>
      <meta charset="UTF-8">
      <title>Document</title>
  </head>
  <body>
  <div id="div1">
      <a href="javascript:;">链接ZAB</a>
      <a href="javascript:;">有弹窗的链接</a>
  </div>
  </body>
  <!--嵌入式-->
  <script>
      var oDiv=document.getElementById("div1");
      oDiv.onclick=function(){
          zab();
      };
      function zab(){
          alert("这是一段测试代码")
      }
  </script>
  <!--外链式-->
  < script src="./jquery.js"></script>
  < /html>

所有的javascript会按照它在页面中的顺序来依次解析；一般写在页面内容的后面，推荐放在前，因为放在body前可以通过W3C的校验，如果不为W3C校验，放在后面也是没问题的；

关于行内写JS；

项目中，很少会遇到行内写JS的，工作中我只在给wifi组做技术支撑的时候见到过这么写的；当时他们的wifi管理页面，用luci lua 一个开源项目修改的，页面的HTML CSS,JS是直接渲染出来的，里面的CSS,JS大都是行内写的，维护起来真的太坑了；我在写JS的时候，把需要我写的JS代码和模块，全部外链式引导页面，把CSS，JS和他们lua代码分开；不和他们的代码掺合在一起，否则以后维护起来就太蛋疼了；

嵌入式与外链式的区别？

在HTML中嵌入javascript代码虽然没有问题，但是一般认为最好的做法还是尽可能使用外部文件来包含javascript代码，不过，并不存在必须使用外链式的规定；但外链式的优点如下

  • 维护性好：JS代码和HTML代码混在一起，维护的时候需要改动HTML页面，而现在为了专注和分工明确，基本都是前后端分离的做法；页面输入都是后端的页面；如果是外链式的，只需要维护自己的JS文件即可，不需要接触HTML文件；

  • 可缓存：浏览器能够具体的设置缓存连接的所有javascript文件，也就是说如果两个页面都使用同一个文件，那么这个文件只需要下载一次，最终结果就是能够加快页面加载的速度（每次上新的时候，修改时间戳即可，）；

    a.xxx.com/project/test.js?t=2016101301 （?t=2016101301 就是时间戳）

  • 适用未来：XHTML和HTML文件会出现javascript代码解析方面的差异；因为外链式不需要接触XHTML/HTML所以不存在这些问题； 注意，在使用嵌入式写法的时候，不要标签内任何地方都不要出现< script >的字符串；即使是alert，console.log这些输出；如果需要用，请使用转移字符"/"来解决；

HTML外部资源引入
  • href: hypertext reference
  • src: source

href 用于标示资源和文档关系,src 用于替换标签内容

<img src="xxx.jpg"/>
<script type="text/javascript" src="xxx.js"></script>

<a href="http://www.baidu.com">百度</a>

** 为什么 style不用src**

至于说为什么当初就决定外部样式表用link href来链接，而不是用style src来载入，可能是因为第一批互联网人认为样式表更符合外部链接资源的特征，它更接近附属的资源，而不是内嵌的内容。比如考虑alternate stylesheets，在同一时间只需要链接一组样式表，而不是载入所有。当然你可以简单的归结为历史遗留（也就是当初某个浏览器开发者的一个偶然决定导致）。这是一个扯淡的问题，制作标准的人不是中国人，是老外；

** 其它的一些意外**

有些名词是中国第一批程序员，翻译的问题；最明显的一个名次[上下文]，就是代码所在的执行环境，英文

context，这个应该翻译成[代码运行环境] 才更符合语义，但是第一批互联网人翻译成中文书，都这么写，然后我们这些小辈们为了统一，也都这么叫了；

在HTTP协议的知识里，有一个叫HTTP Referer的；属于请求头（header）的一部分，当浏览器向web服务器发送请求的时候，一般会带上Referer，告诉服务器我是从哪个页面链接过来的，服务器籍此可以获得一些信息用于处理。

比如从我的博客链接到一个朋友那里，他的服务器就能够从HTTP Referer中统计出每天有多少用户点击我主页上。链接访问他的网站，以前自己倒腾过网站的朋友，在百度统计,55LA统计之类的，会有这方面的统计信息供查看；

这里的Referer其实应该是英文单词referrer，也不知道是拼错的人太多了导致标准跟着拼错，还是编写标准的人拼错了，开发者讲错纠错，反正现在的情况就都写成HTTP Referer了，只能将错就错的写了。历史遗留问题，无解的；

noscript的思路；

从noscript标签引深出的两种编程思想（优雅降级、渐进增强）

在一些页面不支持javascript或者javascript被禁用的时候；script标签内的内容是失效的，这个时候会显示noscript；

  <!doctype html>
  <html>
  <head>
      <meta charset="UTF-8">
      <title>Document</title>
  </head>
  <body>
  <script src="./jquery.js"></script>
  <noscript>
      <p>你这么牛逼，咋不上天呢，连Javascript都禁用，赶紧回家种田去吧</p>
  </noscript>
  < /body>
  < /html>

上面的noscript在启用脚本的浏览器中，用户也看不到，但是禁用的时候，会出现；这也牵扯到一个优雅降级的编程思想，后面会有介绍；

为了适用不同的版本，前端开发的时候，一般会有两个思路:

  • 优雅降级，
  • 渐进增强；

优雅降低，就是按照支持度最高的浏览器标准来写代码，一般是以chrome为准，对于技术支持较旧的浏览器，只要不影响使用都可以不处理（比如圆角效果），如果有功能方面在低版本无法正常，就做低版本的兼容，比如兼容到IE6；我自己走的路线是优雅降级；

渐进增强，是以技术支持最低的浏览器为准，假设以IE6为准(如果兼容到IE8，就以IE8为准)，写的代码在IE6/8中没问题后，在补充一些高级浏览器支持的效果；

广义来说，其实要定义一个基准线，在此之上的增强叫做渐进增强，在此之下的兼容叫优雅降级。这个基准线对于我，是允许使用javascript、cookie和css的IE8浏览器。不过狭义而言，渐进增强一般说的是使用CSS3技术，在不影响老浏览器的正常显示与使用情形下来增强体验，而优雅降级则是体现html标签的语义，以便在js/css的加载失败/被禁用时，也不影响用户的相应功能。

#####CSS3中的方案

.transition { /渐进增强写法/ -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s;
} .transition { /优雅降级写法/ transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; }

推荐第一种写法[渐进增强]；写transition可能看不出两种写法的区别；看下多个属性的时候的border-radius

    .test-one {
        width: 500px;
        height: 300px;
        background-color: #37C7D4;
        border-radius: 30px 10px;
        -webkit-border-radius: 30px 10px;
    }
    .test-two {
        width: 500px;
        height: 300px;
        background-color: #d46c4d;
        -webkit-border-radius: 30px 10px;
        border-radius: 30px 10px;
    }

上面是在chrome测试的两种不同写法；

我想要的是让box左上和右下角为30像素圆弧，左下角和右上是10像素圆弧。

CSS3 前缀 o webkit moz ms 分别对应不同的内核；

  • -moz-对应 Firefox,
  • -webkit-对应 Safari and Chrome
  • -o- for Opera（记忆中，在一篇国外的文档上看到，欧朋是没有明确用 -o 这个前缀的，把他写上是为了向后兼容，适应未来；现在一时翻不到那篇文章了，感兴趣的可以多了解下）
  • -ms- for Internet Explorer

CSS不是我研究的重点，所以就不多提了；

  • 在写CSS3的时候，推荐渐进增强；
  • 在写JS的时候，推荐优雅降级；
script标签的属性：

script是属性有async，defer，charset，languge，src，type六个；一般常用的就是src，type；而且type是属于可忽略的属性，推荐不写；

javascript的文档模式；

分为普通模式和严格模式，正常的都是普通模式，严格模式是解决javascript本身的语法问题；

  • 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
  • 消除代码运行的一些不安全之处，保证代码运行的安全；
  • 提高编译器效率，增加运行速度；
  • 为未来新版本的Javascript做好铺垫。

进入严格模式的方式，加入"use strict";字符串就可以了；在js文件全局放，就是全部严格模式；在function内放，就是当前的方法是严格模式；一般我们都是用普通模式；

ES6

ECMAScript 是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言,解决了一些ES5中代码不严谨的规则；

但是遗憾的是现在即时你写ES6，也需要babel之类的转码器转成ES5，否则浏览器会报错；

要学习Javascript，ES5是必须会的，如果ES5的基础打的好，ES6一个礼拜就熟练入手了，因为他是ES6是基于ES5的改变，你知道其中的原理后，很容易过渡，现在浏览器也没有全面支持，你有大把的时间研究ES5，ES5才是根基，等ES6,ES7全面普及了，你可以分分钟上手新版本的；

↑ 返回目录

四、变量的定义和储存值的类型判断：

英文全称是variable，定义变量是关键字就是var；

JavaScript中变量是数据的名字，是数据的代名词（类似于别名）；

var a=5; var b="hello word"; var c=true;

变量类型是由分配数据时候决定的（赋值后才决定的），所谓的变量类型，其实就是数据类型；

先了解下JS中的数据类型:

  • 基本数据类型 　　> number、string、boolean、null、undefined

  • 引用数据类型 　　> object : {}、[]、/^$/、Date 特殊的Function

数据和数据类型是学编程的第一件事；JavaScript的数据类型相比别的语言比较简单；

一种编程语言里面的数据分为多少种类似，是由这种语言的作用决定的，最直接的就是这种语言需要解决什么问题？

（sql和java等语言的数据类型就比js的复杂些；他们是很多应用场景在于银行和财产方便，偏底层的；所以更精确一些；而JS的应用场景主要是在浏览器/通过nodeJs也可以应用在服务端）

最简单的检测数据类型的方式是通过typeof的方式来检测； typeof 后面加所需要判断的数据或者变量即可；

Javascript中，变量名代表的值是可以随便修改的；

var aaa=2;
console.log(typeof aaa);//number
aaa="222";
console.log(typeof aaa);//string
aaa=true;
console.log(typeof aaa);//boolean
aaa=null;
console.log(typeof aaa);//object
aaa=function(){};
console.log(typeof aaa);//function
aaa={"name":"test"};
console.log(typeof aaa);//object
强类型和弱类型语言的区别；
  • 强类型是数据定义时候就确定数据类型的，以后是不可以修改的，而且变量在计算机中分配的储存空间是固定的；比如a为数字1；后面就不可以修改成abc这种字符串类型；
  • 弱类型的语言，比如js是可以任意修改的；是先占一个位置，但是不分配数据类型的大小，赋值数据的时候再用，不事先准备，只准备凳子，胖的就挤一挤，瘦子就多占点；占位置和做位置分开的；变量的声明和变量的赋值是分开的；JS中的变量只是准备的不充分，但是也有准备的；就牵扯到预解释，在预解释那章会详细介绍；
小结：
  • 强类型语言，在变量创建的时候，就强制要求声明类型；而弱类型语言就显得很随意；
  • 强类型的语言中，变量类型是事先指定的；
  • 弱类型的语言中，变量的类型是赋值后根据值来决定的，赋什么样的值，就决定了变量是什么类型；
什么是面向对象编程

编程语言是处理数据或按照某种逻辑来处理数据的，而数据是程序里最基本的“生产生活资料”，比如1,2,3，“abscd”,true，false，[]，Function等，数据是任何编程语言的基础；无论什么编程语言，最先学习的就是数据类型和数据；

平时经常会听到面向对象编程；

其实这个属于很广泛和宏观的观点；我个人认为面向对象编程是以世界作为基点；自然界中万物皆对象，对象又分为很多类，我们生存的自然界中存在人类、动物类、植物类等很多类，而人又属于人类中的一个个体，人与人共同组成了人这个”类”，每个人都继承了人类这个特征；但是每个人所拥有的特征都是不相同的，好比我们每个人都继承了人类这个类所拥有的一个鼻子两只手的属性，但是我的两只手虽然和你的双手都是继承同一个类，但并不能说我的手就是你的手，这牵扯到继承，多态，封装等概念；

而编程语言在进行编程的时候，是以上帝的角度来进行从0到有的创造；为了方便管理我们创造的事务，我们可以按照类进行划分；可以模拟自然界中的对象，类，实例的概念；所以我认为所谓的面向对象式编程，其实就是把自己当作上帝，在编程语言中，进行万物的创造；每种编程语言在成立之处，都喜欢输出一句”hello word”这个简单的输出就是向大家分享创造世界的喜悦，程序员通过编程语言，以上帝的身份说一句”世界，你好！”就是面向对象最简单粗暴的表现；

后面在面向对象的方式和继承方法里，会以javascript这种编程语言具体的深入探讨，当然那时候会说编程的事，就不这么扯淡了；感觉脱离编程语言，脱离代码的方式说这玩意，就好像是在一本正经的吹牛逼，还是后面以代码的方式具体说把；

Javascript代码初识；认识下javascript的代码风格；

  var num = 12;//普通数据类型，Number类型
  var obj = {name: "朱安邦", age:26};//引用数据类型，Object
  //下面是Function，属于Object类；
  function fn() {
    console.log("我的名字叫朱安邦~~");
  }
  console.log(fn);//->把整个函数的定义部分(函数本身)在控制台输出
  console.log(fn());//->把当前函数执行的返回结果(return后面写的是啥,返回值就是啥,如果没有return,默认返回值是undefined)

总结: 1、js由3部分组成；

ECMAScript（核心）、DOM（文档对象模型）、BOM（浏览器对象模型）

2、js有三种引用方式;

推荐使用外链式，使用外链式的时候，src必须指向一个js文件，(如果服务器支持，.js这种后缀可以省略，为了规范，一般不推荐省略；)src可以引用本服务器的文件，也可以用其它任何域的文件；

3、所有的javascript会按照它在页面中的顺序来依次解析；一般写在页面内容的后面，推荐放在前，因为放在body前可以通过W3C的校验，如果不为W3C校验，放在后面也是没问题的；

4、如果为了提醒用户开启javascript，可以用noscript标签来提示，一般不需要写；

5、变量的初识

↑ 返回目录

五、面试题：

  • 01-01-01、js中有几种数据类型？
  • 01-01-02、如果知道一个变量的数据类型？

↑ 返回目录