|
移动开发
架构设计
编程语言
Web前端
互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料 |
| |
|
| |
|
| 软件世界网 -> Web前端 -> javascript入门 -> 正文阅读 |
[Web前端]javascript入门 |
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时痛苦
二、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 , false
number 数字
整数和小数
null 空，对象为空（引用为空）
undefined 未定义 变量没有赋值就使用/使用 对象.属性 的时候，属性没有赋值就使用
//变量就是一个盘子，装什么东西都可以
引用数据类型：
typeof() 帮咱们判断变量是什么类型的
变量名命名是大小写敏感的（区分大小写）
*/
/* var str = "aa";
var str2 = 'aa';
var str3 = true;//false
var 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;//boolean
var ss;
var obj= null;
alert(typeof(obj)); */
/* var sf="aa";
alert(Sf); */
/*
引用数据类型
常用对象：
String,Array,Date,Math,RegExp
Object 所有对象的父对象
*/
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>
函数（方法）*用于代码封装，提高复用性 *格式 function 函数名(参数列表){ 函数体; return ; } *函数定义，关键字 function *定义参数列表时，不必使用var关键字，否则报错 *如果没有需要返回的参数，return可以不写 *函数需要调用才能执行，和Java一样。 *JavaScript不存在重载形式： >每个JavaScript中，都存在一个数组arguments，用于存储参数列表
*如果调用方法时忘记加()，那么会把函数对象的引用传给变量 <!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");//true
alert(str===8);//true
alert(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，则执行此代码 }
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">
/*
判断语句
IF
0、-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>
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有多少天
点击查看全文 |
| 上一篇文章 下一篇文章 查看所有文章 |
|
|
|
 |
|
 |
|
 |
|
360图书馆
软件开发资料
文字转语音
购物精选
软件下载
美食菜谱
新闻资讯
电影视频
小游戏
Chinese Culture
股票
租车
生肖星座 三丰软件 视频 开发 短信 中国文化 网文精选 搜图网 美图 阅读网 多播 租车 短信 看图 日历 万年历 2017年9日历 2017-9-26 18:56:13 |
|
| 网站联系: qq:121756557 email:121756557@qq.com 软件世界网 -- |