JavaScript学习笔记
Posted 汤米先生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript学习笔记相关的知识，希望对你有一定的参考价值。
javascript基础知识
JS脚本执行的三种方式
1.脚本块
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
alert('holle')
</script>
</body>
</html>
- javascript脚本块可以出现在任何位置，都可以执行。
- 暴漏在脚本中的程序，在页面打开的时候执行，至上而下。
2.事件发生后执行
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="button" value="hello" onclick="alert('hello')"\\>
</body>
</html>
点击按钮有弹窗“hello”。
3.引入js文件
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript" src="js/hello.js">
///此次的语句不执行
</script>
</body>
</html>
JS变量
JS变量不用声明变量的类型，全由后面的值的类型决定，声明一个变量 “var i；”。
当一个变量没有手动赋值时，系统会默认赋值undefined。
局部变量和全局变量：
全局变量的周期为从游览器页面打开到游览器页面关闭，耗费内存空间，能使用局部变量尽量使用局部变量。
局部变量是在函数内部声明的变量，生命周期是函数的开始到结束。
如果一个变量前没用var声明，那么无论这个变量在哪都视为是全局变量。
JS函数
定义函数的两种方式
第一种：
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript" >
function sum(a,b){
alert(a+b);
}
sum(20,10);
</script>
</body>
</html>
第二种：
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript" >
say=function(name){
alert('我是'+name);
}
say("小明");
</script>
</body>
</html>
JS函数与c语言函数相同，只有调用了才能执行。
当有两个同名函数出现，后一个函数会覆盖掉前一个，JS函数中不存在重载的现象。
JS的数据类型
JS数据类型有原始类型和引用类型
原始类型:Undefined,Number,String,Boolean,Null.
引用类型：Object与Object的子类。
JS中有一个typeof运算符，这个运算符可以在程序运行阶段动态的获取变量的数据类型。
typeof的运算符的语法格式：
typeof 变量名；
typeof运算符的运算结果是以下6个字符串之一；注意全部都是小写。
“undefine”
" number"
“string”
“boolean”
“object”
“function”
在JS中比较相等时用“==”，没有equal。
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript" >
var i;
alert(typeof i);
var j=10;
alert(typeof j);
var k="abc"
alert(typeof k);
var a=null;
alert(typeof a);
var b=false;
alert(typeof b);
var c=new Object();
alert(typeof c);
function d(){
}
alert(typeof d);
</script>
</body>
</html>
1.Undefined
当一个变量没有手动赋值时，系统默认是undefined。
也可以手动赋值为undefined。
2. Number
Number包含数的所有类型，NaN和Infinite。
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
var a=100;
var b="你好";
alert(a/b) //除号运算后应该是一个数字，但不是数字，那么最后的结果是NaN。
var c="abc";
var d=10;
alert(c+d); //结果为字符拼接 abc10.
var e=10;
var f=0;
alert(e/f); //结果是无穷大，所以是Infinite。 但10/3会显示3.333333
</script>
</body>
</html>
3. IsNaN()函数
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
function sum(a,b){
if(isNaN(a)||isNaN(b)){
alert("参与运算的必须是数字！")
return;
}
alert(a+b);
}
sum(1,2)
</script>
</body>
</html>
4.parseInt（）函数
parseInt()函数： 将字符串自动转换为数字，并且取整数。
5.parseFloat（）函数
parseFloat函数：将字符串自动转化为数字。
6.Math.ceil（）函数
Math.ceil（）函数：将字符串自动转换为数字，向上取整。
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
alert(parseInt(3.9999)) //取3
alert(parseFloat("3.99")+1)//取4.99
alert(Math.ceil("2.1")) //取3
</script>
</body>
</html>
7.Boolean
布尔类型只有两个值：true 和 false。
布尔函数和布尔类型都一样，有就为真，没有就为假
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
var name='';
if(name){
alert('姓名为'+name);
}else{
alert('请输入姓名');
}
alert(Boolean(0))
alert(Boolean(1))
</script>
</body>
</html>
8.String
对与JS中的字符串可以用单引号也可以用双引号
创建字符串对象的方式：
1. var str ="abc"
2. var str1 =new String("abc");//使用Js内置的支持类String。
常用函数：
indexOf()
获取字符串中对象第一次出现的索引。
lastIndexOf（）
获取字符串中对象最后一次出现的索引。
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
alert("abcdb".indexOf("b"));
alert("abcd".indexOf("a")>=0? "包含字母":"不包含")
alert("abcdb".lastIndexOf("b"));
</script>
</body>
</html>
replace()函数
替换函数，一次只能替换一个，想要全部替换需要用到正则表达式。
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
alert("abcdb".replace('b','a'));
</script>
</body>
</html>
substr()函数和substring()函数
都是截取字符串的某一段。
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
alert("abcdb".substr(2,4));
//截取部分包括结束位置
alert("abcdb".substring(2,4))
//截取部分不包括结束位置
</script>
</body>
</html>
9.Object类型
- Object是所有类型的超类，自定义的任何类型，默认继承Object。
- Object包括哪些属性？
prototype属性（常用的，作用是给类动态的扩展属性和函数）
constructor属性 - Object包含哪些函数？
toString（）
valueof（）
toLocaleString（）
4.JS当中怎么创建类？怎么new一个对象？
定义类的语法：
第一种方法：
function 类名（形参）{
}
第二种方法：
类名 = function（形参）{
}
创建类的写法：
new 构造方法名（实参）//构造方法名和类名一致。
用法决定它是函数还是类。
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
function stu(){
alert('我是一名学生')
}
stu(); //引用函数
new stu(); //创建一个类
</script>
</body>
</html>
JS中类的定义，又是构造函数的定义，类的定义是和函数的定义一起完成的。
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
function stu(a,b,c){
this.id = a;
this.name = b;
this.age = c;
}
var s1 =new stu(123,"小明",20);
alert(s1.age)
alert(s1.id)
alert(s1.name)
//另一种写法
var s2 = new stu(124,"小军",20);
alert(s2["age"]);
alert(s2["id"]);
alert(s2["name"]);
</script>
</body>
</html>
可以通过prototype 这个属性来给类动态扩展属性和函数
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
function stu(a,b,c){
this.id = a;
this.name = b;
this.age = c;
}
var s1 =new stu(123,"小明",20);
alert(s1.age)
alert(s1.id)
alert(s1.name)
stu.prototype.getName = function(){
return this.name;
}
var s =s1.getName();
alert(s)
</script>
</body>
</html>
同样的可以给String类型扩展函数
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
String.prototype.b =function(){
alert('这是给String拓展的函数')
}
"abc".b()
</script>
</body>
</html>
JS中的事件
JS常见事件
1. blur 失去焦点
2. focus 获得焦点
3. click 鼠标单击
4. dblclick 鼠标双击
5. keydown 键盘按下
6. keyup 键盘弹起
7. change 下拉列表选中项改变，或文本框选中改变
8. load 页面加载完毕
9. mousedown 鼠标按下
10. mouseover 鼠标经过
11. mousemove 鼠标移动
12. mouseout 鼠标离开
13. mouseup 鼠标弹开
14. reset 表单重置
15. select 文本被选定
16. submit 表单提交
注册事件的方式
1. 回调函数
回调函数的特点： 自己不调用这个函数，由其他程序负责调用。
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
function say(){
alert("hello")
}
</script>
<input type="button" value="按钮" onclick="say()" /> //另外一个程序调用函数
</body>
</html>
2. 利用纯JS代码完成事件的注册
第一步： 先获取这个按钮对象（document是全部小写，内置对象，可以直接拿来用，document就代表整个HTML页面）
var btt =document.getElementById(“bt”)
第二部给按钮的对象的属性赋值
btt.onclick = say;
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="button" value="按钮" id="bt" />
<script type="text/javascript">
function say(){
alert("hello,Js!")
}
var btt =document.getElementById("bt")
btt.onclick = say; ///无需加小括号
//也可以使用匿名内部类
document.getElementById("btt").onclick = function(){
alert("hello,world")
}
</script>
</body>
</html>
页面加载完毕之后，onload才执行，所以可以用onload来注册事件
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
document.getElementById("btt").onclick =function(){
alert("hellwo.....")
}
}
</script>
<input type="button" value="按钮1" id="btt"/>
</body>
</html>
JS代码捕捉回车键
ReactJs学习笔记01
译文：18个实用的JavaScript代码片段，助你快速处理日常编程任务
[原创]java WEB学习笔记61：Struts2学习之路--通用标签 property，uri，param,set,push,if-else,itertor,sort,date,a标签等(代码片段