JavaScript基础
消息警告框
<script> alert("我的第一个 JavaScript"); </script> 参数只有1个,多余的会被丢弃.若要输出多项内容,先把要输出的内容整理(如"aaa"+":"+"bbbb")成一个。
点击按钮时被调用
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
JavaScript 会在页面加载时向 HTML 的 <body> 写文本:
document.write("<h1>这是一个标题</h1>");
JavaScript 输出
使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台 console.info()和console.debug()本质上与console.log()没有区别。谷歌和opera不支持console.debug()。
函数(Function)字面量 定义一个函数:
JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值:
x = 5
length = 6
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = "Johnson"; // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值
JavaScript 区别大小写 自动忽略空格
在一条语句中声明很多变量"
var lastname="Doe", age=30; 声明变量未赋值,其值实际上是 undefined。var carname;
如果重新声明 JavaScript 变量,该变量的值不会丢失:var carname="Volvo";var carname;
JavaScript 错误处理 Throw、Try 和 Catch
try 语句测试代码块的错误。 catch 语句处理错误。 throw 语句创建自定义错误。
try
{
//在这里运行代码
}
catch(err)
{
var txt="错误描述:" + err.message + "\n"; //在这里处理错误
alert(txt);
}
如果把 throw 与 try 和 catch 一起使用,那么您能够控制程序流,并生成自定义的错误消息。
try{
var x=document.getElementById("demo").value;
if(x=="") throw "值为空";
}
catch(err){
var y=document.getElementById("mess");
y.innerHTML="错误:" + err + "。";
}
JavaScript 调试
console.log() 设置断点 debugger 语句将无法工作 浏览器中console
JavaScript 保留关键字
Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。
也应该避免使用 JavaScript 内置的对象、属性和方法的名称作为 Javascript 的变量或函数名:
JavaScript 经常与 Java 一起使用。应该避免使用一些 Java 对象和属性作为 JavaScript 标识符:
在 HTML 中,必须(为了可移植性)避免使用 HTML 和 Windows 对象和属性的名称作为 Javascript 的变量及函数名:
非标准的关键字。一个实例是 const 关键字,用于定义变量。 一些 JavaScript 引擎把 const 当作 var 的同义词。另一些引擎则把 const 当作只读变量的定义。
Const 是 JavaScript 的扩展。
JavaScript JSON
JSON 是用于存储和传输数据的格式。 通常用于服务端向网页传递数据 。
全称 JavaScript Object Notation 轻量级的数据交换格式。JSON是独立的语言
JSON 格式在语法上与创建 JavaScript 对象代码是相同的。
语法规则:数据为 键/值 对。数据由逗号分隔。大括号保存对象 。方括号保存数组。
eg:"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"}
] 对象 "employees" 是一个数组。包含了三个对象。
JSON 字符串转换为 JavaScript 对象:
JSON 数据是键值对,可以有多个
首先,创建 JavaScript 字符串为 JSON 格式的数据:
var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
然后,使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:
javascript:void(0) 含义
javascript:void(0) 中最关键的是 void 关键字, void 是 JavaScript 中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值。
href="#"与href="javascript:void(0)"的区别
# 包含了一个位置信息,默认的锚是#top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id。
如果你要定义一个死链接请使用 javascript:void(0) 。
JavaScript 代码规范
- 变量和函数的命名规则
- 空格,缩进,注释的使用规则。
变量名推荐使用驼峰法来命名:lastName
变量名应该区分大小写,允许包含字母、数字、美元符号($)和下划线,但第一个字符不允许是数字,不允许包含空格和其他标点符号;
变量名不要以 $ 作为开始标记,会与很多 JavaScript 库冲突。
- 变量名不能为JavaScript中的关键词、保留字全名;
一条语句通常以分号作为结束符。
通常运算符 ( = + - * / ) 前后需要添加空格:
代码缩进:通常使用 4 个空格符号来缩进代码块:
复杂语句的通用规则: 将左花括号放在第一行的结尾。 左花括号前添加一空格。 将右花括号独立放在一行。 不要以分号结束一个复杂的声明。
对象定义的规则: 将左花括号与类名放在同一行。 冒号与属性值间有个空格。 字符串使用双引号,数字不需要。 最后一个属性-值对后面不要添加逗号。
- 将右花括号独立放在一行,并以分号作为结束符号。
为了便于阅读每行字符建议小于数 80 个。如果一个 JavaScript 语句超过了 80 个字符,建议在 运算符或者逗号后换行。
在函数声明、函数表达式、函数调用、对象创建、数组创建、for 语句等场景中,不允许在 , 或 ; 前换行。
命名规则:变量和函数为驼峰法 全局变量为大写 常量 (如 PI) 为大写
HTML 和 CSS 的横杠(-)字符: HTML5 属性可以以 data- (如:data-quantity, data-price) 作为前缀。 CSS 使用 - 来连接属性名 (font-size)。
注意:- 通常在 JavaScript 中被认为是减法,所以不允许使用。
使用简洁的格式载入 JavaScript 文件 ( type 属性不是必须的): <script src="myscript.js">
文件扩展名:
HTML 文件后缀可以是 .html (或r .htm)。
CSS 文件后缀是 .css 。
JavaScript 文件后缀是 .js 。
使用小写文件名 大多 Web 服务器 对大小写敏感