JavaScript基础

一个页面分成三个部分,结构,样式,行为。

HTML代表了页面的结构(骨架),CSS代表了页面的样式(皮肤),JavaScript代表了页面的行为(这种行为是被动的)。主动的行为需要一个大脑,后端作为我们的大脑替我们分析执行数据,执行行为,我们和大脑之间的联系AJAX(中枢神经)。

Paste_Image.png

1.JavaScript是什么,它能做什么?

对页面进行渲染,让页面有行为。让页面动起来;

Paste_Image.png

JavaScript简史

JavaScript在设计之初只是为了做表单验证的。但是现如今,JavaScript已经成为了一门功能全面的变成语言,已经是WEB中不可或缺的一部分,如今的JavaScript是一门既简单又复杂的语言,说它简单是因为学会它,几乎只要一个小时就可以了。但是如果你想要真正掌握它,需要几年的时间。

JavaScript发展

NetScape公司在1995年着手开发一种名为liveScript的脚本语言, 为了营销目的搭上当时媒体热炒的Java顺风车,临时更名liveScript为JavaScript。其实JavaScript和Java没有一点关系。JavaScript1.0获得巨大成功。

NetScape公司趁热打铁继续发布JavaScript1.1版本,使得Web获得更高的关注,同时奠定了自己在浏览器界的霸主地位。

如果事情一直这样下去那么NetScape可能依旧使我们现代浏览器的霸主,可是在1996年互联网巨头微软公司进入浏览器领域,推出JScript,和NetScape公司开始争夺霸主地位。

Paste_Image.png

最让人担心的问题也因此出现了,当时的JavaScript和JScript是完全不同的两个版本,这门语言没有一个标准存在,业内的担心(吐槽)日益加剧。终于,多方联合共同制定了一个标准,这个标准也就是ECMAScrip,ECMAScript作为各自JavaScript实现的基础。虽然制定标准只花费了几个月,但是这几个月却对未来20年的JavaScript发展起到了不可或缺的作用。

浏览器的发展经历了无数的坎坷,各个浏览器发现这块巨大的蛋糕后谁都不愿放弃,于是激烈的厮杀开始了。

第一次浏览器大战:

原始时期,微软发布了IE浏览器,和网景netSpace navigator大打出手,最后网景失败,将公司卖给AOL,核心团队全部离职,第一回合,微软获胜,netSpace昔日霸主陨落。

Paste_Image.png

但是NetScape并没有放弃,在1998年公开源码并重新命名为 Mozilla,并重写全部程序,在2002年发布了第一个浏览器版本,firefox登场。在2004年已经开始叫板IE浏览器,iE推出IE7与之抗衡,拉开了第二次浏览器大战的序幕。

第二次浏览器大战:

第二次浏览器大战不再是IE和FF的两家之争,在现代浏览器群雄并起,同时挪威的 Opera ,几乎所有的智能手机配备的都是这个浏览器,拥有全世界最快V8引擎的Chrom,以及苹果公司的Safari,全部加入浏览器争夺。至今战争还在进行,但是对于浏览器大战我们看到的结果大多是推进了浏览器的发展,为更好的用户体验做出了非常积极的贡献。

Paste_Image.png

JavaScript的组成
ECMAScript 、BOM 、DOM;

ECMAScript:这是一个标准,它规定了语法、类型、语句、关键字、保留字、操作符、对象。(相当于法律 )

Paste_Image.png

BOM(浏览器对象模型):可以访问浏览器窗口的的浏览器对象模型,对浏览器窗口进行操作。

Paste_Image.png

DOM(文档对象模型):DOM把整个页面映射为一个多层节点结构。HTML页面组成都是某种类型 的节点,这些节点又包含着不同类型的数据。

Paste_Image.png

如何写JavaScript程序?

script标签使用

<script></script> 

 src :  外联script 标签(立即调用,不能在该标签内写代码)
 
 <script>
     
      //在标签内书写内容     
 
 </script>

 <script  src='javascript.js'>// 这里面不能写任何内容</script>

一切准备就绪,让我们从Hello Word开始吧。

 document.write的使用 >>>> HelloWord    >>>  原样输出标签。
 
 注释 (一份好的代码,要有三分之二的注释)

 单行注释: // 要注释的内容。

 多行注释:/* 注释的内容写在这里 */ 

 原样输出标签内容

如果我想在页面中打印出:<strong>标签怎么办?

如果按照正常的打印方式进行打印,毫无疑问,标签会被浏览器解析。当我们要打印标签的时候要对对标签进行转义。

 &lt  代表 < 

 &gt 代表 >

 document.write('<strong>强大的</strong>');

变量(别称)
Paste_Image.png

他叫翠花,他是一只熊。
熊的底层是什么那? 熊皮、熊掌、熊骨...., 那我们每次呼叫这只熊的时候都要叫她什么?有一张熊皮,500公斤熊肉,第三块小脚趾骨断过的,那个玩意?
不!我们叫她翠花!这就是这只熊的别称!放在计算机里,这就是把这只熊塞入了一个叫做翠花的变量里。

怎么声明一个变量那?

关键字 var 变量名 a = '<strong>强壮的</strong>'

var 声明变量的底层原理:我们所写的程序运行在内存中,当我们使用关键字var 声明一个变量的时候,计算机会从内存中留出一定储存空间,为我们存放不同类型的内容。

分清左右两侧的意义:

 JavaScript中的 ‘’=‘’ 和我们数学中的 ‘’ = ‘’不一样,在JavaScript中‘’=‘’的作用是赋值(取别称)。 
   
 var a = '<strong></strong>';  这句话分成两个部分。

 左值:在等号左侧,是变量名(同时被赋值)
 
 右值 :在等号右侧,是存放进变量中的东西(给变量赋值)

变量的类型(因为存放进变量中的数据是放在内存中的,计算机只识别0,1,所以需要对不同类型的数据进行转义,转义的结果会导致所需空间不同,所以JavaScript中分成很多种数据类型,以便计算机储存时使用)

 数字类型(number):1234567890

 字符类型(string):'123456','字符串类型',.....(有单引号或者双引号)

 未定义类型(undefined):这是一种特殊类型,当变量被声明但是没有被赋值的时候,那么该变量的类型为undefined;

 布尔值类型:true,false;

 对象类型:object;

怎样直观地区分不同的数据类型那?

 一个关键字 typeof
 
 变量使用小技巧: 声明一串变量:var a=1,b=2,c=3;(不推荐初学者使用这样的变量声明方式,因为这样的变量声明方式会导致注释不明确。)

 变量命名规范:(匈牙利命名法:驼峰命名法)

为什么要存在命名规范那?

 你的代码并不是只有你一个人看,变量既然是别称,那么别称就要有特殊的含义:
 举个栗子:翠花,我们能从这个名字中得到什么信息那?
(这个名字的主人性别应该是女的,家中父母的一个美好愿景);

我们从这些名字中能够读出很多的含义,是因为我们的语言常识,同样,变量也有一套类似的标准,代表了各种各样的含义,这些含义如下:

Paste_Image.png

第二个规则:

开头必须为字母或者$ 或 _

想要用break作为变量可不可以那?

关键字:

这些关键字用于执行特定操作等。按照规则,关键字也是语言保留的,不能用作标识符。

Paste_Image.png

保留字:未来可能作为,标识符存在。

Paste_Image.png

alert()方法

alert()使用 。 停止浏览器加载代码。

浏览器解析代码顺序。(从上到下,从左到右);

逻辑运算符:

 var a=1,b=2;

a+b=3 

a - b=-1 

a * b=2

a / b=0.5

 a % b=1


    var  a='1', b='2';

                      a * b=2 ;

    a / b=0.5;

    a - b=-1;

    a + b =???

不同:和我们概念里的逻辑运算符很多都是不一样的。

  • = == === 这些都不一样。

避免问题出现(一眼就看出来了):

让计算机告诉我:typeof 关键字;(数据类型的检测,意义在于确认是否能够被使用);

编程习惯:分号,虽然不加分号在JavaScript语法上没有问题,但是建议不要省略分号,加了分号之后可以用软件压缩。良好的变成习惯(JavaScript权威指南)上的理由。

浮点数:

你的电脑做着正确的二进制浮点运算,但问题是你输入的是十进制的数,电脑以二进制运算,这两者并不是总是转化那么好的,有时候会得到正确的结果,但有时候就不那么幸运了;

alert(0.7+0.1); //输出0.7999999999999999

类型转换:alert(0.6+0.2); //输出0.8;

       var a=3,b='10',c=true;

    alert(a+b);

    alert(b+c);

    alert(a+c);

运算结果好像并不是我们想要的:应该怎么办那?当我们想做数学运算的时候,应该先对所有的数据类型进行统一(统一成数字格式),这时候我们就该用到数据类型的转换。

 数据类型转换方法:

 parseInt();

 parseFloat();

我们尝试一下数据转换的结果:

认识NaN:他是一种特殊的Number类型结果,代表意外转换的数字,NaN和任何东西都是不等的。

关于浮点数:Math.round()四舍五入取整浮点数。

赋值操作:(JavaScript中存在非常多的简写)

  var a=1;

  a=a+1;

  a+=1;

  alert(a)

这些当然还包括 -= 、*=、/=、%=

这些赋值操作符的结果都是什么?

一个更简便的写法 a++ ; a - -;
本文作者祈澈姑娘,转载请标明作者和文章出处,创作不易。

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

推荐阅读更多精彩内容

  • 转载请声明出处 博客原文 随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧 第一课...
    程序员poetry阅读 12,645评论 13 94
  • JavaScript 来了 1995年,诞生了JavaScript语言,那一年,我刚刚从大学毕业。在今年RedMo...
    abel_cao阅读 1,976评论 2 54
  • 每天一句:没有方向感,我们不知道自己走向哪里。没有方向感,我们所有的努力就缺乏一个标准,我们每时每刻所有的努力都处...
    EndEvent阅读 628评论 0 2
  • JavaScirpt变量 JavaScript 变量名称的规则: 应该起一些具有意义的,描述性的,让人望文生义的变...
    zyh9212阅读 356评论 0 0
  • 1.HTML DOM (Document Object Model) document.getElementByI...
    廖马儿阅读 1,409评论 0 17