每天3小时学前端之JS-第01天-初识JS

初识JS

标记语言与编程语言

跟之前学过的HTML和CSS不同,JavaScript才算是一门真正意义上的编程语言

标记语言:由标记(标签/元素)标记属性等简单的见名知意的符号,来代表不同的布局单元来组织网页。

编程语言:具有变量逻辑判断循环等编程语句必须具备的语法规范等。

计算机编程语言

语言是用来交流的工具,人类语言是人与人之间交流的工具。

计算机的语言世界里只有二进制的0和1。和十进制只有0到9十个数字一样,二进制就只有0和1,十进制里面是逢十进一,二进制里面则是逢二进一。所以二进制里面是不可能出现大于1的数字的。

JS属于编程语言里面的高级语言低级语言如:汇编语言。越高级就越接近人类可以读懂的语言,越低级就越接近机器语言(二进制语言)。

高级语言转化成机器可以识别的二进制语言有两种办法:

整体编译:通篇翻译,生成二进制文件,犹如直接念翻译好的英文文章。

逐行翻译:需要解释器进行实时翻译,犹如同声传译。

编译型语言和解释型语言

JS是解释型语言,JS需要在浏览器(宿主环境/解释器)中运行

编译性:在执行前先将代码编译成计算机可以识别的二进制文件,比如C、C++、Golang会先编译生成.exe文件,后续执行就不用再编译了,直接运行这个二进制文件就可以了。

优点:编译好即可使用,不需要运行环境或解释器

缺点:可移植性差,因为每个平台(操作系统)能理解的二进制文件可能不同,需要重新编译(如windows下需要编译成.exe文件,linux下需要编译成.erp文件)。

解释性:执行代码前不用编译,而是在运行代码的时候逐行去解释执行,所以需要解释器,比如浏览器。

优点:可移植性好,只需各个平台(操作系统)配有该语言的解释器即可,如js、php、python

缺点:速度慢,需要不断的进行读代码和解释之间的来回切换,切换的过程也是需要消耗性能和时间的

运行解释执行运行解释执行源文件windows下浏览器实现功能Linux下浏览器

可以看出js运行的时候有浏览器作为宿主环境,进行承载,这样就使得语言与机器之间又多了一层,也是js为什么被称作高级语言的原因

脚本语言JS

早期的JS只是作用浏览器的客户端进行表单验证的语言。其目的是为了提高用户体验

没有JS的表单验证

浏览器服务器请求验证1表单信息需要通过缓慢的网络传递表单数据验证不通过,请重新填写!返回验证结果2验证通过,注册成功!验证表单信息浏览器服务器

有JS的表单验证

浏览器服务器请求验证1表单信息不需要通过网络传递表单数据验证不通过,请重新填写!返回验证结果2验证通过,注册成功!验证表单信息浏览器服务器

JS语言历史简介

ECMA:European Computer Manufacturers Association(欧洲计算机制造商协会)

TC39:ECMA的第39号技术专家委员会(Technical Committee 39,简称TC39)负责制订ECMAScript标准

ECMAScript 标准:是一种由ECMA组织TC39专家委员会通过的ECMA-262的脚本程序设计语言标准。俗称JavaScript。ECMAScript可以理解为是JavaScript语法的标准规范,所以JavaScript是ECMAScript标准的实现。

1997年7月,ECMA 组织发布262号标准文件(ECMA-262)的第一版,ECMAScript 1.0 版发布。

1998年6月,ECMAScript 2.0 版发布。

1999年12月,ECMAScript 3.0 版发布。

2007年10月,ECMAScript 4.0版草案发布,由于4.0版的目标过于激进,各方发生了严重分歧。

2008年7月,ECMA开会决定,中止了ECMAScript 4.0的开发,废除了ECMAScript 4.0这个版本。 将其中涉及现有功能改善的一小部分,发布为 ECMAScript 3.1。会后不久,ECMAScript 3.1 就改名为 ECMAScript 5。

2009年12月,ECMAScript 5.0 版 正式发布。

2015年6月,ECMAScript 6 正式发布,并且更名为“ECMAScript 2015”。俗称:ES6

TC39 委员会计划,以后每年发布一个 ECMAScript 的版本,以年号命名,2016年发布“ECMAScript 2016”,2017年发布“ECMAScript 2017”,以此类推。

JS语言构成

ECMAScript、DOM、BOM

ECMAScript:语法、类型、语句、关键字、保留字、操作符、全局对象

文档对象模型(DOM):将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(比如增删内容)。

浏览器对象模型(BOM):浏览器窗口大小、位置,页面地址,历史记录等

浏览器组成部分

后来单独分离出来渲染引擎JS引擎shell操作界面浏览器内核其他

五大浏览器内核引擎

浏览器渲染引擎JS引擎

ChromeWebkit/BlinkV8

FirefoxGeckoSpiderMonkey

SafriWebkitjavascriptcore

IETridentChakra

OperaPrestoCarakan

语法基本了解

JS可编写位置

在script标签内部直接嵌入代码。

多个script标签的报错不会相互影响

通过script标签的src属性加载外部脚本

带有src属性的script标签内部的代码将会被忽略

事件属性

网页元素的事件属性(比如onclick和onmouseover),可以写入js代码。当指定的事件发生时,就会调用js代码。

<button onclick="console.log('按钮被点击了!')">点击</button>

URL 协议

URL 支持javascript:协议,即在 URL 的位置写入代码,点击这个URL的时候就会执行 js代码。

<a href="javascript:console.log('a链接被点击了!')">点击</a>

script标签

属性

type:定位引用文件的类型,一般省略

text/javascript(老版本)

application/javascript(新版本推荐)

src:指定引用文件的路径

并行加载js代码的两个属性

defer:并行加载外部js代码,等待页面渲染完成再执行外部js代码

async:并行加载外部js代码,外部js加载完成立即执行外部js代码

不加以上两个属性(defer或async)的话,外部js代码会直接按所写位置执行,执行完外部js代码之后,再接着往下渲染页面

参考文档:MDN

输入输出语句

console.log:控制台输出

document.write:页面输出

alert:浏览器弹出

prompt:接收输入值

confirm:返回一个布尔值,如果用户点击“确定”,返回true;如果用户点击“取消”,则返回false。

注释

单行注释://

多行注释:/**/

分号

可以省略,有些情况要注意,后续讲解

空格与换行

空格与换行不是语法的一部分

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容

  • 初识javascript 引导 主要内容: 学习目标: 节数知识点要求 第一节(js的前世今生)js简介了解 第二...
    一纸油伞阅读 183评论 0 0
  • 学习目标: 节数知识点要求第一节(js的前世今生)js简介了解第二节(js的语法结构)页面引入js的几种方式了解j...
    yy666777阅读 194评论 0 0
  • PS:先放一个非常适合学习的JS入门教程,今天先根据教程,简单唠唠JS的历史。 JavaScript 教程​wan...
    长鲸向南阅读 215评论 0 2
  • 引导 学习目标: 节数知识点要求第一节(js的前世今生)js简介了解第二节(js的语法结构)页面引入js的几种方式...
    yy666777阅读 236评论 0 0
  • 我是黑夜里大雨纷飞的人啊 1 “又到一年六月,有人笑有人哭,有人欢乐有人忧愁,有人惊喜有人失落,有的觉得收获满满有...
    陌忘宇阅读 8,531评论 28 53