Javascript的一些用法
- 经常看到 document.getElementById(“some id”)是使用 id 属性来查找 HTML 元素的 Javascript 代码。这个方法是 HTML DOM 中定义的。
请使用 “id” 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容:
- HTML 中的脚本必须位于 标签之间。 可以在 HTML 文档中放入不限数量的脚本。脚本可位于 HTML 的 和 部分中,或者同时存在于两个部分中。通常的做法是把函数放入 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。
- Javascript的一些输出方法/Javascript 显示数据
A.使用 window.alert() 弹出警告框。
B.使用 document.write() 方法将内容写到 HTML 文档中。 ★请使用 document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。
C.使用innerHTML 写入到 HTML 元素。
D.使用 console.log() 写入到浏览器的控制台.
- 字符串中,使用引号,字符串中的引号不要与字符串的引号相同(双引或者单引) & 也可以添加转义字符来使用引号例如
'It\'s alright';
- 通常, Javascript 字符串是原始值,可以使用字符创建:
var firstName = "John"
。但我们也可以使用 new 关键字将字符串定义为一个对象
: var firstName = new String("John")
- 其他字符串的属性与语法
- “+” 运算符用于把文本值或字符串变量加起来(连接起来)。规则:如果把数字与字符串相加,结果将成为字符串!
- Javascript 比较 和 逻辑运算符
- Javascript switch 语句
- Javascript Break 和 Continue 语句
- Javascript 类型转换 。||| Number() 转换为数字, String() 转换为字符串, Boolean() 转化为布尔值。
- Javascript 错误 - throw、try 和 catch
try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
- Javascript 调试. 如果浏览器支持调试,你可以使用 console.log() 方法在调试窗口上打印 Javascript 值
- Javascript 变量提升
提升(Hoisting)是 Javascript 默认将当前作用域提升到前面去的的行为
Javascript 语法
Javascript 是一个脚本语言。它是一个轻量级,但功能强大的编程语言
js字面量&变量&操作符&语句&关键字&数据类型&函数&注释
- 字面量
一般固定值称为字面量,例如:3.14
字面量 |
举例 |
数字字面量 |
3.14 1001 123e5 |
字符串字面量 |
“John Mart” |
表达式字面量 |
5 + 6 |
数组字面量 |
[46, 6, 9894,65] |
对象字面量 |
{firstName:”John”,lastName:”Mart”,age:50,eyeColor:”blue”} |
函数字面量 |
function myFunction(a, b) { return a * b;} |
- 关键字
Javascript 关键字用于标识要执行的操作。Javascript 保留了一些关键字为自己所用。例如var 关键字告诉浏览器创建一个新的变量:
Javascript 关键字必须以字母、下划线(_)或美元符($)开始。(数字是不允许作为首字符出现的,以便 Javascript 可以轻易区分开关键字和数字)
- 变量
变量是存储信息的“容器”,变量用于存储数据值,使用关键字var 来定义变量, 使用等号来为变量赋值。(因为是关键字,注意开头只是字母(推荐)下划线和$,注意大小写)
一条语句中可以声明很多变量,同一关键字可用逗号分隔即可。
如果重新**声明**js变量,该变量的值不会丢失。
var carname="Volvo";
var carname;
carname 的值依旧是“Volvo”
var x;
var x = 5;
var x = "John";
此处不是声明
- 操作符
类型 |
实例 |
描述 |
赋值,算术和位运算符 |
= + - * / |
在 JS 运算符中描述 |
条件,比较及逻辑运算符 |
== != <> |
在 JS 比较运算符中描述 |
- 语句
a 语句即发出的命令,分号分隔。空格在js中会被忽略, 可以在脚本中添加空格以提高其可读性。利用反斜杠可以对代码进行换行不影响代码功能
b Javascript 代码块–使得Javascript 可以分批地组合起来。代码块以左花括号开始,以右花括号结束。代码块的作用是一并地执行语句序列。
c Javascript 语句标识符
- 数据类型
Javascript 有多种数据类型:数字(Number),字符串(String),布尔(Boolean),数组(Array),对象(Object)、空(Null)、未定义(Undefined)
- 在JS中类似“bill gates”这样一条文本被称为字符串。 当向变量分配文本值时,应该用双引号或者单引号来包围这个值。
- 当向变量赋的值是数值时,不要使用引号,否则会被作为文本处理。
- 布尔(逻辑)只能有两个值:true 或 false,布尔常用在条件测试中。
- 数组下标是基于零的,所以第一个项目是 [0],第二个是 [1],以此类推。 对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式(name : value) 来定义。
- 属性由逗号分隔. Undefined 这个值表示变量不含有值。 可以通过将变量的值设置为 null来清空变量。
var length = 16; // Number 通过数字赋值 var points = x * 10; // Number 通过表达式赋值 var lastName = “Johnson”; // String 通过字符串赋值 var cars = [“Saab”, “Volvo”, “BMW”]; // Array 通过数组赋值 var person = {firstName:”John”, lastName:”Doe”}; // Object 通过对象赋值 |
当您声明新变量时,可以使用关键词 “new” 来声明其类型:
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
- 函数
Javascript 语句可以写在函数内,函数可以重复引用:引用一个函数 = 调用函数(执行函数内的语句)。
- 注释
//单行注释
/* … */ 多行注释
★Javascript 对大小写是敏感的。当编写 Javascript 语句时,请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。同样,变量 myVariable 与 MyVariable 也是不同的。
js数据类型之 对象
js对象
Javascript 对象是拥有属性和方法的数据,是变量的容器。
在 Javascript中,几乎所有的事物都是对象。
对象也是一个变量,但对象可以包含多个值(多个变量)。
var car = {type:"Fiat", model:500,color:"white"};
//在以上实例中,3 个值("Fiat", 500, "white") 赋予变量 car。
//在以上实例中,3 个变量(type, model, color) 赋予变量 car。
- 对象定义
你可以使用字符来定义和创建 Javascript 对象:
var person = {firstName:"John",lastName:"Doe", age:50,
eyeColor:"blue"};
person.lastName
person["lastName"];
- 对象方法
对象的方法定义了一个函数,并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。
该实例访问了 person 对象的 fullName() 方法:
name = person.fullName();
你可以使用以下语法创建对象方法:
methodName : function() { code lines }
你可以使用以下语法访问对象方法:
objectName.methodName()
通常 fullName() 是作为 person 对象的一个方法, fullName 是作为一个属性。
有多种方式可以创建,使用和修改 Javascript 对象、属性和方法。
js数据类型之 函数
js函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
当调用该函数时,会执行函数内的代码。
可以在某事件发生时直接调用函数 ,并且可由 Javascript 在任何位置进行调用。
★: Javascript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。
带有返回值的函数
通过使用 return 语句就可以实现函数将值返回调用它的地方。
在使用 return 语句时,函数会停止执行,并返回指定的值。
在您仅仅希望退出函数时 ,也可使用 return 语句。返回值是可选的 (直接return终止函数)
局部 Javascript 变量
在 Javascript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。
您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕,本地变量就会被删除。
全局 Javascript 变量
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
Javascript 变量的生存期
Javascript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。
js数据类型之 作用域
js作用域
在 Javascript 中, 对象和函数同样也是变量。
在 Javascript 中, 作用域为可访问变量,对象,函数的集合。
- Javascript 局部作用域
变量在函数内声明,变量为局部作用域。
局部变量:只能在函数内部访问。
实例
function myFunction() {
var carName = "Volvo";
}
因为局部变量只作用于函数内,所以不同的函数可以使用相同名称的变量。
局部变量在函数开始执行时创建,函数执行完后局部变量会自动销毁。
- Javascript 全局变量
变量在函数外定义,即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
实例
var carName = " Volvo";
function myFunction() {
}
如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。
以下实例中 carName 在函数内,但是为全局变量。
function myFunction() {
carName = "Volvo";
}
js事件
HTML 事件是发生在 HTML 元素上的事情,可以是浏览器行为,也可以是用户行为。
当在 HTML 页面中使用 Javascript 时, Javascript 可以触发这些事件。
在事件触发时 Javascript 可以执行一些代码。HTML 元素中可以添加事件属性,使用 Javascript 代码来添加 HTML 元素。
单引号:
<some-HTML-element some-event='Javascript 代码'>
双引号:
<some-HTML-element some-event="Javascript 代码">
例如:
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?button>
常见事件 |
描述 |
onchange |
HTML 元素改变 |
onclick |
用户点击 HTML 元素 |
onmouseover |
用户在一个HTML元素上移动鼠标 |
onmouseout |
用户从一个HTML元素上移开鼠标 |
onkeydown |
用户按下键盘按键 |
onload |
浏览器已完成页面的加载 |
附录 HTML事件属性 使事件在浏览器中触发动作的能力,比如当用户点击元素时启动 Javascript。上面列出了添加到 HTML 元素以定义事件动作的全局事件属性。