1.javaScript概念
javaScript是基于对象的,事件驱动的,跨平台的,解释型客户端脚本语言
1.1,基于对象的:
我们先来理解对象的概念,什么是对象昵?现实生活中,我们把每一种事物都可以叫对象。每一个对象都有自己的外在特征和功能,例如一部手机是一种对象,它的外在特征有颜色,重量,大小等,手机的功能可以打电话,发信息,视频等。于是我们把一个对象的外在特征称为“属性”,功能称为“行为方式”,也可以叫方法。因此,所有的对象都包含了属性和方法这两种东西。
于是我们知道了,对象有属性和方法。使用对象,利用对象的功能(方法),我们可以做很多事,比如用手机打电话,用笔可以写字,用电饭锅可以做饭,用刀切菜......
js中,也有很多现成的对象供我们使用,使用这些对象,就可以实现很多功能。因此,我们说,js是基于对象来实现许多功能的一门语言
1.2,事件驱动的:
我们在浏览很多网站的时候,通常要对很多HTML元素进行操作,例如点击一个注册按钮注册会员,点击登录按钮登录网站,在文本框中输入用户名时自动检测用户名是否已存在等,很多功能的实现,需要建立在某些鼠标或键盘或文本框的操作上,才能得以实现。而js为我们提供了一些事件机制,利用这些事件机制,我们可以让HTML的元素通过不同的事件操作,实现需要的功能。
1.3,跨平台的:
js的代码,可以在不同的系统及平台中运行,就是一种跨平台的体现。可以在windows,linux,Android ,ios,nodeJS环境等。
1.4,解释型:
计算机不能直接理解高级语言,只能直接理解机器语言,所以必须要把高级语言翻译成机器语言,计算机才能执行高级语言编写的程序。翻译的方式有两种,一个是编译,一个是解释。两种方式只是翻译的时间不同。
编译型 :程序运行时,平台会对源代码进行编译后,生成一个编译后的文件,文件中的内容,是可以被计算机识别的机器语言,计算机运行的实际上是新生成的这个文件。并且是在第一次运行这个程序时编译生成一个文件,下次再运行时就不用再编译了,计算机会直接运行之前生成的文件。
例如:我们看一本国外的书,先将这本书全部翻译为中文的书,以后每次看这本中文的书就可以了。
代表语言: C、C++
解释型:每次运行时,平台不是编译成新文件,而是会通过解释器对程序逐条的翻译,翻译成机器语言,翻译的同时,机器会直接运行翻译后的代码。并且每次运行时都会如此操作。
例如:我们看一本国外的书,看一行就要翻译一行。每次看的时候都要这么做。
代表语言: JavaScript、Python、Shell、Ruby、MATLAB 等。
1.5,客户端脚本
简单说就是在浏览器中运行的语言,需要通过解释器解释,并逐行执行代码。
换一句话说就是对某些页面功能的实现在浏览器中完成。
脚本语言的优势在于减轻服务器的负担,提高页面的反映速度,增强用户体验。
2.javaScript的发展历史
1995年,由Netscape公司的Brendan Eich开发出来的,最初中liveScript,为了快速发展,借用了当时一个业界非常流行的词语java,于是更名为javaScript.后来微软进入浏览器行业,从IE3.0开始的搭载了一个javaScript的克隆版JScript.因为行业的竞争,导致出来了多个不同的版本,使得各种浏览器,在兼容程序方面出现了混乱。为了统一语法标准,1997 年,JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会(ECMA),第 39 技术委员会(TC39)被委派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义,由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39 锤炼出了 ECMA-262,该标准定义了名为 ECMAScript 的全新脚本语言。
3.javaScript的组成部分
ECMAScript:定义语法规则
DOM (document object module):文档对象模型,封装了一些属性和方法,可对html的节点进行增删改查
BOM(browser object module):浏览器对象模型,封装了一些对象,对象中有属性和方法,使用这些对象中的属性或方法与浏览器进行交互。
4.JS和H5的关系
h5新增了一些标签和API,如canvas必须使用js来实现,如sessionStorage,localStorage,File API,离线 & 存储等API实现,因此,我们可以认为,H5本质上就是js。
5.js入门
1.js的引入:
两种方式:
内嵌:<script type="text/javascript">js代码</script>
外部:<script src="../index.js"></script>
2.js的引入位置:除了title标签以外其它任何地方
3.js输出:document.write("hello Wrold");//页面输出hello Wrold
4.经常犯的错误:<script src="">document.write("永远都执行不到")</script>
5.注意的问题: <script> document.write("hello Wrold</script>"); </script> 因为/这个字符在html中有特殊的含义,浏览器会将</script> 识别为结束标签。 是转义字符,可以把右边的这一个字符转义为普通字符。
6.js的注释//单行注释
7.js的基本输出
document.write()输出
document.write("hello js");//在页面输出hello js
document.write("hello js","hello js" ,"hello js");//同时输出多个hello js 在页面
document.write("hello js", "hello<br>js" , "hello js" );//可以解析标签
document.write("hello <span style='color:red;'>js </span>", "hello js" , "hello js" );//可以解析标签
window.alert()输出
alert("hello js");//在页面显示一个弹出框,将hello js显示在弹出框中
alert("hello js","hello js");//只能输出一个内容
特点:会阻止后面程序的执行,只有点击"确定"按钮后,弹出框消失,再执行后面的程序。
console.log()输出
在网页控制台输出内容