01、JavaScript-基础

每天一句:没有方向感,我们不知道自己走向哪里。没有方向感,我们所有的努力就缺乏一个标准,我们每时每刻所有的努力都处在一种混沌与盲目的状态之中:没有对错、没有进退、没有成败得失。


一、JavaScript起源

JavaScript诞生于1995年,它当时的目的是为了表单输入的验证。因为在JavaScript问世之前,表单的验证都是通过服务器端验证。而当时都是电话拨号上网年代,服务器验证数据是一件非常痛苦的事情。

二、什么是JavaScript

JavaScript是一种具有面向对象能力、解释型的程序设计语言。更具体一点,它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为它不需要在语言环境下运行,而只需要支持它的浏览器即可。主要目的是,验证发往服务器端的数据、增加web互动、加强用户体验度等。
【JavaScript与Java,就像是雷锋塔与雷锋,两者之间并没有任何关系】

三、JavaScript历史

  • 诞生
    1995年,当时工作在Netscape(网景)公司的布兰登为解决类似于“向服务器提交数据之前验证”的问题。在Netscape Navigator2.0与Sun公司联手开发一个称之为LiveScript的脚本语言。为了营销便利,之后更名为JavaScript。

  • 邪恶的后来者
    因为JavaScript1.0如此成功,所以微软也决定进军浏览器,发布了IE3.0并搭载了一个JavaScript的克隆版,叫做JScript。

  • 标准的重要
    在微软进入后,有3种不同的JavaScript版本同时存在: Netscape Navigator3.0中的JavaScript、IE中的JScript、CEnvi中的ScriptEase。与其他编程语言不同的是,JavaScript并没有一个标准来统一其语法或特性,而这3种不同的版本恰恰突出了这个问题,随着业界担心的增加,这个语言标准化显然已经势在必行。

  • ECMA
    1997年,JavaScript1.1作为一个草案提交给欧洲计算机制造协会(ECMA)。第39技术委员会(TC39)被委派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义”。由于自Netscape、Sun、微软、Borland和其他一些对脚本编程感兴趣的公司的程序员组成的TC39锤炼出了ECMA-262,该标准定义了叫做ECMAScript的全新脚本语言。

  • 灵敏的微软、迟钝的网景
    虽然网景开发了JavaScript并首先提交给ECMA标准化,但因计划改写整个浏览器引擎的缘故,网景玩了整整一年才推出“完全遵守ECMA规范”的JavaScript1.3。而微软早在一年前就推出了“完全遵守ECMA规范”的IE4.0。这导致一个直接恶果:JScript称为JavaScript语言的事实标准。

  • 山寨打败原创
    JScript成为JavaScript语言的事实标准,加上window绑定着IE浏览器,几乎占据全部市场份额,因此,1999年之后,所有的网页都是基于JScript来开发的。而JavaScript1.x编程可怜的兼容者。

  • 网景的没落与火狐的崛起
    网景在微软强大的攻势下,1998年全面溃败。但,星星之火可以燎原,同年成立Mozilla项目中Firefox(火狐浏览器)在支持JavaScript方面无可比拟,在后来的时间里一步步蚕食IE的市场,称为全球第二大浏览器。

  • 谷歌的野心
    谷歌浏览器,是一个由谷歌公司开发的开放原始码网页浏览器。以简洁的页面,极速的浏览,一举成为全球第三大浏览器。随着移动互联网的普及,嵌有Android系统的平板电脑和智能手机,在浏览器这块将大有作为。

  • 苹果的战略
    Safari浏览器是苹果公司各种产品的默认浏览器,在苹果的一体机(iMac)、笔记本(Mac)、MP4(ipod)、智能手机(iPhone)、平板(iPad),并且在windows和Linux平台都有相应版本。目前市场份额全球第四,但随着苹果的产品不断的深入人心,具有称霸之势。

  • 幸存者
    Opera的全球市场份额第五,2%左右。它的背后没有财力雄厚的大公司,但它从“浏览器大战”存活下来的,有着非常大的潜力。

四、JavaScript核心

虽然JavaScript和ECMAScript通常被人们用来表达相同的含义,但JavaScript的含义却比ECMA-262中规定的要多得多。一个完整的JavaScript应该由三个不同的部分组成: 核心(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM)。

  • ECMAScript介绍
    由ECMAScript-262定义的ECMAScript与WEB浏览器的没有依赖关系。ECMAScript定义的只是这门语言的基础,而在此基础之上可以构建更完善的脚本语言。我们常见的WEB浏览器只是ECMAScript实现可能的宿主环境之一。

  • 文档对象模型(DOM)
    文档对象模型(DOM,Document Object Model)是针对XML但经过扩展用于HTML的应用程序编程接口(API,Application Programming Interface)。

  • 浏览器对象模型(BOM)
    访问和操作浏览器窗口的浏览器对象模型(BOM,Browser Object Model)。开发人员使用BOM可以控制浏览器显示页面以外的部分。而BOM真正与众不同的地方(也是经常会导致问题的地方),还是它作为JavaScript实现的一部分,至今仍没有相关的标准。

  • JavaScript版本
    身为Netscape(网景)“继承人”的Mozilla公司,是目前唯一沿用最初的JavaScript版本编号的浏览器开发商。在网景JavaScript转手给Mozilla项目的时候,JavaScript在浏览器中最后的版本号是1.3,后来,随着Mozilla继续开发,JavaScript版本号逐步递增。

五、JavaScript的引入

  • JS代码,可以放在script标签内,script标签可以放置在HTML文档任何位置;
  <script>
    // JS代码
  </script>
  • JS代码,可以放置在外部的js文件中,通过script标签的src属性链接到页面中;
<script type="text/javascript" src="test.js" ></script>

注意: 导入外部JS文件的script不要添加JS代码;

注意

六、输出方式

  • 向网页文档中输出
document.write()
document.writeln()
向网页文档中输出
  • 向web控制台输出
console.log()
向web控制台输出
  • 警告框
alert()

七、变量

JavaScript是弱类型脚本语言,使用变量之前可以无需定义;所以JavaScript支持两种方式引入变量。(其他语言例如C语言中,在定义时都会有类型的区分int a; float b;)

  • 什么是变量?
    变量即是可以存储数据的,可以改变的;
        /* 初中数据题目
         * 已知x为20, x + y = 100; 求y的值是多少?
         * 
         * x: 20
         * y: ?
         * x + y = 100
         * 
         * ===> y = 80
         * 
         */
        
        // var是关键字,表示定义变量
        // 定义了一个变量x,变量x的值为20
        var x = 20;
        
        // 定义了一个变量为y,变量y没有值
        var y;
        
        // x + y = 100; --> y = 100 - x
        y = 100 - x;
        
        alert(y);  // 80
  • 隐式定义: 直接给变量赋值
    // 定义一个变量a,其值为'hello world'
    a = "hello world";
    b = 10;
  • 显式定义: 使用var关键字定义变量(使用该方式声明变量时可以没有初始值,声明的变量类型是不确定的)
  // 声明变量a,数据类型是不确定的
  var a;  
  // 定义一个变量b,其值为'hello world'
  var b = "hello world";
  var c = 3;
  • 一次性定义多个变量
  var a,b,c;
  var i=0, j=0, k=0;
  • 命名规则
  a、变量名必须以字母或下划线“_”或者“$”开头;
  b、变量名长度不能超过255字符;
  c、变量名中不允许使用空格,首字符不能为数字;
  d、变量名区分大小写(备注: JavaScript是区分大小写的语言);

八、基本运算符操作

  • 加法 +
  • 减法 -
  • 乘法 *
  • 除法 /
  • 取余(求模) %
  10 / 3 = 3 ··· 1 

九、字符串拼接

加号有两种含义,如果都是为number类型时,即是加法操作;如果有一个是为字符串类型,即是字符串拼接;

  var str1 = '中国';
  var str2 = '台湾';
  // 将字符串str1和str2拼接起来
  var str3 = str1 + str2;

十、HTML属性操作

  • 通过id获取页面对应元素(document.getElementById)
  var num1 = document.getElementById('num1');
  • 属性名、属性值
  <input id=“bt1” type=“button” value=“按钮”/>
    属性名: id
    属性值: bt1
    (注: 属性名="属性值")
  • 属性读操作: 获取、找到
  元素.属性名
  • 属性写操作: 添加、替换
  元素.属性名 = 新值
  • 元素内的HTML内容
  元素.innerHTML

注意事项:
a、JS中不允许出现‘-’,即将‘-’去除掉,之后将后面小写字母改为大写字母即可;
例如:
font-size —> fontSize
padding-top —> paddingTop
p1.style.fontSize = '10px';
b、JS中class属性要改为className(class是保留字)
例如: 想要改变某个元素的class名,即是p1.className = 'purpleStyle';

十一、案例 — 猜数字游戏

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

推荐阅读更多精彩内容