javascript笔记（一）

最新推荐文章于 2024-03-16 13:21:00 发布

小嘉丶学长

最新推荐文章于 2024-03-16 13:21:00 发布

阅读量1.4k

点赞数

分类专栏：前端笔记之javascript 文章标签： javascript 网页

本文链接：https://blog.csdn.net/fj_Author/article/details/46279611

版权

前端笔记之javascript 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一、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）

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
　　严格模式下不能调用这样的方法
４）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() {}
})

小嘉丶学长

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript笔记（一）

1. 前端开发三要素1）html 描述页面内容 2）css描述html元素的样式 3） javascript控制网页和浏览器的行为对事件的响应和服务器端的交互 2. 什么是javascript（解释型脚本语言）　　html+css构成了网页上的内容和样式（静态），javascript是一种可以在浏览器中运行的跨平台的脚本语言。　　主要用来实现在浏览器端的动作交互。　　1. 用
复制链接

扫一扫