javascript小节
javascript 语法总结
知识概要：
（1）Javascript概述
1.1javascript是什么？
1.2JavaScript语言组成
1.3JavaScript与Html的结合方式
（2）JavaScript基本语法
（3）JavaScript常用对象介绍
（4）JavaScript 函数的定义
1.1javascript是什么？
1.基于对象和事件驱动的脚本语言 （它要求放在浏览器中去解析）
2.无需编译，可由浏览器直接解释运行
3.JavaScript 是一种弱类型语言交互性（它可以做的就是信息的动态交互）
安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）1.2JavaScript语言组成
JavaScript语言组成
ECMAScript核心语法BOM
DOM1.3JavaScript与Html的结合方式
1.直接在事件中写
onclick="javascript:alert('Hello World')"
2. 通过<script>标签写
<script type="text/javascript">
//alert("Hello World");弹框
document.write("<h1>Hello World!</h1>");//在网页上输出//System.out.println("");
</script>
1.<script>可以写在网页的地方
2.一般写在<head>部分
3.除非咱们要网页的body部分打印输出时，才把它放在body部分
3.引入外部js文件
<script type="text/javascript" src="demo3.js" >
</script>
注意:
通过这种方式引入外部js文件,在内部所写的js代码是不会执行的。(2)JavaScript基本语法
1.变量
2.数据类型
Undefined、Null、Boolean、Number 和 String
1.Undefined
1.变量定义了，但是没有赋值
2.通过typeof()测试，结果也是undefined
2.Null
1.通过alert()直接输出，得到一个null结果
2.通过typeof()测试，它的结果是一个Object
3.Boolean
看赋值为true/false
非0都为真
0都为假
4.Number
不区分整数与小数都认为是number
5.String
用“”引号引上的
未定义 直接拿变量用,这样使用是语法错
var s="1"//定义了一个基本类型的字符串
var s = new String("1");//定义了一个String对象
基本类型为什么能调方法？
s.toString();//说明了javascript是弱数据类型，它底层已经做了转化
6.运算符
==值相等 ===类型和值都要相等7.控制语句
if/else/else if
switch (字符串)
三元运算符 条件？值1:值2; (条件)null,false,0,'',undefined,NaN为假,其它都为真for/while/do.while
(3)JavaScript常用对象介绍
Array对象 数组对象，进行数组操作
String对象 ----- 字符串类型的引用类型
var s = new String("itcast");
Number对象 ---- 数字原始类型引用类型
var n = new Number(100);
Boolean对象 ---- 布尔原始类型引用类型
var b = new Boolean(true);
Math对象 执行数学任务
Date对象 用于处理日期和时间
RegExp 对象正则表达式对象(4)javascript 函数对象
1.第一种方式
function函数名(){}
2.第二种方式
/*var show = function (){
alert("Hello");
}*/
//alert(show);//当成变量看，输出function
//show();//调用 变量名()3.第三种方式 参数：前面都是参数，函数体是最后一个参数
var show = new Function("a","b","return a+b");
function show(a,b){
return a+b;
}
4.全局函数
//parseInt();转整数
//parseFloat();//转小数
//eval() eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
//escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。
//unescape() 函数可对通过 escape() 编码的字符串进行解码。
//isNaN()//判断是否为数字 为数字返回false 不为数字返回true
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> js概述 </title> <!-- js是什么? javascript代码，它是一门脚本语言,可以写业务逻辑， 基于对象的语言，基于事件驱动的语言，是弱数据类型语言 由浏览器直接解释运行 三种结合方式: 1.事件名="js代码",javascript:var a=1;alert(a); 2.通过<script></script>标签引入 3.外部js文件 <script type="text/javascript" src="js文件"/> --> <script type="text/javascript"> //1.定义一个变量a var a =1; document.write("变量a="+a);//在网页上输出的 </script> <script type="text/javascript" src="01.js"></script> </head> <body> <input type="button" value="javascript:var a=1;alert(a);" onclick="alert('我帅吗？')"/> <a href="javascript:var a=1;alert(a);">百度</a> </body> </html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>数组对象</title> <!--language="javascript" --> <script > //定义一个数组 var a = new Array(); var scores = new Array(5);//5代表长度 var scroesjava = new Array(5,6);//代表有元素5,6 var scoresandroid = [90,"54",80,70,30,60,"cgx","aj"];//定义一个数组，元素是90,100 //添加元素 //alert(scores.length);//5 //alert(a.length);//0 scores[100] = "cgx"; // alert(scores[100]); //scores[101] = new Date(); //alert(scores[99]); scoresandroid.sort();//排序 //alert(scoresandroid.join("~~~~~~~~~~~~~~~~"));//用指定的分隔符进行连接 //var t = scoresandroid.pop();//最后一个位置删除 //alert(t); //var x = scoresandroid.shift(); //alert(x); scoresandroid.unshift("shit"); //alert(scoresandroid.join("~~~~~~~~~~~~~~~~")); for(var i=0;i<scoresandroid.length;i++){ if(i!=scoresandroid.length-1) document.write(scoresandroid[i]+","); else document.write(scoresandroid[i]); } </script> </head> <body> </body> </html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> RegExp对象</title> <script> /*function validation(obj){ //1.得到文本框的值 //var name = document.getElementById("username").value; var name = obj.value; //2.定义一个正则表达式 var regexp = new RegExp("[a-zA-Z]{6,10}"); //3.匹配 var bvalue = regexp.test(name); //4.判断 if(bvalue){ alert("用户名格式正确"); }else{ alert("用户名格式错误，只能6-10位字母组成"); } }*/ //调用函数规则一般:事件名="函数名()" //onclick:点击 //onblur:失去焦点 onblur="validation(this)" this代表当前的标签 //onfocus:得到焦点 //即时的消息提示 function validationsw(obj){ //1.得到文本框的值 //var name = document.getElementById("username").value; var name = obj.value; //2.定义一个正则表达式 var regexp = new RegExp("^[a-zA-Z]{6,10}$"); //3.匹配 var bvalue = regexp.test(name); //根据id找到div var errorsw = document.getElementById("errorMsg"); //4.判断 //innerHTML代表的是<div></div>中间的文本,而且能识别html标签 //innerText:代表的是<div></div>中间的文本,但不能识能html标签 if(bvalue){ errorsw.innerHTML="<font color='red'>用户名格式正确</font>"; }else{ errorsw.innerHTML="<font color='red'>用户名格式错误，只能6-10位字母组成</font>"; } } function clearText(objhsw){ var hswvalue = objhsw.value; if(hswvalue == "只能6-10位字母组成"){ objhsw.value=""; } } function changeChar(obj){ var source = obj.value; if(source!="只能是6-10位的字母组成"){ var regExp = new RegExp("^[a-zA-Z]{6,10}$"); flag = regExp.test(source); } var errorsw = document.getElementById("errorMsg2"); if(!flag){ errorsw.innerHTML = "<font color='red'>只能是6-10位的字母组成</font>"; }else{ errorsw.innerHTML = "<font color='green'>ok</font>"; } } </script> </head> <body> <input type="text" value="只能6-10位字母组成" id="username" name="username" onfocus="clearText(this)" onblur="validationsw(this)" /> <div id="errorMsg" style="display:inline;"></div> <hr size="3cm" color="blue"/> <input id="source" type="text" value="只能是6-10位的字母组成" size="30" onchange="changeChar(this)" /> <div id="errorMsg2" style="display:inline;"></div> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>全局函数</title> <script> /* 如何根据name属性去得到一个标签? document.getElementsByName("name属性的值"); */ var a = 3.9415926; //alert(parseInt(a)); function calc(op){ //1.得到前两个框的值 var objNo1Val =parseFloat( document.getElementsByName("no1")[0].value); var objNo2Val =parseFloat( document.getElementsByName("no2")[0].value); //2.得到操作符,参数中给了 //3.进行计算 var result ; switch(op){ case "add": result=objNo1Val+objNo2Val; break; case "sub": result=objNo1Val-objNo2Val; break; case "multi": result=objNo1Val*objNo2Val; break; case "divide": result=objNo1Val/objNo2Val; break; default: result="对不起,你有病！"; } //4.显示结果 document.getElementsByName("result")[0].value=result; } </script> </head> <body> 第一个数:<input type="text" name="no1"/><br/> 第二个数:<input type="text" name="no2" /><br/> 结果:<input name="result"/><br/> <input type="button" onclick="calc('add')" value=" + "/> <input type="button" onclick="calc('sub')" value=" - "/> <input type="button" onclick="calc('multi')" value=" * "/> <input type="button" onclick="calc('divide')" value=" / "/> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <script> //escape编码 var str ="http://www.itheima.com?keyword=老王玉照"; var str1 = encodeURI(str); alert(str1); var str2 = decodeURI(str1); alert(str2); //----------eval------------- var result = eval("123+234"); alert(result); </script> </head> <body> </body> </html>
