转载请标明出处!
 
JavaScript概述
 
     一个页面分成三个部分,结构,样式,行为   
     
     HTML代表了页面的结构(骨架),CSS代表了页面的样式(皮肤),JavaScript代表了页面的行为(这种行为是被动的)。主动的行为需要一个大脑,后端作为我们的大脑替我们分析执行数据,执行行为,我们和大脑之间的联系AJAX(中枢神经)。这个就是我们这个阶段要学习的内容。
 
 
     1.JavaScript是什么,它能做什么?
 
     对页面进行渲染,让页面有行为。让页面动起来;
 
     
 
 
    JavaScript简史
 
    JavaScript在设计之初只是为了做表单验证的。但是现如今,JavaScript已经成为了一门功能全面的变成语言,已经是WEB中不可或缺的一部分,如今的JavaScript是一门既简单又复杂的语言,说它简单是因为学会它,几乎只要一个小时就可以了。但是如果你想要真正掌握它,需要几年的时间。
 
     JavaScript发展:
 
     NetScape公司在1995年着手开发一种名为liveScript的脚本语言, 为了营销目的搭上当时媒体热炒的Java顺风车,临时更名liveScript为JavaScript。其实JavaScript和Java没有一点关系。JavaScript1.0获得巨大成功。
     NetScape公司趁热打铁继续发布JavaScript1.1版本,使得Web获得更高的关注,同时奠定了自己在浏览器界的霸主地位。
     如果事情一直这样下去那么NetScape可能依旧使我们现代浏览器的霸主,可是在1996年互联网巨头微软公司进入浏览器领域,推出JScript,和NetScape公司开始争夺霸主地位。
 
 
 
 
     最让人担心的问题也因此出现了,当时的JavaScript和JScript是完全不同的两个版本,这门语言没有一个标准存在,业内的担心(吐槽)日益加剧。终于,多方联合共同制定了一个标准,这个标准也就是ECMAScrip,ECMAScript作为各自JavaScript实现的基础。虽然制定标准只花费了几个月,但是这几个月却对未来20年的JavaScript发展起到了不可或缺的作用。
 
     浏览器的发展经历了无数的坎坷,各个浏览器发现这块巨大的蛋糕后谁都不愿放弃,于是激烈的厮杀开始了。
 
     第一次浏览器大战:
 
     原始时期,微软发布了IE浏览器,和网景netSpace navigator大打出手,最后网景失败,将公司卖给AOL,核心团队全部离职,第一回合,微软获胜,netSpace昔日霸主陨落。
 
 
     但是NetScape并没有放弃,在1998年公开源码并重新命名为 Mozilla,并重写全部程序,在2002年发布了第一个浏览器版本,firefox登场。在2004年已经开始叫板IE浏览器,iE推出IE7与之抗衡,拉开了第二次浏览器大战的序幕。
 
    第二次浏览器大战:
     
     第二次浏览器大战不再是IE和FF的两家之争,在现代浏览器群雄并起,同时挪威的 Opera ,几乎所有的智能手机配备的都是这个浏览器,拥有全世界最快V8引擎的Chrom,以及苹果公司的Safari,全部加入浏览器争夺。至今战争还在进行,但是对于浏览器大战我们看到的结果大多是推进了浏览器的发展,为更好的用户体验做出了非常积极的贡献。
 
    
     
    JavaScript的组成
 
     ECMAScript 、BOM 、DOM;
 
     ECMAScript:这是一个标准,它规定了语法、类型、语句、关键字、保留字、操作符、对象。(相当于法律 )
 
 
     BOM(浏览器对象模型):可以访问浏览器窗口的的浏览器对象模型,对浏览器窗口进行操作。
          
     
 
     DOM(文档对象模型):DOM把整个页面映射为一个多层节点结构。HTML页面组成都是某种类型的节点,这些节点又包含着不同类型的数据。
 
     
    如何写JavaScript程序?
 
    script标签使用
 
    <script></script> 
 
     src :  外联script 标签(立即调用,不能在该标签内写代码)
     
     <script>
         
          //在标签内书写内容     
     
     </script>
 
     <script  src='javascript.js'>// 这里面不能写任何内容</script>
 
    一切准备就绪,让我们从Hello Word开始吧。
     
     document.write的使用 >>>> HelloWord    >>>  原样输出标签。
     
     注释 (一份好的代码,要有三分之二的注释)
 
     单行注释: // 要注释的内容。
 
     多行注释:/* 注释的内容写在这里 */ 
 
    
     原样输出标签内容
          
     如果我想在页面中打印出:<strong>标签怎么办?
     
     如果按照正常的打印方式进行打印,毫无疑问,标签会被浏览器解析。当我们要打印标签的时候要对对标签进行转义。    
      
     &lt  代表 < 
 
     &gt 代表 >
 
     document.write('&lt;strong&gt;强大的</strong>');
 
    变量(别称)
     
     
 
     他叫翠花,他是一只熊。
 
     熊的底层是什么那? 熊皮、熊掌、熊骨....,  那我们每次呼叫这只熊的时候都要叫她什么?有一张熊皮,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;(不推荐初学者使用这样的变量声明方式,因为这样的变量声明方式会导致注释不明确。)
 
     变量命名规范:(匈牙利命名法:驼峰命名法)
 
     为什么要存在命名规范那?
 
     你的代码并不是只有你一个人看,变量既然是别称,那么别称就要有特殊的含义:
 
     举个栗子:翠花,我们能从这个名字中得到什么信息那?(这个名字的主人性别应该是女的,家中父母的一个美好愿景);
     
     那么钢蛋那?
 
     我们从这些名字中能够读出很多的含义,是因为我们的语言常识,同样,变量也有一套类似的标准,代表了各种各样的含义,这些含义如下:
     
 
     
     
     第二个规则:
 
     开头必须为字母或者$ 或 _
 
想要用break作为变量可不可以那?
 
     关键字:
 
这些关键字用于执行特定操作等。按照规则,关键字也是语言保留的,不能用作标识符。
 
break
do
instanceof
typeof
case
else
new
var
catch
finally
return
void
continue
for
switch
while
debugger*
function
this
with
default
if
throw
delete
in
try
 
 
 
保留字:未来可能作为,标识符存在。
 
abstract
enum
int
short
boolean
export
interface
static
byte
extends
long
super
char
final
native
synchronized
class
float
package
throws
const
goto
private
transient
debugger
implements
protected
volatile
double
import
public
 
 
 
     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=2;
 
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 - -;
 
++a  和 - -a 有什么不同;(思考) 
 
var a = 5 + 4;  
var b = a * 2; 
var c = b / 4;
var d = b - c;
var e = -d; 
var f = e % 4;
 
f的结果是什么?
 
var g = 18.4; 
var h = g % 4;
 
h的结果是什么?
 
var i=3; 
var j=i++;  
j的结果是什么?
 
 

javascript系列-Class1.JavaScript基础的更多相关文章

  1. javaScript系列 [06]-javaScript和this

    在javaScript系列 [01]-javaScript函数基础这篇文章中我已经简单介绍了JavaScript语言在函数使用中this的指向问题,虽然篇幅不长,但其实最重要的部分已经讲清楚了,这篇文 ...

  2. javaScript系列 [03]-javaScript原型对象

    [03]-javaScript原型对象 引用: javaScript是一门基于原型的语言,它允许对象通过原型链引用另一个对象来构建对象中的复杂性,JavaScript使用原型链这种机制来实现动态代理. ...

  3. (一)我的Javascript系列:Javascript的面向对象旅程(上)

    今宵酒醒何处,杨柳岸,晓风残月 导引 我的JavaScript系列文章是我自己对JavaScript语言的感悟所撰写的系列文章.现在还没有写完.目前一共出了下面的系列: (三)我的JavaScript ...

  4. javaScript系列 [05]-javaScript和JSON

    本文输出和JSON有关的以下内容❐ JSON和javaScript❐ JSON的语法介绍❐ JSON的数据类型❐ JSON和XMLHTTPRequest❐ JSON的序列化和反序列化处理 1.1 JS ...

  5. (五)我的JavaScript系列:JavaScript的糟粕

    泪眼问花花不语,乱红飞过秋千去. JavaScript的糟粕 JavaScript语言是一门集精华与糟粕于一体的语言.在JavaScript: the good parts中,便集中讨论了关于精华与糟 ...

  6. javaScript系列 [01]-javaScript函数基础

    [01]-javaScript函数基础 1.1 函数的创建和结构 函数的定义:函数是JavaScript的基础模块单元,包含一组语句,用于代码复用.信息隐蔽和组合调用. 函数的创建:在javaScri ...

  7. 深入理解JavaScript系列:JavaScript的构成

    此篇文章不是干货类型,也算不上概念阐述,就是简单的进行一个思路上的整理. 要了解一样东西或者完成一件事情,首要的就是先要搞清楚他是什么.作为一个前端开发人员,JavaScript应该算作是最核心之一的 ...

  8. javaScript系列 [04]-javaScript的原型链

    [04]-javaScript的原型链 本文旨在花很少的篇幅讲清楚JavaScript语言中的原型链结构,很多朋友认为JavaScript中的原型链复杂难懂,其实不然,它们就像树上的一串猴子. 1.1 ...

  9. javaScript系列 [02]-javaScript对象探析

    [02]-javaScript对象探析 题记:多年前,以非常偶然的方式关注了微信公众号“面向对象”,本以为这个公众号主要以分享面向对象编程的干货为主,不料其乃实实在在的猿圈相亲平台.通过查看公开资料, ...

随机推荐

  1. Gradle for Android 第三篇( 依赖管理 )

    依赖管理 这会是一个系列,所以如果你还没有看我之前的几篇文章,请先查看以下文章: Gradle for Android 第一篇( 从 Gradle 和 AS 开始 ) Gradle for Andro ...

  2. android:layout_gravity 和android:gravit的区别?

    Android:layout_gravity 和android:gravit的区别? android:gravity是调整元素本身的内容或元素包含的子元素显示的位置,默认是显示在左侧 android: ...

  3. poj--3207--Ikki's Story IV - Panda's Trick(2-sat)

    Ikki's Story IV - Panda's Trick Time Limit: 1000MS   Memory Limit: 131072KB   64bit IO Format: %I64d ...

  4. Maven + SpringMVC + Mybatis

    使用IDEA配置Maven + SpringMVC + Mybatis [一步一步踩坑详细配置完成] PS:初学,想使用Maven配置一个SpringMVC的开发环境,照着网上的各种图文解说,配置了好 ...

  5. Java-SpringCloud:Spring Cloud 是什么

    ylbtech-Java-SpringCloud:Spring Cloud 是什么 1.返回顶部 1. 一.概念定义       Spring Cloud是一个微服务框架,相比Dubbo等RPC框架, ...

  6. 39.Qt XML

    1.使用QXmlStreamReader读取XML,可以读取内存中容纳不了的特大文件,或者读取在XML文档中定制的文档的内容. xml文件(in1.xml) <?xml version=&quo ...

  7. 8.MATLAB数据分析

    概述: clc; clear all; p1=[ ]; y=poly2sym(p1) %由向量创建多项式 disp(y) %显示多项式 1 多项式的求值与求根 clc; clear all; p=[ ...

  8. Jquery validform

    一.validform是什么?            validform是一款智能的表单验证js插件,它是基于jQuery库与css,我们只需要把表单对象放入,             就可以对整个表 ...

  9. php开启CURL支持

    window下安装php_curl支持 1. 找到php.ini 修改extension=php_curl.dll 把前面的分号去掉2. 把 php_curl.dll libeay32.dll ssl ...

  10. 判断是否是Ajax请求

    Request.IsAjaxRequest()判断是否是ajax请求原理:Http协议上有个X-Requested-With:XML HttpRequest属性判断的 mvc后台通过Request可以 ...