javascript基本介绍(一)
(后面我会持续写关于关于js的知识,里面写了很多js的小细节大家可以看下希望对大家有帮助,同时希望大家如果感觉有帮助的话可以帮忙顶一下,谢谢了)
Javascript介绍
javascript是什么
-
javaScript 是因特网上最流行的脚本语言,它存在于全世界所有 Web 浏览器中,能够增强用户与 Web 站点和 Web 应用程序之间的交互。
脚本语言:脚本语言又被称为扩建的语言,或者动态语言,直接嵌入html页面,是一种解释型语言,由解释器来运行,用来控制软件应用程序,脚本通常以文本保存,只在被调用时进行解释或编译 -
JavaScript 是可插入 HTML 页面的编程代码。
-
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
-
JavaScript 与 Java 是两种完全不同的语言
javascript作用
我们通过javascript可以改变html内容,改变html样式,进行验证输入等。
javascript历史
Netscape(网景) 发明了 JavaScript
1997年由来自由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39 锤炼出了 ECMA-262,该标准定义了名为 ECMAScript 的全新脚本语言。
从此,Web 浏览器就开始努力(虽然有着不同的程度的成功和失败)将 **ECMAScript **作为 JavaScript 实现的基础。
ECMAScript 仅仅是一个描述,定义了脚本语言的所有属性、方法和对象。其他语言可以实现 ECMAScript 来作为功能的基准,JavaScript 就是这样:
javascript组成 ###
javascript的核心ECMAScript描述了语言的语法和基本对象。
一个完整的javaScript实现是由下面三个不同部分组成的。
- 本地对象和内置对象JavaScript(ECMAScript)即核心
- 文档对象模型(DOM)
- 浏览器对象模型(BOM)
导入js方式
HTML 的 <script> 标签用于把 JavaScript 插入 HTML 页面当中
编写JavaScript 三种种方式:事件定义时、内部JS和外部JS
内部JS程序,在HTML源码中
<script type="text/javascript">
alert(1);
</script>
外部JS程序,在HTML中引入单独的JS程序
<script src="1.js"></script>
1.js 内容
alert(2);
注意:在引用外部JS的script标签间不能编写JavaScript代码,Style标签可以放在任意的位置,但不建议放在body中。
Javascript基础语法
变量声明
变量是用于存储信息的容器
javascript中的变量与我们在java中的变量一样。
在javascript中使用用 var 运算符(variable 的缩写)加变量名定义的
JavaScript 变量名称的规则:
- 变量对大小写敏感(y 和 Y 是两个不同的变量)
- 变量必须以字母或下划线开始
注意:由于 JavaScript 对大小写敏感,变量名也对大小写敏感。
数据类型
JavaScript和Java一样存在两种数据类型
- 原始值 (存储在栈Stack中简单数据)
- 引用值 (存储在堆heap中对象)
5种原始数据类型
**Undefined、Null、Boolean、Number 和 String **
JavaScript中字符串是原始数据类型
typeof方法:运算符,查看变量类型
所有引用类型都是object
instanceof 运算符解决typeof对象类型判断问题
**区分 undefined 和 null **
- 变量定义了未初始化/ 访问对象不存在属性 --undefined
- 访问的对象不存在 --null
原始数据类型
(1)Number
创建方式:
var myNum=new Number(value);
var myNum=Number(value);
属性和方法:
- toString():转成字符串
- valueOf():返回一个 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(index):**返回索引字符
-
**charCodeAt(index):**返回索引字符unicode
-
**indexOf(String):**返回字符的索引
-
**lastIndexOf(String);**逆向返回字符的索引
-
**split(reg);**将字符串按照特殊字符切割成数组
-
**substr(index):**从起始索引号提取字符串中指定数目的字符
-
**substring(str1,str2):**提取字符串中两个指定的索引号之间的字符
-
**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();**排序
** join方法演示**
输出结果
**George,John,Thomas
George_John_Thomas **
(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日午夜到指定日期(字符串)的毫秒数
-
toLocaleString();获得本地时间格式的字符串
(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
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。
例子
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
输出:e
您可以向 RegExp 对象添加第二个参数,以设定检索。例如,如果需要找到所有某个字符的所有存在,则可以使用 "g" 参数 ("global")。
在使用 "g" 参数时,exec() 的工作原理如下:
-
找到第一个 "e",并存储其位置
-
如果再次运行 exec(),则从存储的位置开始检索,并找到下一个 "e",并存储其位置
var patt1=new RegExp("e","g");
do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null)
输出结果:**eeeeeenull
**
compile() 既可以改变检索模式,也可以添加或删除第二个参数。
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));
由于字符串中存在 "e",而没有 "d",以上代码的输出是:
truefalse
需求:
校验邮箱:
var email = haohao_827@163.com
var reg = /^[A-z]+[A-z0-9_-]*@[A-z0-9]+.[A-z]+$/;
reg.test(email);
引用类型
引用类型通常叫做类(class),也就是说,遇到引用值,所处理的就是对象。
从传统意义上来说,ECMAScript 并不真正具有类。
ECMAScript 定义了“对象定义”,逻辑上等价于其他程序设计语言中的类。
对象是由 new 运算符加上要实例化的对象的名字创建的
var obj=new Object();
Object对象自身用处不大,但是 ECMAScript 中的 Object 对象与 Java 中的 java.lang.Object 相似,ECMAScript 中的所有对象都由这个对象继承而来,Object 对象中的所有属性和方法都会出现在其他对象中
常用的javascript对象有 Boolean,Number,Array,String,Date,Math,RegExp.
可以使用instanceof运算符来判断对象的类型。
类型转换###
ECMAScript为开发者提供了大量的类型转换方法。
大部分类型具有进行简单转换的方法,还有几个全局方法可以用于更复杂的转换。
Boolean 值、数字和字符串的原始值它们是伪对象,这意味着它们实际上具有属性和方法。
转换成字符串
toString()方法.
转换成数字
ECMAScript 提供了两种把非数字的原始值转换成数字的方法,
即 **parseInt() **和 parseFloat()
前者把值转换成整数,后者把值转换成浮点数。
注意:只有对 String 类型调用这些方法,它们才能正确运行;对其他类型返回的都是 NaN(not a number)。
强制类型转换
使用强制类型转换可以访问特定的值。
ECMAScript 中提供了三种强制类型转换:
- 把给定的值转换成Boolean类型
- 把给定的值转换成数字
- 把给定的值转换成字符串
在js中一切元素都可以都判断出布尔值,所以我们把其他数据强转为布尔型
重点:(这个和java中不同)
下面的这些都需要记忆
var b1=Boolean(""); //false--空字符串
var b2 = Boolean("hello"); //true 非空值
var b3 = Boolean(50); // true 非空值
var b4 = Boolean(null);// false 空值
var b5 = Boolean(0); // flase -零
var b6 = Boolean(new object()); // true 对象
var b7 = Boolean(NaN); // flase
var b8 = Boolean(undefined); //flase 创建变量没有赋值
根据这个特性可以当做简单的if语句
如
var a;
a&&console.log("我是判断语句我不会输出,因为a是false所以不会执行到后面来");
运算符与表达式
一元运算符
- ++ 自加
- -- 自减
- void运算符
void 运算符对任何值返回 undefined。该运算符通常用于避免输出不应该输出的值,
例如,
从 HTML 的<a元素调用 JavaScript 函数时。
要正确做到这一点,函数不能返回有效值,否则浏览器将清空页面,只显示函数的结果。
例如:
<a href="javascript:window.open('about:blank')">Click me</a>
如果把这行代码放入 HTML 页面,点击其中的链接,即可看到屏幕上显示 "[object]"。这是因为 window.open() 方法返回了新打开的窗口的引用。然后该对象将被转换成要显示的字符串。要避免这种效果,可以用 void 运算符调用 window.open() 函数:
<a href="javascript:void(window.open('about:blank'))">Click me</a>
这使 window.open() 调用返回 undefined,它不是有效值,不会显示在浏览器窗口中。
提示:请记住,没有返回值的函数真正返回的都是 undefined。
**逻辑运算符**
逻辑运算会有三种 NOT AND OR
在学习各种逻辑运算符之前,让我们先了解一下 ECMAScript-262 v5 规范中描述的 ToBoolean 操作。
参数类型 结果
Undefined false
Null false
Boolean 结果等于输入的参数(不转换)
Number 如果参数为 +0, -0 或 NaN,则结果为 false;否则为 true。
String 如果参数为空字符串,则结果为 false;否则为 true。
Object true
-
逻辑NOT运算符
如果运算数是对象,返回 false
如果运算数是数字 0,返回 true
如果运算数是 0 以外的任何数字,返回 false
如果运算数是 null,返回 true
如果运算数是 NaN,返回 true
如果运算数是 undefined,发生错误 -
逻辑AND运算会
运算数 1 运算数 2 结果
true true true
true false false
false true false
false false false -
逻辑OR运算符
运算数 1 运算数 2 结果
true true true
true false true
false true true
false false false -
加性运算符
某个运算数是 NaN,那么结果为 NaN。
-Infinity 加 -Infinity, 结果为 -Infinity。
Infinity 加 -Infinity, 结果为 NaN。
+0 加 +0, 结果为 +0。
-0 加 +0, 结果为 +0。
-0 加 -0, 结果为 -0。
不过,如果某个运算数是字符串,那么采用下列规则:
如果两个运算数都是字符串,把第二个字符串连接到第一个上。
如果只有一个运算数是字符串,把另一个运算数转换成字符串,结果是两个字符串连接成的字符串。
关系运算符
关系运算符有>(大于),<(小于) >=(大于等于) <=(小于等于) ,它们的运算结果返回的是一个boolean值。
常规比较
如果是数字,那么比较与我们在java中操作一样。
如果是两个字符串使用关系运算符操作,那么我们可以简单理解成是按照字母的码值来比较。比较容易理解的是根据字母顺序,在前的字母比在后的小,所有的小写字母都大于大写字母。
比较数字或字符串
如果两个数字字符串比较,例如:”23”<”3”,它们也是按照数字在码表中的码值来比较.
如果一个是数字一个是字符串,那么会将字符串转换成数字在进行比较。
等性运算符
ECMAScript提供了两套等性运算符:
- 等号与非等号用来处理原始值
- 全等号与非全等号来处理对象。
执行类型转换的规则如下:
• 如果一个运算数是 Boolean 值,在检查相等性之前,把它转换成数字值。false 转换成 0,true 为 1。
• 如果一个运算数是字符串,另一个是数字,在检查相等性之前,要尝试把字符串转换成数字。
• 如果一个运算数是对象,另一个是字符串,在检查相等性之前,要尝试把对象转换成字符串。
• 如果一个运算数是对象,另一个是数字,在检查相等性之前,要尝试把对象转换成数字。
在比较时,该运算符还遵守下列规则:
• 值 null 和 undefined 相等。
• 在检查相等性时,不能把 null 和 undefined 转换成其他值。
• 如果某个运算数是 NaN,等号将返回 false,非等号将返回 true。
• 如果两个运算数都是对象,那么比较的是它们的引用值。如果两个运算数指向同一对象,那么等号返回 true,否则两个运算数不等。
全等号由三个等号表示(=),只有在无需类型转换运算数就相等的情况下,才返回 true。
非全等号由感叹号加两个等号(!)表示,只有在无需类型转换运算数不相等的情况下,才返回 true。
例子
<!DOCTYPE html>
<html>
<head>
<title>测试不全等</title>
<script>
var a = 1;
var b = 4;
a !== b && console.log("true");//true
var c = true;
a !== c && console.log("true");//true
</script>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
下面列一些特殊情况
表达式 值
null==undefined true
"NaN"==NaN false
5==NaN false
NaN==NaN false
NaN!=NaN true
- 三元运算符
在js中也存在三元运算符,与java中使用方式一样。例如:
var max = (num1 > num2) ? num1 :num2;
这个表达式描述的就是如果num1大于num2,那么max的值就是num1,返回之max的结果就是num2.
- 赋值运算符
简单的赋值运算符由等号(=)实现,只是把等号右边的值赋予等号左边的变量
每种主要的算术运算以及其他几个运算都有复合赋值运算符:
-
乘法/赋值(*=)
-
除法/赋值(/=)
-
取模/赋值(%=)
-
加法/赋值(+=)
-
减法/赋值(-=)
-
逗号运算符
用逗号运算符可以在一条语句中执行多个运算。例如:
var a=1,b=2,c=3;
Javascript基础语法-条件语句 ####
if语句
javascrip中的if语句,与我们在java中使用基本相同,例如:
if (i > 30) {
alert("大于 30");
}else {
alert("小于等于 30");
}
switch语句
switch语句也与我们在jdk1.7中使用相同,也就是说,它可以直接判断字符串类型
var BLUE = "blue", RED = "red", GREEN = "green";
switch (sColor) {
case BLUE: alert("Blue");
break;
case RED: alert("Red");
break;
case GREEN: alert("Green");
break;
default: alert("Other");
}
Javascript基础语法-循环语句
在javascript中也存在循环语句for while do-while,基本与在java中使用相同.
for示例
var iCount = 6;
for (var i = 0; i < iCount; i++) {
alert(i);
}
注意:在声明变量归我们使用var
while示例
var i = 0;
while (i < 10) {
i += 2;
}
do-while示例
var i = 0;
do {
i += 2;
} while (i < 10);
注意:在while后面的分号