|
移动开发
架构设计
编程语言
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
股票
三丰软件
开发
中国文化
网文精选
阅读网
看图
日历
万年历
2018年10日历 2018-10-24 10:23:38 |
|
| 网站联系: qq:121756557 email:121756557@qq.com 软件世界网 -- |