1.<script></script>
标签可放在<head>
或<body>
中,只是解析时间不同。
<script type="text/javascript">
alert("这是一个测试")
</script>
2.通过链接方式,使结构、样式和行为分离。
html:<script src="test.js"></script>
;
test.js:alert("我是外部链接js")
,需将编码设为UTF-8。
3.消息框:
- 警告框: alert, 只有“确定”一个按钮;
var x="hello world!";
alert(x) // 弹出变量时,不用加引号,但字符串必须加引号。
- 确认框:confirm,有“确定”“取消”按钮;
confirm("确定要退出吗?")
- 提示框:prompt,相当于输入框。
prompt("请输入年龄",18)
4.在页面(HTML文档)中输出:
<script>
document.write("hello world")
</script>
5.在控制平台输出:
<script>
console.log("调试")
</script>
6.用var定义变量,即初始化变量:
var z;
z="true";
var m=false;
7.JavaScript 中数据类型
字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)。
var x="hello";
var y=6;
var m=ture;
var n=[1,3,6];
var info{name:"小李",sex:"男",age:21} // 键值对
var d=null;
var z;
8.检测数据类型:typeof(x)
alert(typeof(x))
9.数组:alert(car[0])
调用:数组名[ 索引值 ],索引值从0开始。
var car=["BMW","BYD","东风","大众"];
alert(car[0])
10.对象
- 普通对象的调用方式:对象名.键值名
var info={
name:"zhangsan",
sex:"男",
age:20,
address:"陕西西安"
};
alert(info.name);
alert(info.name+","+info.address); //"+"表示连接
- 复杂对象的调用:对象名.[ 索引值 ].键值名
var list=[
{name:"张三",sex:"男",age:20,},
{name:"李四",sex:"男",age:19,},
{name:"王五",sex:"女",age:22,}
];
alert(list[0].name)
11.JS运算符
算术运算符:+ - * / %(取余)
++:自增 ,- -:自减
a++: a=a+1;a- -: a=a-1;
a++和a- -的区别在于赋值时,a++是先赋值后自加,++a是先自加后赋值。赋值运算符:=,+=,-=,*=,/=,%= .
x+=y:x=x+y;x-=y:x=x-y; x*=y:x=x*y; x/=y:x=x/y; x%=y:x=x%y .“+”功能:
(1)将字符串等连接起来;
(2)类型相同时数据相加。比较运算符
== 等于,=== 绝对等于,!= 不等于,!=== 绝对不等于(值和类型均相等),>,<,>=,<= .
比较运算符的结果一般都为布尔值(true / false)。逻辑运算符
&& and 与 两边都为true,结果为true.
|| or 或 两边只要有一个为true,结果就为true.
! not 非 你为true,我为false.
- 条件运算符(三目运算符)
语法:(条件)?“条件成立时输出的值”:“条件不成立时输出的值”
12.JS 注释://单行注释 ; /*多行注释*/
,webstorm中快捷键:ctrl+shift+/
13.函数
<body>
<button onclick="show()">点击</button>
<script>
function show(){
alert("这是一个基本函数")
}
</script>
</body>
函数的定义:语法:function 函数名(){执行语句}
函数的调用:触发的事件=“函数名()”
触发事件: onclick 点击事件
onload 浏览器已完成页面的加载
onchange 表单元素的内容改变时触发
onfocus 获取焦点
onblur 失去焦点
onmouseover 鼠标放上去
onmouseout 鼠标离开时
onmousemove 鼠标移动时
onmousedown 鼠标按下
onmouseup 鼠标松下
onkeydown 某个键盘按键被按下
onkeypress 某个键盘按键被按下并松开
onkeyup 某个键盘按键被松开
14.带参函数
<button onclick="sum(3,4)">计算</button> //具体值为实际参数
<button onclick="sum(5,10)">计算1</button>
<script>
function sum(x,y){ //x,y为形式参数
var z;
z=x+y;
alert(z)
}
</script>
15.带有返回值的函数
在使用 return 语句时,函数会停止执行,并返回指定的值。
<script>
function show(){
var x= 5,y=6;
return x+y;
}
var z=show();
alert(z) //z=11
</script>
16.变量作用域
局部变量:只在函数内部起作用,在函数执行后自动销毁;
全局变量:整个页面中起作用,在页面关闭后销毁。
如果在函数内部定义变量时,没有写初始化var,则视为全局变量。
17.获取值的方式有三个:
获取节点内部的内容(包含子标签) innerHTML
获取节点内部纯文本 innerText
获取表单元素中的值 value
18.找节点:
通过id找:document.getElementById(“id名”) // 驼峰式写法
通过标签名找:document.getElementsByTagName(“标签名”).[索引值]
通过class名找:document.getElementsByClassName(“class名”).[索引值]
alert(new Date()) 获取当前系统日期
alert(new Date().getDay()) 获取星期
19.当if中的语句只有一条时,花括号{}可省略,但for语句中花括号不能省略。
for(条件1;条件2;条件3){}
//条件1:初始化;条件2:判断条件;条件3:执行语句
20.while 和do while的区别
while:先判断后执行语句;do while:先执行语句,再判断。
当条件不成立时,while语句停止循环;do while至少会运行一遍程序。
21.continue 退出当前一轮循环,break 直接跳出循环;
Undefined 这个值表示变量不含有值;可以通过将变量的值设置为 null 来清空变量;
NAN 表示不是一个数(not a number)。