| |
|
![]() |
|
软件世界网 -> 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
股票
三丰软件
开发
中国文化
网文精选
阅读网
看图
日历
万年历
2019年2日历 2019-2-23 20:27:52 |
|
网站联系: qq:121756557 email:121756557@qq.com 软件世界网 -- |