JavaScript基础语法学习笔记
2016-05-17 本文已影响335人
Dev_hell03W
1. JavaScript用法
html中的javascript脚本必须放在<script></script>之间. 脚本可以被放置在html页面的<body>和<head>部分中. 浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码 .
以前需要在<script>标签中使用type="text/javascript"声明, 现在不需要这么做, 浏览器一样可以识别, 但是为了语法规范还是声明下比较好. JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
2. JavaScript输出
JavaScript没有任何打印或者输出函数.
javaScript可以通过以下方式输出输出:
- 使用window.alert()弹出警告框;
- 使用document.write()方法将内容写到html文档中;
- 使用innerHTML写入到html元素;
- 使用console.log()写入到浏览器的控制台.
**使用window.alert(): **
<script>
window.alert(5 + 6);
</script>
操作 HTML 元素:
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
写到控制台:
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
3. JavaScript 语法
在编程语言中, 一个字面量是一个常量, 如3.14.
//1. 数字(Number)字面量可以是整数, 小数, 科学计数.
3.14
1002
123e5
//2. 字符串使用单引号或者双引号:
"walden"
'walden'
//3. 数组字面量:
[40, 100, 30, 2]
//4. 对象字面量:
{firstName:"wei", lastName:"walden", age:10}
//5. 函数字面量定义一个函数
function myFunction(a, b){ return a*b; }
//6. 变量
javaScript中使用`var`定义变量, 使用`=`为变量赋值.
** 变量是一个名称, 字面量是一个值. **
其它要点:
JavaScript 对大小写敏感。
avaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的：
var person="Hege";
var person = "Hege";
您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：
document.write("你好 \
世界!");
注释:
//这是注释.
/*
这也是注释.
*/
JavaScript数据类型:
字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。
//1. JavaScript 布尔
// 布尔（逻辑）只能有两个值：true 或 false。
var x=true;
var y=false;
//2. JavaScript 数组
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
// 或者 (condensed array):
var cars=new Array("Saab","Volvo","BMW");
// 或者 (literal array):
var cars=["Saab","Volvo","BMW"];
// 3. JavaScript 对象
var person={firstname:"John", lastname:"Doe", id:5566};
对象属性有两种寻址方式：
name=person.lastname;
name=person["lastname"];
//4. Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
可以通过将一个变量赋值为Null来置空一个变量.
//5.当您声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
//6. 访问js对象中的方法:
name = person.fullName();
// 你可以使用以下语法创建对象方法：
methodName : function() { code lines }
// 你可以使用以下语法访问对象方法：
objectName.methodName()
4. JavaScript函数
无参数的函数:
function functionname()
{
执行代码
}
带参数的函数:
function myFunction(var1,var2)
{
代码
}
局部JavaScript变量:
- 在JavaScript函数内部声明的变量是局部变量, 所以只能在函数内部访问到(该变量的作用域是局部的).
- 再不同的函数中可以使用名称相同的局部变量, 因为只有声明过该变量的函数才能识别出该变量.
- 只要函数运行完毕, 本地变量就会被删除.
- 函数参数只在函数内部起作用, 是局部变量.
全局javaScript变量:
在函数外声明的变量是全局变量, 网页上所有的脚本和函数都能够访问它.
JavaScript变量的生存周期:
- JavaScript变量的声明周期从他们被声明的时间开始.
- 局部变量会在函数运行以后被删除.
- 全局变量会在页面关闭后被删除.
向未声明的JavaScript变量赋值:
如果把值赋给未声明的变量, 该变量将被自动作为全局变量声明.
如:
function getName(){
name = "walden"; // name将会被声明为全局变量.
}
**在HTML中, 全局变量是window对象: 所有的数据和对象都属于window对象. 自己定义的全局变量, 或者函数可以覆盖window对象的变量或者函数. 局部变量, 可以覆盖全局变量的和函数. **
- continue语句只能在循环中使用.
- break语句, 只能在循环或者switch中使用.
- 通过标签引用, break可用于跳出任何JavaScript代码块.
break标签引用:
label:
statements
// break 和 continue 语句仅仅是能够跳出代码块的语句。
break labelname;
continue labelname;
5. JavaScript typeof, null, 和 undefined
5.1 typdef操作符
可以使用typedef操作符检测变量的数据类型.
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object, 在js中数据是一种特殊的数据类型, 所以typedef [数组], 返回object
5.2 Null 和 undefined
在js中Null表示什么都没有. 用typeof检测Null返回是object, undefined表示没有设置值得变量, typedef检测还是undefined.
var person = null; // Value is null, but type is still an object
var person = undefined; // 值为 undefined, type is undefined
6 . js中的数据类型
在 JavaScript 中有 5 中不同的数据类型：
string
number
boolean
object
function
3 种对象类型：
Object
Date
Array
2 个不包含任何值的数据类型：
null
undefined
typedef操作符检测js变量的数据类型:
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
typeof new Date() // 返回 object
typeof function () {} // 返回 function
typeof myCar // 返回 undefined (if myCar is not declared)
typeof null // 返回 object
// NaN 的数据类型是 number
// 数组(Array)的数据类型是 object
// 日期(Date)的数据类型为 object
// null 的数据类型是 object
// 未定义变量的数据类型为 undefined
**constructor属性: **
constructor属性可以返回所有js变量的构造函数:
"John".constructor // 返回函数 String() { [native code] }
(3.14).constructor // 返回函数 Number() { [native code] }
false.constructor // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor // 返回函数 Array() { [native code] }
{name:'John', age:34}.constructor // 返回函数 Object() { [native code] }
new Date().constructor // 返回函数 Date() { [native code] }
function () {}.constructor // 返回函数 Function(){ [native code] }
使用 constructor 属性来查看是对象是否为数组 (包含字符串 "Array"):
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
使用 constructor 属性来查看是对象是否为日期 (包含字符串 "Date"):
function isDate(myDate) {
return myDate.constructor.toString().indexOf("Date") > -1;
}
JavaScript 类型转换:
// 1. 将数字转换成字符串
String(x) // 将变量 x 转换为字符串并返回
String(123) // 将数字 123 转换为字符串并返回
String(100 + 23) // 将数字表达式转换为字符串并返回
//Number 方法 toString() 也是有同样的效果。
x.toString()
(123).toString()
(100 + 23).toString()
// 2. 将布尔值转换为字符串
String(false) // 返回 "false"
String(true) // 返回 "true"
// Boolean 方法 toString() 也有相同的效果。
false.toString() // 返回 "false"
true.toString() // 返回 "true"
// 3. 将日期转换为字符串
String(Date()) // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
// Date 方法 toString() 也有相同的效果。
Date().toString() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
// 4. 字符串转换成数字
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN
调试JS代码可以使用浏览器自带的console.log() 方法. 也可以设置断点进行调试.
7. JS变量提升
js中, 函数以及变量的声明都将被提升到函数的最顶部. js中变量可以使用之后再声明.
一下两段代码效果相同:
示例一:
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x; // 在元素中显示 x
var x; // 声明 x
实例二:
var x; // 声明 x
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x; // 在元素中显示 x
JavaScript 初始化不会提升:
以下两段代码效果是不同的:
实例 1
var x = 5; // 初始化 x
var y = 7; // 初始化 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y
实例 2
var x = 5; // 初始化 x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y; // 显示 x 和 y
var y = 7; // 初始化 y
JSON字符串转换成JavaScript对象:
var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
// 然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:
var obj = JSON.parse(text);
8. JavaScript代码规范
- 变量名推荐使用驼峰法来命名;
- 通常运算符(+ - * /)前后都要加空格;
- 推荐使用4个空格进行代码缩进, 不推荐使用tab,因为不同编辑器对tab解析不同.
- 短的对象可以写成一行, 长的要写成多行,
- 命名规则: 变量和函数为驼峰法, 全局变量为大写, 常量为大写.
- HTML载入外部JS文件
<script src="myscript.js">type属性不是必须的.
