参考
简介
备注
- 像写html一样，在网页中插入
<script></script>就行 <script>内可以放执行命令，则立即执行<script>内也可以放置函数，可定义此函数的前后都可以调用此函数
大家喜欢把函数定义在<head>内，不是必须的- 也可以引用外部的JavaScript
<script src="myScript.js"></script> - 同行换行用
;，不同行;非必须，但是建议加; - 不同的
script中定义的变量全局通用 - 注释
//开头
示例
<!DOCTYPE html>
<html>
<head>
<script>
function myfun()
{
window.alert("hello world");
};
</script>
</head>
<body>
<button onclick="myfun()"> call fun </button>
</body>
</html>
chrome打开, 可以执行,写错的代码，也会报错在某行
也可以在这里直接写脚本@gliderhx
也可以直接在下面的Console中输入
输出函数
- 使用
window.alert()弹出警告框。 - 使用
document.write()方法将内容写到 HTML 文档中。 - 使用
innerHTML写入到 HTML 元素。 - 使用
console.log()写入到浏览器的控制台
html事件
触发事件,执行js命令
| 事件 | 描述 |
|---|---|
onchange |
HTML 元素改变 |
onclick |
用户点击 HTML 元素 |
onmouseover |
用户在一个HTML元素上移动鼠标 |
onmouseout |
用户从一个HTML元素上移开鼠标 |
onkeydown |
用户按下键盘按键(?测试无效) |
onload |
浏览器已完成页面的加载 |
<h1 onclick="alert(Date())">点我获取当前时间</h1>
变量
定义
- 作用域
-
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
-
在函数外声明(也用var)的变量是全局变量，直接给为定义过的变量赋值(即使是函数内,在函数被执行后)变为全局变量
- 全局变量可以
delete 变量名返回true, 局域变量返回false
-
- 变量名区分大小写，支持
_,$,字母开头的变量 - 可以在声明变量时定义
var a=123,也可以声明后定义var a; a=123 ; - 可以同时定义多个变量
var str="hello world", a; a=123 ; - 变量没有类型的区分，即之前是数值，后面可以是字符串
var a; a=123 ; a="hello" - 每种变量都是对象,和面向对象的python一致,有相应的属性和方法
var a=123; var b=456 var str="hello world"
数据类型
- 字符串
使用单引号和双引号定义a="hellowrold" - 数字
a=123;a=12.34;a=123e5;a=123e-5 - 布尔
a=true ;a=false - 数组
Array()a=Array(123,456,"hello",345); a=new Array();a[0]=123,a[1]="hello"; a=new Array(123,456,"hello")
一切皆对象
typeof查看类型
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
typeof Array(123,456,"hello",345) // 返回 object
typeof undefined // 返回 "undefined"
typeof null // 返回 object
typeof function () {} // 返回 function
constructor可以查看构造函数
"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] }
用这些函数也可创建对象,也可以用于转换类型,如
Number(123)
123
Number(String(123))
123
这些对象还有很多性质可以调整格式,如
Number(String(123)).toExponential()
"1.23e+2"
//Number的更多方法
//toExponential() 把对象的值转换为指数计数法。
//toFixed() 把数字转换为字符串，结果的小数点后有指定位数的数字。
//toPrecision() 把数字格式化为指定的长度。
其他
Undefined 这个值表示变量不含有值,输出空白, 例如未传入函数的输入参数时
null表示这个值为null,用于清空变量，输出null
a=null;a=Undefined
只定义类型，不赋值
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
字符串
字符串的索引顺序和python类似,下标从0开始, 不可以str[0:1],有多种截取方法比如substring,使用+号连接
a="hello world"
"hello world"
a[0]
"h"
a.substring(0,1)
"h"
a.length
11
(a+a).length
22
字符串属性
| 属性 | 描述 |
|---|---|
constructor |
返回创建字符串属性的函数 |
length |
返回字符串的长度 |
prototype |
允许您向对象添加属性和方法 |
字符串方法
| 方法 | 描述 |
|---|---|
charAt() |
返回指定索引位置的字符 |
charCodeAt() |
返回指定索引位置字符的 Unicode 值 |
concat() |
连接两个或多个字符串，返回连接后的字符串 |
fromCharCode() |
将 Unicode 转换为字符串 |
indexOf() |
返回字符串中检索指定字符第一次出现的位置 |
lastIndexOf() |
返回字符串中检索指定字符最后一次出现的位置 |
localeCompare() |
用本地特定的顺序来比较两个字符串 |
match() |
找到一个或多个正则表达式的匹配 |
replace() |
替换与正则表达式匹配的子串 |
search() |
检索与正则表达式相匹配的值 |
slice() |
提取字符串的片断，并在新的字符串中返回被提取的部分 |
split() |
把字符串分割为子字符串数组 |
substr() |
从起始索引号提取字符串中指定数目的字符 |
substring() |
提取字符串中两个指定的索引号之间的字符 |
toLocaleLowerCase() |
根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
toLocaleUpperCase() |
根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
toLowerCase() |
把字符串转换为小写 |
toString() |
返回字符串对象值 |
toUpperCase() |
把字符串转换为大写 |
trim() |
移除字符串首尾空白 |
valueOf() |
返回某个字符串对象的原始值 |
计算
数值计算
- 通用计算符:加减乘除
+-*/,幂级数1.1**1.2,取余2%3,括号()
i++ i-- ++i --i, 连加/减在变量后面的，返回值是变量原来的数值
= += -= *= /= %=也有 - 逻辑运算
== != < > >= <=
===绝对等于（值和类型均相等）
!==不绝对等于（值和类型有一个不相等，或两个都不相等x=5 5 //值相同，类型不同 x == "5" true x === "5" false - 连接
"hello"+"world"
对象
使用{key:value}定义，使用var.key调用
对象中也可以有方法，使用var.fun()调用
a={name:"xiaoming",age:15}
window.alert(a.age)
条件
if
if (condition)
{
当条件为 true 时执行的代码
}
//
if (condition)
{
当条件为 true 时执行的代码
}
else
{
当条件不为 true 时执行的代码
}
//
if (condition1)
{
当条件 1 为 true 时执行的代码
}
else if (condition2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
switch
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
循环
for
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
- 语句1,3可省略,但是分号不能省略
- 语句 1 （代码块）开始前执行, 可省略
- 语句 2 定义运行循环（代码块）的条件
- 语句 3 在循环（代码块）已被执行之后执行,可省略
实例
for (var i=0; i<5; i++)
{
x=x + "该数字为 " + i + "<br>";
}
for in
a="hello world"
for ( x in a)
{
//此时x以此为0,1,2,...,10
alert(x)
}
//当a为数组时, x仍是0,1,2,...,
//因此可以这样调用数组中的值
a=Array(123,456,"hello",345);
for ( x in a)
{
alert(a[x])
}
while
while (条件)
{
需要执行的代码
}
do while
至少执行一次
do
{
需要执行的代码
}
while (条件);
break 跳出&其他用法, continue 下一个循环
continue仅用于进入下一个循环
break还可以用于跳出其他带有标签的代码块,例如switch
function hello(a)
{
return a > 5
}
// 在代码前面label: 这样标记即可
test:
{
a=3
if ( hello(a) )
{
break test
}
alert(a)
}
函数
定义
function myfun()
{
window.alert("hello world")
}
调用
- 可以直接在
script里面调用<script>myfun()</script>需要先定义后使用 - 用html方式调用,可以先调用后定义,难道是先执行javascript在解释html的原因?
<button onclick="myfun()">call fun</button>
参数和返回值
function myfun(a,b)
{
c=a+" "+b;
window.alert(c);
return c;
};
d=myfun('hello','world');
内置函数
//返回时间
Date()
时间函数
| 方法 | 描述 |
|---|---|
| getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
| getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
| getFullYear() | 从 Date 对象以四位数字返回年份。 |
| getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
| getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
| getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
| getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
| getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
| getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
正则表达式[略]
本文首发于我的博客@cndaqiang.
本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！