JavaScript第一天
2015-10-20 14:39
447 查看
1.静态的网页技术和动态的网页技术
静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。你编的是什么它显示的就是什么、不会有任何改变。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。
一般的html页面都会是静态网页,而jsp页面是动态网页(可以和数据库进行数据的相互传输).
DHTML
2.页面开发使用前端技术
html+css+javscript
这个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位和效果渲染，再通过JavaScript实现元素相应的动态变化效果.(DHTML)
3.富客户端概念
3.1 网络应用程序经历了从胖客户端到瘦客户端的发展历程,胖客户端是相对于传统的C/S结构的网络应用程序来说的,
而瘦客户端一般都是相对于B/S结构的Web应用来说的
3.2 富客户端（Rich Client)简介富因特网应用程序（Rich Internet Applications，RIA）利用具有很强交互性的富客户端技术来为用户提供一个更高和更全方位的网络体验。富客户端结合了桌面应用程序和b/s的一些优点，但本质还是b/s应用。
3.3 富客户端技术充分利用本地机器的处理能力来处理数据，而不需要把某些数据发送到服务器处理，充分利用了本地机器的资源。
3.4 ajax jquery flex Silverlight JavaFX等都属于构建富客户端的技术
3.5 javascript也是构建富客户端要是使用一个最基本的技术,以及之后要学习的Jquery.
4.javascript和java
4.1 javascript与Java是由不同的公司开发的不同产品：
javascript是Netscape公司的产品，其目的是为了扩展Netscape Navigator(网景导航者浏览器)功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言.
而Java是SUN Microsystems公司推出的新一代面向对象的程序设语言，常用于后台代码的开发.
4.2 于1995年由Netscape公司的Brendan Eich首次设计实现而成 。由于Netscape公司与Sun公司合作，Netscape高层希望它看上去能够像Java，因此取名为JavaScript
4.3 所以说javascript和java是俩种 完全不同的开发语言(但是其实我们在使用的时候还是能感觉到两者的语法很相似)
5. ECMAScript标准
5.1 随着网景公司推出javascript后所取得的成功,微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行.
5.2 为了统一规格，因为JavaScript兼容于ECMA标准，Ecma国际以JavaScript为基础制定了ECMAScript标准,所以javascript也称为ECMAScript。
5.3 Ecma国际（Ecma International）是一家国际性会员制度的信息和电信标准组织
改组织负责的标准有:
CD-ROM格式
C#语言规范
C++/CLI语言规范
通用语言架构（CLI）
ECMAScript语言规范（JavaScript）
Eiffel语言
电子产品环境化设计要素
Universal 3D标准
OOXML
6.完整的JavaScript包含的三个部分
6.1 ECMAScript规范，描述了该语言的语法和基本对象的定义;
6.2 文档对象模型（DOM），描述处理网页内容的方法
6.3 浏览器对象模型（BOM），描述与浏览器进行交互的方法
7.javascript语言的特点
7.1 解释执行的脚本语言
它的基本结构形式与c、c++、java十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它是需要嵌入到html页面中,让浏览器来解释执行的。
7.2 基于对象的语言
javascript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象.(没有java面向对象纯正)
new Date();
7.3 简单性
它是一种基于java基本语法语句和控制流之上的简单而紧凑的设计， 基本java中的语法都可以使用到javascript中,所以对于学过java语言的情况下,学习javascript也相对比较简单.
7.4 弱语言
javascript的语法松散要求不严谨,比如:一个变量在之前没有声明的情况下就可以直接使用,声明变量的时候也可以不声明变量的类型等.
7.5 事件驱动
我们在页面上的操作,例如 左键/右键的单击、双击,键盘上面的按键的监听，鼠标的移动 鼠标拖拽 鼠标滚轴的滚动等等事件的响应处理都可以交给javascript
7.6 动态性
javascript可以直接对用户或客户输入做出响应，无须经过web服务程序.
7.7 安全性
javascript不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。
7.8 跨平台性
javascript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持javascript的浏览器就可正确执行,但是不同浏览器以及同一浏览器的不同版本对javascript的支持是不同的(浏览器的兼容性)
8.在页面中使用javascript的作用
1.改进网页的设计布局(操作页面中的标签元素)
2.验证表单
3.检测浏览器、控制浏览器的行为
4.处理页面中触发的事件
5.在使用ajax的时候也要用到javascript
9.javascript在页面中的位置
1.直接写到页面中
须位于 <script> 与 </script> 标签之间,放置在 HTML 页面的 <body> 或者 <head> 标签中:
<script type="text/javascript">
//在这里写JS代码
</script>
注意:js代码所写的位置会影响到代码的执行效果,因为浏览器会从上到下去加载整个html页面文件,如果js代码是写在head里面,就是现执行js代码然后加载页面标签元素,如果是写body标签中的下面,则表示先加载html页面元素然后在执行js代码.
2.写到标签元素的事件属性里面
<div onclick="javascript:alert('hello world')">
3.写到一个外部的文件里面(.js结尾的文件)
写到一个js文件中,然后哪个页面使用就引入过来,类似于css样式表的引用
例如:
<script type="text/javascript" src="js/test1.js"></script>
10.javascript中的注释
10.1 单行注释
//注释
10.2 多行注释
/*
多行注释
多行注释
*/
11.中的标示符(变量名):
大小写敏感
不能以数字开头
可以由字母、数字、下划线、$符号组成
不能是javascript中的关键字
12.javascript中声明变量:
任何类型的变量都可以用var关键字来声明.
var a = "";
var b = 10;
var c = 10.9;
var d = new Date();
var e = true;
13.javascript中的null和undefined
//弹出null
var age = null;
alert(age);
//弹出undefined (根据浏览器来定)
var age;
alert(age);
14.javascript中的三种弹框:
alert confirm prompt
alert 提示框/警告框
confirm 确认框
prompt 输入对话框
这三个方法都是window这个对象的方法.window是JS中的一个内置对象,只有window对象的方法,调用的时候才可以省去对象的名字,直接用方法名字来调用.window.alert("hello")和alert("hello")是一样的效果.
这三种弹框都有一个共同的特点,当浏览器运行一个弹框代码的时候,用户如果不点击弹框中的确定或者取消按钮的话,浏览器就会卡这个弹框处,下面的页面代码就不会被执行.
alert弹出一个警告框/提示框,用户点击确定按钮之后就可以继续访问。
confirm弹出一个确认框,用户可以点击确定或者取消,这个confirm方法会相应的返回true或者false.
prompt弹出一个可以让用户输入的框口,用户输入后点击确定,这个方法会把用户输入的内容返回.
prompt("请输入你的性别:");
同时还可以在输入框设置一个默认值.
prompt("请输入你的性别:","男");
15.javascript中的输出到控制台
使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单进行查看。
注意:有些浏览器可能需要安装相应的插件才能开启调试模式
例如:
console.log("tom");
16.javascript中的数据类型
字符串（String）、数字(Number)、布尔(Boolean)
数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。
注意:可以使用全局函数typeof()来判断一个变量的数据类型,只能判断基础数据类型。对于使用内置构造函数创建的对象，均返回object
16.1 JavaScript 拥有动态类型的特点。这意味着相同的变量可用作不同的类型：
例子:
var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "John"; // 现在 x 为字符串
16.2 字符串 String
字符串可以是引号中的任意文本。可以使用单引号或双引号：
var name="tom";
var name='tom';
可以在字符串中使用引号，只要不匹配包围字符串的引号即可：
var v="He is called 'tom'";
var v='He is called "tom"';
字符串对象的常用方法:
var s = "hello world";
document.write("<h1>字符串对象</h1>")
//获得字符串的长度
document.write(s.length+"<br>");
//从下标为3的位置开始,截取4个字符,包括下标为3的位置的字符
document.write(s.substr(3,4)+"<br>");
//从下标为6的位置开始截取,截取到下标为8的位置,但是不包括下标为8的字符[6,8)
document.write(s.substring(6,8)+"<br>");
//trim()去掉字符串俩边的空格,但是这个方法有可能浏览器不支持.
document.write(s.trim().length+"<br>");
//字符串转换为大写
document.write(s.toUpperCase()+"<br>");
//字符串转换为小写
document.write(s.toLowerCase()+"<br>");
//分割字符串 返回一个数组
document.write(s.split(" ")+"<br>");
document.write(s.split(" ").length+"<br>");
document.write(s.split(" ")[0]+"<br>");
document.write(s.split(" ")[1]+"<br>");
注意:javascript中的转义符和java的一样也是\
16.3 数字 Number
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
极大或极小的数字可以通过科学（指数）计数法来书写：
var y=123e5; // 12300000
var z=123e-5; // 0.00123
16.4 布尔
布尔（逻辑）只能有两个值：true 或 false。
var x=true;
var y=false;
16.5 数组 Array
javascript中数组的特点:
1.数组的长度是可变的
2.数组里面放的数据类型也可以不同
3.数组的长度是和你所使用到的数组中最大下标相关联的.
//创建数组的时候,可以指定长度也可以不指定
//var a = new Array(4);
//var a = [1,3,4,"tom"];
var a = new Array();
a[0] = "tom0";
a[1] = "tom1";
a[2] = "tom2";
a[6] = "tom6";
document.write(a.length+"<br>");
/*
正常情况的循环
这个循环的输出结果为:
tom0
tom1
tom2
undefined
undefined
undefined
tom6
*/
for(var i=0;i<a.length;i++){
document.write(a[i]+"<br>");
}
/*
for-in循环
这个循环的输出结果为:
tom0
tom1
tom2
tom6
*/
//for-in除了变量数组外还能变量一个对象,这时变量i拿的就不是下标了,而是对象中的属性.
//这里的这个变量i每次拿到的是数组下标,而且是已经存在值的位置的下标,对于那些值是undefined的位置下标是不会拿的.
for(i in a){
document.write(a[i]+"<br>");
}
16.6 空（Null）、未定义（Undefined）
//null
var name = null;
//Undefined
var age;
16.7 对象 Object
javascript中{}可以代表对象
16.7.1 javascript已经存在的类型的对象
var v = new Date();
var obj1 = new Object(), obj2 = {};//Object 对象
var arr1 = new Array(), arr2 = [];//Array 对象
var boo1 = new Boolean(true), boo2 = true;//Boolean 对象
var num1 = new Number(123), num2 = 123.45;//Number 对象
var str1 = new String("abc"), str2 = 'abc';//String 对象
16.7.2 自定义的对象1:
var person={firstname:"John", lastname:"Doe", id:5566};
alert(person.firstname);
alert(person.lastname);
alert(person.id);
16.7.3 自定义的对象2:
var p =
{
grade:1,
name : "tom",
age:27,
sex:"男",
speak:function(words)
{
alert(this.name+"说："+words+"!");
}
}
p.speak("hello");
16.7.4 自定义的对象3:
function Person(name){
this.name = name;
this.age = 20;
this.say=say;
}
function say(){
document.write(this.name+":大家好,我今年"+this.age+"岁了");
}
var p = new Person("张三");
p.say();
-----------------------------
function Person(name){
this.id = 1;
this.name = name;
this.age = 20;
this.say=function(msg){
document.write(this.name+" 说:"+msg);
};
}
var p = new Person("张三");
p.say();
17.javascript中的对象、属性、方法/函数
对象、属性、方法基本和java的中的理解保存一致.
特别的对javascript中的方法/函数稍作说明:
17.1 形式
//无参的
function test1(){
}
//有参的
function test2(name){
}
//多个参数的
function test3(v1,v2){
alert(v1+v2);
}
//有返回值的
function test4(v1,v2){
return v1+v2;
}
//匿名函数 在上面自定义对象的例子中有使用过
function(){
//....
}
17.2 位置
定义在<script>标签中或者是外部的.js文件中
注意:定义函数并不是执行函数
17.3 调用
在<script>标签中调用定义的函数
例如:可以先调用后定义
<script type="text/javascript">
test();
function test(){
alert("hello world");
}
test();
</script>
在html元素的事件属性中调用定义过的函数
例如:可以先调用后定义
<script type="text/javascript">
function test(){
alert("hello world");
}
</script>
<input type="button" value="点击" onclick="test()" />
18.javascript中的局部变量和全局变量
18.1局部变量:
在 JavaScript 函数内部声明的变量（*使用 var *）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，局部变量就会被删除。
18.2全局变量:
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
注意:全局变量都默认是window对象的属性,所以一个全局变量name也可以用window.name来访问,方法window的属性的是都可以省去window不写,直接写属性名字就可以了.window的方法也是同样的.
window是javascript中的一个内置对象可以直接使用表示浏览器窗口
18.3变量的声明周期:
javaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
18.4向未声明的 JavaScript 变量分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
name="tom";
将声明一个全局变量 name，即使它在函数内执行。
例如: 注意 全局变量会在页面关闭后被删除。
<script type="text/javascript">
function test(){
var name = "tom";
}
function test1(){
alert(name);
}
test();
test1();
</script>
19.javascript中的运算符
19.1 算术运算符
+ 加法
- 减法
* 乘法
/ 除法
% 取模
++ 自增
-- 自减
19.2 赋值运算符
给定 x=10 和 y=5
= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0
19.3字符串的 + 运算符
连接多个字符串:
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
19.4字符串和数字进行加法运算
例如:
x=5+5;
y="5"+5;
z="Hello"+5;
x,y, 和 z 输出结果为:
10 数字类型
55 字符串类型
Hello5 字符串类型
20.javascript中的比较
20.1 比较运算符
对于给的变量x=5:
== 等于
x==8 false
x==5 true
x=="5" true
=== 绝对等于/恒等于 (值和类型均相等)
x==="5" false
x===5 true
!= 不等于
x!=8 true
!== 绝对不等于 (值和类型均不相等)
x!=="5" true
x!==5 false
> 大于
x>8 false
< 小于
x<8 true
>= 大于或等于
x>=8 false
<= 小于或等于
x<=8 true
20.2 逻辑运算符
对于给的变量 x=6 以及 y=3:
&& and (x < 10 && y > 1) 为 true
|| or (x==5 || y==5) 为 false
! not !(x==y) 为 true
注意:& |运算结果是0或者1
20.3 条件运算符
java中的三目运算符:
var msg =(age<18)?"年龄太小":"年龄已达到";
21.条件语句
21.1 if语句
if (condition){
// 当条件为 true 时执行的代码
}
-----------------------------------
if (condition){
//当条件为 true 时执行的代码
}
else{
//当条件不为 true 时执行的代码
}
-----------------------------------
if (condition1){
//当条件 1 为 true 时执行的代码
}
else if (condition2){
//当条件 2 为 true 时执行的代码
}
else {
//当条件 1 和 条件 2 都不为 true 时执行的代码
}
20.2 switch语句
例如:
var day=new Date().getDay();
var x = "";
switch (day){
case 0:
x="Today it's Sunday";
break;
case 1:
x="Today it's Monday";
break;
case 2:
x="Today it's Tuesday";
break;
case 3:
x="Today it's Wednesday";
break;
case 4:
x="Today it's Thursday";
break;
case 5:
x="Today it's Friday";
break;
case 6:
x="Today it's Saturday";
break;
default:
x="error!!!";
}
静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。你编的是什么它显示的就是什么、不会有任何改变。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。
一般的html页面都会是静态网页,而jsp页面是动态网页(可以和数据库进行数据的相互传输).
DHTML
2.页面开发使用前端技术
html+css+javscript
这个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位和效果渲染，再通过JavaScript实现元素相应的动态变化效果.(DHTML)
3.富客户端概念
3.1 网络应用程序经历了从胖客户端到瘦客户端的发展历程,胖客户端是相对于传统的C/S结构的网络应用程序来说的,
而瘦客户端一般都是相对于B/S结构的Web应用来说的
3.2 富客户端（Rich Client)简介富因特网应用程序（Rich Internet Applications，RIA）利用具有很强交互性的富客户端技术来为用户提供一个更高和更全方位的网络体验。富客户端结合了桌面应用程序和b/s的一些优点，但本质还是b/s应用。
3.3 富客户端技术充分利用本地机器的处理能力来处理数据，而不需要把某些数据发送到服务器处理，充分利用了本地机器的资源。
3.4 ajax jquery flex Silverlight JavaFX等都属于构建富客户端的技术
3.5 javascript也是构建富客户端要是使用一个最基本的技术,以及之后要学习的Jquery.
4.javascript和java
4.1 javascript与Java是由不同的公司开发的不同产品：
javascript是Netscape公司的产品，其目的是为了扩展Netscape Navigator(网景导航者浏览器)功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言.
而Java是SUN Microsystems公司推出的新一代面向对象的程序设语言，常用于后台代码的开发.
4.2 于1995年由Netscape公司的Brendan Eich首次设计实现而成 。由于Netscape公司与Sun公司合作，Netscape高层希望它看上去能够像Java，因此取名为JavaScript
4.3 所以说javascript和java是俩种 完全不同的开发语言(但是其实我们在使用的时候还是能感觉到两者的语法很相似)
5. ECMAScript标准
5.1 随着网景公司推出javascript后所取得的成功,微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行.
5.2 为了统一规格，因为JavaScript兼容于ECMA标准，Ecma国际以JavaScript为基础制定了ECMAScript标准,所以javascript也称为ECMAScript。
5.3 Ecma国际（Ecma International）是一家国际性会员制度的信息和电信标准组织
改组织负责的标准有:
CD-ROM格式
C#语言规范
C++/CLI语言规范
通用语言架构（CLI）
ECMAScript语言规范（JavaScript）
Eiffel语言
电子产品环境化设计要素
Universal 3D标准
OOXML
6.完整的JavaScript包含的三个部分
6.1 ECMAScript规范，描述了该语言的语法和基本对象的定义;
6.2 文档对象模型（DOM），描述处理网页内容的方法
6.3 浏览器对象模型（BOM），描述与浏览器进行交互的方法
7.javascript语言的特点
7.1 解释执行的脚本语言
它的基本结构形式与c、c++、java十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它是需要嵌入到html页面中,让浏览器来解释执行的。
7.2 基于对象的语言
javascript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象.(没有java面向对象纯正)
new Date();
7.3 简单性
它是一种基于java基本语法语句和控制流之上的简单而紧凑的设计， 基本java中的语法都可以使用到javascript中,所以对于学过java语言的情况下,学习javascript也相对比较简单.
7.4 弱语言
javascript的语法松散要求不严谨,比如:一个变量在之前没有声明的情况下就可以直接使用,声明变量的时候也可以不声明变量的类型等.
7.5 事件驱动
我们在页面上的操作,例如 左键/右键的单击、双击,键盘上面的按键的监听，鼠标的移动 鼠标拖拽 鼠标滚轴的滚动等等事件的响应处理都可以交给javascript
7.6 动态性
javascript可以直接对用户或客户输入做出响应，无须经过web服务程序.
7.7 安全性
javascript不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。
7.8 跨平台性
javascript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持javascript的浏览器就可正确执行,但是不同浏览器以及同一浏览器的不同版本对javascript的支持是不同的(浏览器的兼容性)
8.在页面中使用javascript的作用
1.改进网页的设计布局(操作页面中的标签元素)
2.验证表单
3.检测浏览器、控制浏览器的行为
4.处理页面中触发的事件
5.在使用ajax的时候也要用到javascript
9.javascript在页面中的位置
1.直接写到页面中
须位于 <script> 与 </script> 标签之间,放置在 HTML 页面的 <body> 或者 <head> 标签中:
<script type="text/javascript">
//在这里写JS代码
</script>
注意:js代码所写的位置会影响到代码的执行效果,因为浏览器会从上到下去加载整个html页面文件,如果js代码是写在head里面,就是现执行js代码然后加载页面标签元素,如果是写body标签中的下面,则表示先加载html页面元素然后在执行js代码.
2.写到标签元素的事件属性里面
<div onclick="javascript:alert('hello world')">
3.写到一个外部的文件里面(.js结尾的文件)
写到一个js文件中,然后哪个页面使用就引入过来,类似于css样式表的引用
例如:
<script type="text/javascript" src="js/test1.js"></script>
10.javascript中的注释
10.1 单行注释
//注释
10.2 多行注释
/*
多行注释
多行注释
*/
11.中的标示符(变量名):
大小写敏感
不能以数字开头
可以由字母、数字、下划线、$符号组成
不能是javascript中的关键字
12.javascript中声明变量:
任何类型的变量都可以用var关键字来声明.
var a = "";
var b = 10;
var c = 10.9;
var d = new Date();
var e = true;
13.javascript中的null和undefined
//弹出null
var age = null;
alert(age);
//弹出undefined (根据浏览器来定)
var age;
alert(age);
14.javascript中的三种弹框:
alert confirm prompt
alert 提示框/警告框
confirm 确认框
prompt 输入对话框
这三个方法都是window这个对象的方法.window是JS中的一个内置对象,只有window对象的方法,调用的时候才可以省去对象的名字,直接用方法名字来调用.window.alert("hello")和alert("hello")是一样的效果.
这三种弹框都有一个共同的特点,当浏览器运行一个弹框代码的时候,用户如果不点击弹框中的确定或者取消按钮的话,浏览器就会卡这个弹框处,下面的页面代码就不会被执行.
alert弹出一个警告框/提示框,用户点击确定按钮之后就可以继续访问。
confirm弹出一个确认框,用户可以点击确定或者取消,这个confirm方法会相应的返回true或者false.
prompt弹出一个可以让用户输入的框口,用户输入后点击确定,这个方法会把用户输入的内容返回.
prompt("请输入你的性别:");
同时还可以在输入框设置一个默认值.
prompt("请输入你的性别:","男");
15.javascript中的输出到控制台
使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单进行查看。
注意:有些浏览器可能需要安装相应的插件才能开启调试模式
例如:
console.log("tom");
16.javascript中的数据类型
字符串（String）、数字(Number)、布尔(Boolean)
数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。
注意:可以使用全局函数typeof()来判断一个变量的数据类型,只能判断基础数据类型。对于使用内置构造函数创建的对象，均返回object
16.1 JavaScript 拥有动态类型的特点。这意味着相同的变量可用作不同的类型：
例子:
var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "John"; // 现在 x 为字符串
16.2 字符串 String
字符串可以是引号中的任意文本。可以使用单引号或双引号：
var name="tom";
var name='tom';
可以在字符串中使用引号，只要不匹配包围字符串的引号即可：
var v="He is called 'tom'";
var v='He is called "tom"';
字符串对象的常用方法:
var s = "hello world";
document.write("<h1>字符串对象</h1>")
//获得字符串的长度
document.write(s.length+"<br>");
//从下标为3的位置开始,截取4个字符,包括下标为3的位置的字符
document.write(s.substr(3,4)+"<br>");
//从下标为6的位置开始截取,截取到下标为8的位置,但是不包括下标为8的字符[6,8)
document.write(s.substring(6,8)+"<br>");
//trim()去掉字符串俩边的空格,但是这个方法有可能浏览器不支持.
document.write(s.trim().length+"<br>");
//字符串转换为大写
document.write(s.toUpperCase()+"<br>");
//字符串转换为小写
document.write(s.toLowerCase()+"<br>");
//分割字符串 返回一个数组
document.write(s.split(" ")+"<br>");
document.write(s.split(" ").length+"<br>");
document.write(s.split(" ")[0]+"<br>");
document.write(s.split(" ")[1]+"<br>");
注意:javascript中的转义符和java的一样也是\
16.3 数字 Number
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
极大或极小的数字可以通过科学（指数）计数法来书写：
var y=123e5; // 12300000
var z=123e-5; // 0.00123
16.4 布尔
布尔（逻辑）只能有两个值：true 或 false。
var x=true;
var y=false;
16.5 数组 Array
javascript中数组的特点:
1.数组的长度是可变的
2.数组里面放的数据类型也可以不同
3.数组的长度是和你所使用到的数组中最大下标相关联的.
//创建数组的时候,可以指定长度也可以不指定
//var a = new Array(4);
//var a = [1,3,4,"tom"];
var a = new Array();
a[0] = "tom0";
a[1] = "tom1";
a[2] = "tom2";
a[6] = "tom6";
document.write(a.length+"<br>");
/*
正常情况的循环
这个循环的输出结果为:
tom0
tom1
tom2
undefined
undefined
undefined
tom6
*/
for(var i=0;i<a.length;i++){
document.write(a[i]+"<br>");
}
/*
for-in循环
这个循环的输出结果为:
tom0
tom1
tom2
tom6
*/
//for-in除了变量数组外还能变量一个对象,这时变量i拿的就不是下标了,而是对象中的属性.
//这里的这个变量i每次拿到的是数组下标,而且是已经存在值的位置的下标,对于那些值是undefined的位置下标是不会拿的.
for(i in a){
document.write(a[i]+"<br>");
}
16.6 空（Null）、未定义（Undefined）
//null
var name = null;
//Undefined
var age;
16.7 对象 Object
javascript中{}可以代表对象
16.7.1 javascript已经存在的类型的对象
var v = new Date();
var obj1 = new Object(), obj2 = {};//Object 对象
var arr1 = new Array(), arr2 = [];//Array 对象
var boo1 = new Boolean(true), boo2 = true;//Boolean 对象
var num1 = new Number(123), num2 = 123.45;//Number 对象
var str1 = new String("abc"), str2 = 'abc';//String 对象
16.7.2 自定义的对象1:
var person={firstname:"John", lastname:"Doe", id:5566};
alert(person.firstname);
alert(person.lastname);
alert(person.id);
16.7.3 自定义的对象2:
var p =
{
grade:1,
name : "tom",
age:27,
sex:"男",
speak:function(words)
{
alert(this.name+"说："+words+"!");
}
}
p.speak("hello");
16.7.4 自定义的对象3:
function Person(name){
this.name = name;
this.age = 20;
this.say=say;
}
function say(){
document.write(this.name+":大家好,我今年"+this.age+"岁了");
}
var p = new Person("张三");
p.say();
-----------------------------
function Person(name){
this.id = 1;
this.name = name;
this.age = 20;
this.say=function(msg){
document.write(this.name+" 说:"+msg);
};
}
var p = new Person("张三");
p.say();
17.javascript中的对象、属性、方法/函数
对象、属性、方法基本和java的中的理解保存一致.
特别的对javascript中的方法/函数稍作说明:
17.1 形式
//无参的
function test1(){
}
//有参的
function test2(name){
}
//多个参数的
function test3(v1,v2){
alert(v1+v2);
}
//有返回值的
function test4(v1,v2){
return v1+v2;
}
//匿名函数 在上面自定义对象的例子中有使用过
function(){
//....
}
17.2 位置
定义在<script>标签中或者是外部的.js文件中
注意:定义函数并不是执行函数
17.3 调用
在<script>标签中调用定义的函数
例如:可以先调用后定义
<script type="text/javascript">
test();
function test(){
alert("hello world");
}
test();
</script>
在html元素的事件属性中调用定义过的函数
例如:可以先调用后定义
<script type="text/javascript">
function test(){
alert("hello world");
}
</script>
<input type="button" value="点击" onclick="test()" />
18.javascript中的局部变量和全局变量
18.1局部变量:
在 JavaScript 函数内部声明的变量（*使用 var *）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，局部变量就会被删除。
18.2全局变量:
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
注意:全局变量都默认是window对象的属性,所以一个全局变量name也可以用window.name来访问,方法window的属性的是都可以省去window不写,直接写属性名字就可以了.window的方法也是同样的.
window是javascript中的一个内置对象可以直接使用表示浏览器窗口
18.3变量的声明周期:
javaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
18.4向未声明的 JavaScript 变量分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
name="tom";
将声明一个全局变量 name，即使它在函数内执行。
例如: 注意 全局变量会在页面关闭后被删除。
<script type="text/javascript">
function test(){
var name = "tom";
}
function test1(){
alert(name);
}
test();
test1();
</script>
19.javascript中的运算符
19.1 算术运算符
+ 加法
- 减法
* 乘法
/ 除法
% 取模
++ 自增
-- 自减
19.2 赋值运算符
给定 x=10 和 y=5
= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0
19.3字符串的 + 运算符
连接多个字符串:
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
19.4字符串和数字进行加法运算
例如:
x=5+5;
y="5"+5;
z="Hello"+5;
x,y, 和 z 输出结果为:
10 数字类型
55 字符串类型
Hello5 字符串类型
20.javascript中的比较
20.1 比较运算符
对于给的变量x=5:
== 等于
x==8 false
x==5 true
x=="5" true
=== 绝对等于/恒等于 (值和类型均相等)
x==="5" false
x===5 true
!= 不等于
x!=8 true
!== 绝对不等于 (值和类型均不相等)
x!=="5" true
x!==5 false
> 大于
x>8 false
< 小于
x<8 true
>= 大于或等于
x>=8 false
<= 小于或等于
x<=8 true
20.2 逻辑运算符
对于给的变量 x=6 以及 y=3:
&& and (x < 10 && y > 1) 为 true
|| or (x==5 || y==5) 为 false
! not !(x==y) 为 true
注意:& |运算结果是0或者1
20.3 条件运算符
java中的三目运算符:
var msg =(age<18)?"年龄太小":"年龄已达到";
21.条件语句
21.1 if语句
if (condition){
// 当条件为 true 时执行的代码
}
-----------------------------------
if (condition){
//当条件为 true 时执行的代码
}
else{
//当条件不为 true 时执行的代码
}
-----------------------------------
if (condition1){
//当条件 1 为 true 时执行的代码
}
else if (condition2){
//当条件 2 为 true 时执行的代码
}
else {
//当条件 1 和 条件 2 都不为 true 时执行的代码
}
20.2 switch语句
例如:
var day=new Date().getDay();
var x = "";
switch (day){
case 0:
x="Today it's Sunday";
break;
case 1:
x="Today it's Monday";
break;
case 2:
x="Today it's Tuesday";
break;
case 3:
x="Today it's Wednesday";
break;
case 4:
x="Today it's Thursday";
break;
case 5:
x="Today it's Friday";
break;
case 6:
x="Today it's Saturday";
break;
default:
x="error!!!";
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript queue 打字效果
- JavaScript面向对象之Prototypes和继承
- JavaScript 闭包详解
- add .json handler support in IIS 7
- JS日期时间类型(Y-m-d H:i:s)与时间戳互转
- js笔记 数组push和pop
- JSSE简介
- JavaScript基础2
- JS学习笔记一
- JavaScript中的property和attribute
- javascript基础01
- c:foreach遍历循环List<Map>
- 判断搜索引擎来路进行跳转的代码(PHP+JS)
- 二、JavaScript语言--JS动画--JS动画效果
- JS基本数据类型和引用数据类型的区别
- JS-----元素定位自动居中
- js模块化历程
- 常用js正则表达式
- jsp中select的onchange事件用法实例
- JSP EL表达式忽略方法