JavaScript学习笔记
2018-02-20 23:01
330 查看
javascript笔记
一、js的简介
1、js是什么
js是可以嵌入到html中，是 基于对象 和 事件驱动 的 脚本语言
特点：
(1)交互性
(2)安全性：js不能访问本地磁盘
(3)跨平台：浏览器中都具备js解析器
2、js能做什么
(1)js能动态的修改(增删)html和css的代码
(2)能动态的校验数据
3、js历史及组成
ECMAScript BOM(浏览器对象模型) DOM(文档对象模型)
4、js被引入的方式
(1)内嵌脚本
首先先创建一个js文件
其次在html中引入
放在哪都行 但是在不影响html功能的前提下 越晚加载越好
二、js基本语法
1、变量
(1)弱类型语言，变量类型声明为var
2、原始数据类型 调用typeof方法可获得变量类型
(1)number:数字类型
(2)string：字符串类型
(3)boolean:布尔类型
(4)null:空类型
(5)underfind:未定义
注意：number、boolean、string是伪对象
类型转换：
number\boolean转成string
toString();
string\boolean转成number
parseInt()
parseFloat()
boolean不能转
string可以将数字字符串转换成number 如果“123a3sd5” 转成123
强制转换
Boolean() 强转成布尔
数字强转成布尔 非零就是true 零就是false
字符串强转成布尔 非“”(空字符串)就是true 空字符串“”就是false
Number() 强转成数字
布尔转数字 true转成1 false转成0
字符串转数字 不能强转
3、引用数据类型
java: Object obj = new Object();
js: var obj = new Object();
var num = new Number();
4、运算符
(1)赋值运算符
var x = 5;
(2)算数运算符
+ - * / %
+: 遇到字符串变成连接
-：先把字符串转成数字然后进行运算
*: 先把字符串转成数字然后进行运算
/: 先把字符串转成数字然后进行运算
(3)逻辑运算符
&& ||
(4)比较运算符
< > >= <= != ==
===:全等：类型与值都要相等
(5)三元运算符
3<2?"大于":"小于"
(6)void运算符
typeof:判断数据类型 返回我的数据类型
instanceof：判断数据类型 是否是某种类型
(1)if-else
//条件:
//数字非0 字符串非空====true
(2)switch
(3)for和while 基本和Java一样
三、js的内置对象
(1)Number
创建方式：
(2)Boolean
创建方式：
属性和方法：
toString():转成字符串
valueOf()：返回一个 Boolean 对象的基本值(boolean)
(3)String
创建方式：
var str = new String(s);
var str = String(s);
属性和方法：
length:字符串的长度
charAt():返回索引字符
charCodeAt:返回索引字符unicode
indexOf():返回字符的索引
lastIndexOf();逆向返回字符的索引
split();将字符串按照特殊字符切割成数组
substr():从起始索引号提取字符串中指定数目的字符
substring():提取字符串中两个指定的索引号之间的字符
toUpperCase();转大写
(4)Array
创建方式：
var arr = new Array();//空数组
var arr = new Array(size);//创建一个指定长度的数据
var arr = new Array(element0, element1, ..., elementn);//创建数组直接实例化元素
var arr = [];//空数组
var arr = [1,2,5,"java"];//创建数组直接实例化元素
属性和方法：
length:数组长度
join()：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个
pop():删除并返回最后元素
push()：向数组的末尾添加一个或更多元素，并返回新的长度
reverse();反转数组
sort();排序
(5)Date
创建方式：
var myDate = new Date();
var myDate = new Date(毫秒值);//代表从1970-1-1到现在的一个毫秒值
属性和方法
getFullYear():年
getMonth():月 0-11
getDate():日 1-31
getDay()：星期 0-6
getTime():返回1970年1月1日午夜到指定日期（字符串）的毫秒数
toLocalString();获得本地时间格式的字符串
(6)Math
创建方式：
Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，
不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。
属性和方法
PI：圆周率
abs():绝对值
ceil():对数进行上舍入
floor():对数进行下舍入
pow(x,y)：返回 x 的 y 次幂
random():0-1之间的随机数
round():四舍五入
(7)RegExp
创建方式：
var reg = new RegExp(pattern);
var reg = /^正则规则$/;
规则的写法：
[0-9]
[A-Z]
[a-z]
[A-z]
\d 代表数据
\D 非数字
\w 查找单词字符
\W 查找非单词字符
\s 查找空白字符
\S 查找非空白字符
n+ 出现至少一次
n* 出现0次或多次
n? 出现0次或1次
{5} 出现5
{2,8} 2到8次
方法：
test(str):检索字符串中指定的值。返回 true 或 false
需求：
校验邮箱：
var email = haohao_827@163.com
var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
reg.test(email);
示例 demo1.html：
四、js的函数
五、js事件
六、js的bom
七、js的dom
一、js的简介
1、js是什么
js是可以嵌入到html中，是 基于对象 和 事件驱动 的 脚本语言
特点：
(1)交互性
(2)安全性：js不能访问本地磁盘
(3)跨平台：浏览器中都具备js解析器
2、js能做什么
(1)js能动态的修改(增删)html和css的代码
(2)能动态的校验数据
3、js历史及组成
ECMAScript BOM(浏览器对象模型) DOM(文档对象模型)
4、js被引入的方式
(1)内嵌脚本
<input type="button" value="button" onclick="alert('xxx')" /> (2)内部脚本<script type="text/javascript">
alert("xxx");
</script> (3)外部脚本首先先创建一个js文件
其次在html中引入
<script type="text/javascript" src="outdoors.js"></script>js代码放在哪？
放在哪都行 但是在不影响html功能的前提下 越晚加载越好
二、js基本语法
1、变量
(1)弱类型语言，变量类型声明为var
var x = 5; x = 'javascript'; var y = "hello"; var b = true;(2)直接写，不需要声明类型
x = 5;
2、原始数据类型 调用typeof方法可获得变量类型
(1)number:数字类型
(2)string：字符串类型
(3)boolean:布尔类型
(4)null:空类型
(5)underfind:未定义
注意：number、boolean、string是伪对象
类型转换：
number\boolean转成string
toString();
string\boolean转成number
parseInt()
parseFloat()
boolean不能转
string可以将数字字符串转换成number 如果“123a3sd5” 转成123
强制转换
Boolean() 强转成布尔
数字强转成布尔 非零就是true 零就是false
字符串强转成布尔 非“”(空字符串)就是true 空字符串“”就是false
Number() 强转成数字
布尔转数字 true转成1 false转成0
字符串转数字 不能强转
3、引用数据类型
java: Object obj = new Object();
js: var obj = new Object();
var num = new Number();
4、运算符
(1)赋值运算符
var x = 5;
(2)算数运算符
+ - * / %
+: 遇到字符串变成连接
-：先把字符串转成数字然后进行运算
*: 先把字符串转成数字然后进行运算
/: 先把字符串转成数字然后进行运算
(3)逻辑运算符
&& ||
(4)比较运算符
< > >= <= != ==
===:全等：类型与值都要相等
(5)三元运算符
3<2?"大于":"小于"
(6)void运算符
<a href="javascript:void(0);">xxxxxx</a>(7)类型运算符
typeof:判断数据类型 返回我的数据类型
instanceof：判断数据类型 是否是某种类型
var obj = new Object(); alert(typeof obj);//object alert(obj instanceof Object);//true5、逻辑语句
(1)if-else
//条件:
//数字非0 字符串非空====true
if(9){
alert("true--");
} else{
alert("false--");
}(2)switch
var x = "java";
switch(x){
case "css":
alert("css");
break;
case "js":
alert("js");
break;
case "java":
alert("java");
break;
default:
alert("def");
}(3)for和while 基本和Java一样
for(var i = 0;i<5;i++) {
alert(i);
} (4)for in var arr = [1,3,5,7,"js"];
for(index in arr) {//index代表角标
//alert(index);
alert(arr[index]);
}三、js的内置对象
(1)Number
创建方式：
(2)Boolean
创建方式：
var bool = new Boolean(value); var bool = Boolean(value);
属性和方法：
toString():转成字符串
valueOf()：返回一个 Boolean 对象的基本值(boolean)
(3)String
创建方式：
var str = new String(s);
var str = String(s);
属性和方法：
length:字符串的长度
charAt():返回索引字符
charCodeAt:返回索引字符unicode
indexOf():返回字符的索引
lastIndexOf();逆向返回字符的索引
split();将字符串按照特殊字符切割成数组
substr():从起始索引号提取字符串中指定数目的字符
substring():提取字符串中两个指定的索引号之间的字符
toUpperCase();转大写
(4)Array
创建方式：
var arr = new Array();//空数组
var arr = new Array(size);//创建一个指定长度的数据
var arr = new Array(element0, element1, ..., elementn);//创建数组直接实例化元素
var arr = [];//空数组
var arr = [1,2,5,"java"];//创建数组直接实例化元素
属性和方法：
length:数组长度
join()：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个
pop():删除并返回最后元素
push()：向数组的末尾添加一个或更多元素，并返回新的长度
reverse();反转数组
sort();排序
(5)Date
创建方式：
var myDate = new Date();
var myDate = new Date(毫秒值);//代表从1970-1-1到现在的一个毫秒值
属性和方法
getFullYear():年
getMonth():月 0-11
getDate():日 1-31
getDay()：星期 0-6
getTime():返回1970年1月1日午夜到指定日期（字符串）的毫秒数
toLocalString();获得本地时间格式的字符串
(6)Math
创建方式：
Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，
不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。
属性和方法
PI：圆周率
abs():绝对值
ceil():对数进行上舍入
floor():对数进行下舍入
pow(x,y)：返回 x 的 y 次幂
random():0-1之间的随机数
round():四舍五入
(7)RegExp
创建方式：
var reg = new RegExp(pattern);
var reg = /^正则规则$/;
规则的写法：
[0-9]
[A-Z]
[a-z]
[A-z]
\d 代表数据
\D 非数字
\w 查找单词字符
\W 查找非单词字符
\s 查找空白字符
\S 查找非空白字符
n+ 出现至少一次
n* 出现0次或多次
n? 出现0次或1次
{5} 出现5
{2,8} 2到8次
方法：
test(str):检索字符串中指定的值。返回 true 或 false
需求：
校验邮箱：
var email = haohao_827@163.com
var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
reg.test(email);
示例 demo1.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
<script type="text/javascript">
//--------------------Number-----------------------------
//var num = new Number(5);
//alert(typeof num);//object
//alert(typeof num.toString());//string
//alert(typeof num.valueOf());//number
//--------------------String-----------------------------
var str = new String("a-b-cdc-FG");
//alert(str.length);//10
//alert(str.charAt(4));//c
//alert(str.charCodeAt(4));//99
//alert(str.indexOf("c"));//4
//alert(str.lastIndexOf("c"));//6
//var arr = str.split("-");
/* for(var i=0;i<arr.length;i++){
alert(arr[i]);
} */
//alert(str.substr(2,3));//b-c
//alert(str.substring(2,3));//b
//alert(str.toUpperCase());
//--------------------Array-----------------------------
//var arr = [3,"z",1,"java",'js',true,4];
//alert(arr.length);//7
//alert(arr.join("-"));//3-7-1-java-js-true-4
//alert(arr.pop());//4
//alert(arr);//3,7,1,"java",'js',true
//alert(arr.push("R"));
//alert(arr);
//alert(arr.reverse());
//alert(arr.sort());//按照字符串字典顺序进行排序
//--------------------Date-----------------------------
var date = new Date();
//alert(date.toString());
//alert(date.toLocaleString());
/* alert("year:"+date.getFullYear());//2015
alert("month:"+date.getMonth());//8
alert("date:"+date.getDate());//23
alert("day:"+date.getDay());//3 */
/* var time1 = date.getTime();
var time2 = 3*24*60*60*1000;
alert(new Date(time1+time2).toLocaleString()); */
//--------------------Math-----------------------------
/* var x = "-897";
alert(Math.abs(x)); */
/* var x = 12.34;
var y = 2;
var z = 4; */
/* alert(Math.ceil(x));//13
alert(Math.floor(x));//12
alert(Math.round(x));//12 */
//alert(Math.pow(y, z));//16
//alert(Math.random());
//--------------------RegExp-----------------------------
/* var email = "haohao_827@163.com";
var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
alert(reg.test(email)); */
</script>
</html>四、js的函数
五、js事件
六、js的bom
七、js的dom
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Javascript教程，javascript入门,学习笔记,Javascript Tutorials
- javascript学习笔记(二十) 获得和设置元素的特性（属性）
- 20150727 Javascript进阶学习笔记（上）
- log4javascript学习笔记
- 前端学习实践笔记--JavaScript深入【1】
- JavaScript学习笔记三
- JavaScript学习笔记1
- JavaScript学习笔记4--模拟输入注册码时的自动切换字段
- JavaScript权威设计--JavaScript脚本化文档Document与CSS(简要学习笔记十五)
- Javascript 学习 笔记一
- 【JavaScript学习笔记】hello world
- 【JavaScript学习笔记】if使用
- JavaScript权威设计--CSS(简要学习笔记十六)
- JavaScript学习笔记之（二）
- javascript学习笔记1
- [JavaScript]学习笔记：AJAX
- Javascript学习笔记——作用域
- javascript设计模式学习笔记之“类式继承”
- JavaScript学习笔记1：Array类
- JavaScript网页特效学习笔记1