一、JavaScript入门简介
1.1、前端开发三要素
- html 描述页面内容
- css描述html元素的样式
- javascript控制网页和浏览器的行为对事件的响应和服务器端的交互
1.2、什么是javascript(解释型脚本语言)
html+css构成了网页上的内容和样式(静态),javascript是一种可以在浏览器中运行的跨平台的脚本语言。
主要用来实现在浏览器端的动作交互。
- 用户交互
2. 数据处理
浏览器中的javascript
- ECMAScipt
- javascript语言核心标准
- DOM文档对象模型
- W3C标准
- 操作文档对象的api
- BOM浏览器对象模型
- 操作对象浏览器的api
1.3、第一个javascript程序
<html>
<head></head>
<body>
<script>
document.write("hello world!");
</script>
</body>
</html>
注:document是一个文档对象。每个载入浏览器的 HTML 文档都会成为 Document 对象。
1.4.、Node.js
可以去nodejs.org下载node
1)在终端中输入node
console.log('hello, world");
或者 node server.js 运行在127.0.0.1 1337端口
2)配置node.sublime-build
在Sublime Text中 toos->build system ->new
{
"cmd": ["/usr/local/bin/node", "$file"],
"file_regex": "^[]*File \"(..*?\",line([0-9]*)",
"selector": "source.javascript"
}
1.5、事件响应代码
<html>
<head></head>
<body "alert('hi')">
<script>
document.write("<h1>"Hello World!<h1>">;
</scipt>
</html>
1.6、变量
可以用var
来定义一个变量
<html>
<body "alert('hi')">
<script>
var hello;
hello = "Hello";
//或者var hello = "Hello";
document.write(hello>;
</scipt>
</html>
变量名命名要求,其他编程语言类似
(1)可以用英文字母、数字、下划线或者美元符号$
组成
(2)可以由字母、下划线或者美元符号$
开头,但是数字不能出现在开头
(3)不能是javascript的关键字/保留字
提示:JavaScript 语句和 JavaScript 变量都对大小写敏感。
1.7、javascript的引入
1)内嵌代码
<html>
<head></head>
<body>
<script type="text/javascipt">
document.write("hello world!");
</script>
</body>
</html>
2)外联文件
<html>
<head></head>
<body>
<script type="text/javascipt" src="demo.js"></script>
</body>
</html>
<script>
标签的属性:
1、charset:可选,表示src属性指定的字符集,默认是ISO-8859-1;
2、defer:可选,脚本可以延迟到文档完全被解析和显示之后再执行,大多数浏览器不支持,只有IE支持;
3、language:不推荐使用,原来用于代码使用的脚本语言,大多数浏览器忽略它,请使用type代替;
4、src:可选,表示包含要执行代码的外部文件,可以缓存,方便修改和维护;
5、type:可选,可看作language的替代品;
6、async:html5新增没规定异步执行脚本,仅适用于外部脚本
如果 async=“async”:脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
如果不使用 async 且 defer=“defer”:脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本
注意:外联方式和内联方式不能混用。并且最好放在<head>
或<body>
标签里面
历史(了解): 现在大多数浏览器都支持JavaScript语法
1、在早期存在不兼容JavaScript的浏览器的时候,为了不让JavaScript代码直接显示在页面之中,采用如下方式处理:
<script>
<!--
alert('你好');
-->
</script>
2、平稳退化,不支持JavaScript的处理
<noscript>
您的浏览器不支持JavaScript或禁用JavaScript
</noscript>
1.8javascript的调试
在浏览器中按下F12或者右键审查元素打开调试工具。
1.9、javascript的严格模式(strict mode)
1)增益
- 消除javascript语法的一些不合理、不严谨、不安全的问题,减少怪异行为并保证代码运行安全
- 提高编译器效率,增加运行速度
- 为未来新版本的Javascript做好铺垫。
注意:"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向,包括IE10在内的主流浏览器,都已经支持它,许多大项目已经开始全面拥抱它。而老版本的浏览器会忽略它。
2)使用
- 全局使用严格模式:
<script type="text/javascipt">
"use strict";
(function(){
console.log("Hello wolrd!");
})()
</script>
- 函数内使用严格模式
<script type="text/javascipt">
(function(){
"use strict";
console.log("Hello wolrd!");
})()
</script>
- 标准模式与严格模式的区别
1)隐式声明或定义变量
严格模式下不能隐式声明或定义变量。
2)对象重名的属性
标准模式下,对象允许有重名的属性,而严格模式下对象不允许有重名的属性
3)argument.callee
严格模式下不能调用这样的方法
4)with语句
严格模式下with语句是禁用的
有兴趣的同学可以去看javascript语言规范
9.注释与C/C++类似
1)多行注释 - 以
/*
开头,以*/
结尾 - 不可嵌套使用
2)单行注释 - 以
//
开头
1.10.JavaScript文档注释(jsdoc)
js注释规范基于jsdoc,写出的代码注释能够成功生成注释文档。
由于jsdoc的规范太多,为了项目的可用性,对jsdoc的某些属性进行提取形成文档,供大家使用,具体更详细的资料,大家可以翻阅如下站点
http://yuri4ever.github.io/jsdoc/
1、方法注释
1.1、简单方法注释
/**
* @method
* @param {Type} data 参数描述
* @returns {Type} 返回值描述,如果有返回值写,没有省略
* @desc 方法描述
*/
function test(data){
return "你好";
}
1.2、如果不能描述清楚,添加例子
/**
* @method
* @param {Type} data 参数描述<br/>
* 例:
* {
* target:手机号
* }
* @returns {Type} 返回值描述,如果有返回值写,没有省略
* @desc 方法描述
*/
function test(data){
return "你好";
}
1.3、参数可选
/**
* @method
* @param {Type} [data] 参数描述<br/>
* 例:
* {
* target:手机号
* }
* @returns {Type} 返返回值描述,如果有返回值写,没有省略
* @desc 方法描述
*/
function test(data){
return "你好";
}
1.4、参数带默认值
/**
* @method
* @param {Type} data={} 参数描述<br/>
* 例:
* {
* target:手机号
* }
* @returns {Type} 返回值描述,如果有返回值写,没有省略
* @desc 方法描述
*/
function test(data){
return "你好";
}
1.5、方法抛出异常
/**
* @method
* @param {Type} data={} 参数描述<br/>
* 例:
* {
* target:手机号
* }
* @returns {Type} 返回值描述,如果有返回值写,没有省略
* @throws {string} 抛出'Error'异常
* @desc 方法描述
*/
1.6、方法调用例子
/**
* @method
* @param {Type} data={} 参数描述<br/>
* 例:
* {
* target:手机号
* }
* @returns {Type} 返回值描述,如果有返回值写,没有省略
* @throws {string} 抛出'Error'异常
* @desc 方法描描述
* @example
* add('1,2');
*/
**注意:**是参数和返回值类型Type:string、boolean、number、object、array、function
2、文件注释
/**
* @file 文件名
* @author 文件作者名:xiaojia
* @copyright 版权声明
* @createDate 创建日期,格式yyyy-MM-dd hh:mm:ss
*/
3、变量注释
/**
* @var {Type}
* @desc 变量描述
* @property {Type} name 属性描述
* @property {Type} age 属性描述
*/
4、常量注释
/**
* @constant {Type}
* @default 默认值描述
* @desc 常量描述
*/
5、枚举注释
/**
* @enum {Type}
* @desc 枚举的描述
*/
var RETCODE={
/**
* @desc 未登录
*/
NOT_LOGIN: 100000,
/**
* @desc 参数错误
*/
PARAM_ERROR: 100001,
/**
* @type {string}
* @desc 未知错误
*/
UNKOWN_ERROR: 'unkown'
}
6、类注释:function就是一个类
/**
* @class {string}
* @classdesc 这是对类的描述
* @desc 这是对类的构造方法的描述
*/
7、类属性描述
var LBSControllerCom = Com.extends({
/**
* @member {string}
* @desc 这样标识类的属性
*/
foo1 : 'a',
init: function() {}
})