javascript入门
来源：互联网 发布：kiki软件收费吗 编辑：程序博客网 时间：2024/06/08 18:19
JavaScript
一、 JavaScript概述
1、 JavaScript是什么，有什么作用？（了解）
*JavaScript是因特网上最流行的脚本语言。
*脚本语言不能单独使用，必须嵌入到其他语言中组合使用
*JavaScript不能单独使用，必须和其他语言（HTML）结合使用
*浏览器解释执行
*作用是：可以控制前端页面的逻辑操作
例如：JS可以控制CSS的样式；（一般）
JS可以对表单项进行校验（重点）
JS可以对HTML元素进行动态控制（使用较多）
*特点：
安全性（没有访问系统文件权限，无法用来做木马病毒）
跨平台性（浏览器有JS的解析器，只要有浏览器就能运行JS代码，和平台无关）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>demo1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript">var sum=0;// int sum=0;for(var i=1;i<=9;i++){// int i=1;sum+=i;alert(sum); //System.out.print(sum);}</script> </head> <body> </body></html>2、 JavaScript和Java的关系（了解）
ECMAScript
*JavaScript和Java一点关系都没有（雷锋和雷峰塔）
*JavaScript和Java的区别：
>JavaScript代码可以直接在浏览器执行，而Java必须先经过编译才能执行
>JavaScript是弱类型语言，Java是强类型语言
强类型语言：要求变量的使用严格符合定义。（例如：变量声明后都有一个固定的区域，int区域大小是32位）。编程时痛苦，调BUG时舒服
弱类型语言：不要求变量的使用严格符合定义。（例如：变量声明后没有一个固定的区域，任何类型的值都能放在该区域）。编程时舒服，调BUG时痛苦
<html>
<head>
<script>
var sum = 0;
for(var i = 1; i <= 100; i++) {
sum += i;
}
alert(sum);
</script>
</head>
<body>
</body>
</html>
二、JavaScript语法及使用(重点)
注释
*单行注释
//
Myeclipse快捷键 ctrl+shift+c
*多行注释
/* */
Myeclipse快捷键 ctrl+shift+/
变量
*标示内存中的一块空间，用于存储数据，数据是可变的
*格式：
var 变量名 = 变量值;
JavaScript中的变量声明都用var关键字
变量值的数据类型（原始数据类型和引用数据类型）
>原始数据类型:
string 字符串类型
“”和’’都表示字符串
boolean 布尔类型
true,false
number 数字类型
整数和小数
null 空，表示引用类型的对象不存在
undefined 未定义
变量声明未赋值时使用/对象的属性未赋值时使用
注：变量就像一个盘子，什么都能盛装。
变量的类型可以用typeof()来判断。例如:var str=”aa”;alert(typeof(str));//string
变量的大小写是敏感的，yy和YY不是一个变量。
为什么 typeof 运算符对于 null值会返回 "Object"。这实际上是JavaScript 最初实现中的一个错误，然后被ECMAScript 沿用了。现在，null被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>demo1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript">/* var 变量名=变量值;原始数据类型：string字符串"" ''都表示字符串boolean布尔类型true , falsenumber数字整数和小数null空，对象为空（引用为空）undefined未定义 变量没有赋值就使用/使用 对象.属性 的时候，属性没有赋值就使用//变量就是一个盘子，装什么东西都可以引用数据类型：typeof() 帮咱们判断变量是什么类型的变量名命名是大小写敏感的（区分大小写）*//* var str = "aa";var str2 = 'aa';var str3 = true;//falsevar str4 = 15;var str5 = 15.55;var date = null;var aa;str =15;str = true;str = "aa";alert(str);//aa 15 *//* var str = "aa";str =15;//number//str = true;//booleanvar ss;var obj= null;alert(typeof(obj)); *//* var sf="aa";alert(Sf); *//* 引用数据类型常用对象：String,Array,Date,Math,RegExpObject 所有对象的父对象*/var date = new Date();alert(date instanceof Object);</script> </head> <body> </body></html>
>引用数据类型（了解）
即对象
例如：var obj = new Object();
常用对象：
String,Array,Date,Math,RegExp
注：instanceof可以用来判断对象是否属于某类型。返回true和false .例如：
Var str = new String();
Alert(str instanceof String);//true
*两种变量：
>全局变量
就是在<script>标签中定义的变量，在整个页面都有效
>局部变量
就是在函数体内定义的变量
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>demo1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript">/* 全局变量就是在script标签中的变量，对整个页面都有效局部变量就是在函数体中定义的变量*//* var str =10;for(var i=1;i<=3;i++){}alert(i);//4 *//* function aa(){var a=5;alert(a);} */var x = 4;function show(x){x = 8;}show(x);alert("x = "+x);/* A.8 B.4 C.undefined */</script> </head> <body> </body></html>练习：如下代码显示X值是多少？
var x = 4;
function show(x){
x = 8;
}
show(x);
alert("x = "+x);
A.8
B.4
C.undefined
函数（方法）
*用于代码封装，提高复用性
*格式 function 函数名(参数列表){
函数体;
return ;
}
*函数定义，关键字 function
*定义参数列表时，不必使用var关键字，否则报错
*如果没有需要返回的参数，return可以不写
*函数需要调用才能执行，和Java一样。
*JavaScript不存在重载形式：
>每个JavaScript中，都存在一个数组arguments，用于存储参数列表
思考：如下调用方法会打印输出什么效果？
function getSum(){
return 100;
}
var sum = getSum;
alert(sum);
A. 100
B. undefined
C. function getSum(){return 100;}
*如果调用方法时忘记加()，那么会把函数对象的引用传给变量
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>函数.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript">//用来做加法的方法 a b a+b/* public int sum(int a,int b){return a+b;} *///JavaScript不定义返回值的类型//javascript 方法不存在重载//因为在JavaScript方法中存在arguments隐藏对象（数组），就是用来获取传进来的参数列表的//JavaScript中如果调用方法不加括号，那么会把方法（对象）的引用传出来/* function sum(a,b){alert(arguments.length);alert(arguments[0]);alert(arguments[1]);alert(arguments[2]);// alert(a);// alert(b);}sum(5,6,7); */function getSum(){return 100;}var sum = getSum;alert(sum);</script> </head> <body> </body></html>
*两种扩展函数：
>动态函数（了解会用）
通过JS的内置对象Function来动态创建
格式： new Function(参数一,参数二);
参数一是函数形参列表
参数二是函数体
>匿名函数（较常用）
没有名称的函数，函数的简化形式
格式：var str = function(参数列表){
函数体;
return;
};
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>demo1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript">/* 动态函数(使用比较少)Function 对象匿名函数*//* var par = "a,b,c";var par2 = "return a+b+c";var str =new Function(par,par2);alert(str(1,2,3)); */var str=function(a,b){return a+b;};alert(str(1,2));</script> </head> <body> </body></html>
运算符
算术运算符（常用）
+号除了运算外，可以作为连接符
-号除了运算外，可以作为转换符
alert(true + 1); // 2
比较运算符（常用）
== 比较值
=== 又比较值和类型语句（流程控制语句）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>demo1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript">/* 算术运算符+连接符-转换符NaN意思是不是数字比较运算符==只是比较值，即使类型不同也没关系===不仅比较值，也同时比较类型*//* var str=15;var str2="1";alert(str+str2);//151 *//* var str =15;var str2 = "1";alert(str-str2);//14 151 */ /* var str= 15;var str2="a";alert(str-str2);//NaN *//* var str=8;//alert(str==8);//true//alert(str=="8");//truealert(str===8);//truealert(str==="8");//false *//* var str = (8==8)?8:0;alert(str); */</script> </head> <body> </body></html>
流程控制语句
对程序运行流程控制的表达式
n 判断语句
IF
if(8 == num){
赋值的问题，需要注意。
}else{
}
0、-0、null、""、false、undefined或 NaN，为false
否则为true
和Java中一样。
switch(n)
{
case 1:
执行代码块 1
break
case 2:
执行代码块 2
break
default:
如果n即不是1也不是2，则执行此代码
}
练习：以下代码输出结果为：
var a=15;
if(a=15){
alert(15);
}else{
alert(“else”);
}
A. 15
B. Else
n 循环语句
For循环（较常用）
for(var i=0;i<=8;i++){
// 循环体
}
增强FOR循环（不灵活，使用少，但开发中会有使用）（了解会用，工作中自己进行尝试即可）
for(变量 in 对象){
// 循环体
}
*里面的变量代表下标
*使用 in关键字
*遍历数组（或对象），里面要用数组[下标]
* 例如：
Var s= new Array();
s[0]=1;
s[1]=2;
for(x in s){
alert(s[x]);
}
while(表达式){
// 循环体
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>demo1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript">/* 判断语句IF0、-0、null、""、false、undefined 或 NaN，为false否则为true FOR循环var 99乘法表while do while增强for*//* function str(){return null;}var x=8;var aaaa=str();if(aaaa){alert(1);//1}else{alert("else");} *//* for(var i=0;i<3;i++){} *//* if(-0){alert(1);}else{alert("eeee");} */var i=new Array();i[0]=1;i[1]=2;for(x in i){alert(i[x]);}</script> </head> <body> </body></html>对象
l String对象（了解会用）
* var str = "abc";
* var str = new String("abc");
* 属性：length 字符串的长度
* 方法
* 和java中String对象类似的方法（基本相同，需要练习）
* charAt(index) 返回指定位置的字符（常用）
* indexOf(searchvalue,fromindex) 检索字符串
* lastIndexOf() 从后向前的
* replace() 替换字符串（较常用）
* substring(start,stop) 从哪开始，到哪结合（包含开始不包含结束）
* substr(start,length) 从哪开始，截取长度
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>demo1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript">/* String对象var s = new String("aaa");var s = "aaa";document.write();//会把值输出到浏览器页面上*//* var str ="abc";var str2 ="你好么";document.write(str2.blink());document.write(str2);document.write(str.charAt(1)); */var str = "ABC";document.write(str.toLowerCase());</script> </head> <body> </body></html>l Array对象（重要）
* js的数组
* var arr = [1,2,3];
*var arr = new Array();数组长度默认为0
* var arr = new Array(4); 数组长度是4
* var arr = new Array(1,2); 数组元素是1,2
* 数组的长度
* length
* 数组的长度是可变的
* 数组元素可以是任意类型（注意）
* 方法
* concat() 链接数组或者元素都可以（较少）
* join(separator) 转化成字符串
* push() 向末尾添加一个元素，返回新的长度
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>demo1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript">/* Array对象var str = [1,2,3]; 长度是3，长度可变var str = new Array();长度默认是0，长度可变var str = new Array(5);长度默认是5，长度可变var str = new Array(1,2);长度是2，长度可变join(分隔符) 默认是 push 就是把元素添加进数组末尾*//* var str=[1,2,3];var str2=[4,5,6];alert(str.concat(str2)); *//* var str2=[1,2,3];var str=str2.join();alert(str); */var str2=[1,2,3];var str=5;str2.push(str);alert(str2);//</script> </head> <body> </body></html>
l Date对象（比较常用）
* var date = new Date(); 当前的时间
* toLocaleString() 根据本地的日期格式转化成字符串（了解）
* getDate() 返回一个月中的某一天（了解）
* getMonth() 获取月份（0-11）（了解）
* getFullYear() 获取年（了解）
* getTime() 获取毫秒数（比较重要）
* setTime() 通过毫秒数设置日期（比较重要）
同时也可以通过构造器设置 new Date(毫秒数);
* Date.parse(datestring) 解析字符串，返回毫秒数（重要的）
* 2015-4-29 解析不了
* 2015/4/29 是可以解析的
l Math对象（了解）
round(x) 四舍五入
random() 随机生成0~1数字
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>demo1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript">/* Date对象var aa = new Date();*/var aa = new Date();// alert(aa.toLocaleDateString());/* alert(aa.getDate());alert(aa.getMonth());alert(aa.getFullYear()); *//* var long1 = aa.getTime();var long2=long1-(1000*60*60*24);aa.setTime(long2);alert(aa.toLocaleString()); */var bb = Date.parse("2015/5/21");//aa.setTime(bb);var cc = new Date(bb)alert(cc.toLocaleString());</script> </head> <body> </body></html>l RegExp对象（重要）
*正则对象 正确的规则
* var reg = new RegExp("表达式"); （开发中基本不用）
* var reg = /^表达式$/ 直接量（开发中常用）
直接量中存在边界，即^代表开始，$代表结束
* test(string) （经常使用）符合规则返回true，不符合返回false
例如：
if(reg.test("12345")){
//
}else{
//
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>demo1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript">/* RegExp对象var s = new RegExp("表达式");var s = /^表达式$/;test()*/var reg = /^\s*$/;//验证空var checkText = "";alert(reg.test(checkText));</script> </head> <body> </body></html>练习：判断字符串是否为空
var msg=””;
var reg = /^\s*$/;
alert(reg.test(msg));
l 全局函数
Global
浏览器内存中游离的函数，直接拿过来用。
eval() 可以解析字符串，执行里面的javascript的代码（学习JSON）（最常用）
isNaN() 是否 不是 数字 （常用）
encodeURI() 编码
decodeURI() 解码
（不用看）escape不编码字符有69个：*，+，-，.，/，@，_，0-9，a-z，A-Z
（了解）encodeURI不编码字符有82个：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z
（了解）encodeURIComponent不编码字符有71个：!，'，(，)，*，-，.，_，~，0-9，a-z，A-Z
三、JavaScript和HTML的结合方式（了解）
l 两种使用方式
>内部使用
*<script type=”text/javascript”>JavaScript的代码</script>
>外部引用
*<script type=”text/javascript” src=”javascript文件路径”></script>
*外部引用时script标签内不能有script代码，即使写了也不会执行
注意：<script>标签写在任意地方都可以，但是要注意HTML和JAVASCRIPT的加载顺序
<body onload=””> 在网页加载完毕后 做什么事
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>demo1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript" >function aa(){alert(document.getElementById("a").innerHTML);//打印 你好啊alert("1");alert("2");}</script> </head> <body onload="aa();"> <span id="a">你好啊</span> </body></html>
四、JavaScript的组成(了解)
JavaScript的组成
*ECMAScript (核心)
*DOM 文档对象类型
*BOM 浏览器对象类型
练习：
1、99乘法表
2、2015-01-01到2015-09-01有多少天
1、答案
<script type="text/javascript">
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
document.write(j+"*"+i+"="+j*i+"\t");
}
document.write("<br/>");
}
</script>
2答案：245
<script type="text/javascript">
var dlong1=Date.parse("2015/01/01");
var dlong2=Date.parse("2015/09/03");
alert((dlong2-dlong1)/1000/60/60/24);
</script>
- Javascript入门
- javascript 入门
- Javascript入门
- JavaScript入门
- javascript入门
- javascript入门
- JavaScript入门
- JavaScript 入门
- Javascript入门
- JavaScript入门
- Javascript入门
- JavaScript入门
- javascript入门
- javascript入门
- javascript入门
- JavaScript入门
- javascript入门
- Javascript入门
- 求阶乘
- MySQL 主从复制与读写分离概念及架构分析
- ubuntu 新手入门
- UVA Live 6437 Power Plant 最小生成树
- 1007. 素数对猜想 (20)——做题纪录
- javascript入门
- ZOJ 3712 Hard to Play
- 我的设置 of Ubuntu
- 近期Android学习感受
- haproxy+keepalived 主备
- 打开文件
- [枚举+二分] LightOJ 1127 - Funny Knapsack
- solr5.5.0在CenOS上的安装与配置
- ESC/POS指令体系
