JavaScript_1 简介

JavaScript_1

1.javaScript的简单介绍【javaScript是什么?】

     javaScript----是一种面向对象的脚本语言。面向对象是一种编程思想,看不见摸不着,只能体会,用实际行动来证明。面向对象这种编程思想是对面向过程的思想的升华。

     什么是面向过程的思想?

       例如:今天早上我要从凤栖原到电视塔。

               面向过程的思想就是需要将沿途经过的地方保存下来,这些地方连接在一起就形成了过程。

               面向过程的思想----C语言【指针】

          面向对象的思想就是只需要知道开始和结束位置就可以,至于中间是如何完成的不需要关注。开始和结束位置就是对象。面向对象的思想---java、 C#

     脚本---写好的程序不需要中间转换,就能立即在运行环境中运行。javaScript,SQL

2.javaScript的作用?

     1.为html网页提供动态效果【特效】。

     2.完成与后台处理程序的数据交互。【1.发请求{要}  2.处理数据】

     简单的具体操作:

  1. 直接向html文件中写出标记和内容。
  2. 对事件的反应
  3. 改变 HTML 内容
  4. 改变 HTML 图像
  5. 改变 HTML 样式
  6. 验证输入
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于javascript的简单操作</title>
		<style>
			#img2{
				display: none;
			}
		</style>
	</head>
	<body>
		<h1>1.直接向html文件中写出标记和内容</h1>
		<script>
			document.write("<h2>测试直接向html文件中写出标记和内容</h2>");
		</script>
		<h1>2.对事件的反应</h1>
		<input type="button" value="测试按钮" onclick="alert('请揍我!');"/><br>
		<h1>3.改变 HTML 内容</h1>
	    <p id="p1">Hello</p>
		<script>
			function myclick(){
				document.getElementById("p1").innerHTML="你好!";
			}
		</script>
		<input type="button" value="改变 HTML 内容" onclick="myclick();"/><br>
		<h1>4.改变 HTML 图像</h1>
		<img id="img1" src="imgs/close.png" width="100px" height="200px"/>
		<script>
			function mytestimg(){
				var butObject=document.getElementById("but1");
				var imgObject=document.getElementById("img1");
				var testValue=butObject.value;
				if(testValue=="打开"){
					imgObject.src="imgs/open.png";
					butObject.value="关闭";
				}
				if(testValue=="关闭"){
					imgObject.src="imgs/close.png";
					butObject.value="打开";
				}
			}
		</script>
		<input id="but1" type="button" value="打开" onclick="mytestimg();"/><br>
		<h1>5.改变 HTML 样式</h1>
		<img id="img2" src="imgs/timg.jpg" width="200px" height="200px"/>
		<script>
			function mytestcss(){
				var butObject=document.getElementById("but2");
				var testValue=butObject.value;
				if(testValue=="显示"){
					document.getElementById("img2").style.display="block";
					butObject.value="隐藏";
				}
				if(testValue=="隐藏"){
					document.getElementById("img2").style.display="none";
					butObject.value="显示";
				}
			}
		</script>
		<input id="but2" type="button" value="显示" onclick="mytestcss();"/><br>
		<h1>6.验证输入</h1>
		<input id="text1" type="text" /><span id="span1"></span><br>
		<script>
			function  getMSGCode(){
				var text1Object=document.getElementById("text1");
				var span1Object=document.getElementById("span1");
				var telNumber=text1Object.value;
				//正则表达式
				var zhengze= /^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/;
				//null--javascript一种数据类型
				var jieguo=zhengze.test(telNumber);
				if(jieguo){
					text1Object.value="123456";
				}else{
					span1Object.innerHTML="手机号码不合法!";
					text1Object.value="";
				}
			}
		</script>
		<input id="but3" type="button" value="获取短信验证码" onclick="getMSGCode();"/><br>
	</body>
</html>

3.javascript的基本用法

     HTML 中的脚本必须位于 <script> 与 </script> 标签之间,脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。也可以将javascript程序单独保存在一个文件中,保存javascript程序的文件后缀名一定是“.js”,r然后在html文件中<body>和<head>部分通过<script>标记的src属性将保存javascript程序的文件导入到html文件中。

//mytest.js文件
//在独立的javascript文件中编写程序代码是不需要<script>
function  test3(){
	alert("测试使用独立的javascript文件");
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function test2(){
				alert("测试head放置脚本");
			}
		</script>
		<script src="js/mytest.js"></script>
	</head>
	<body>
		<h2>HTML 中的脚本必须位于&lt;script&gt; 与 &lt;/script&gt; 标签之间。</h2>
		<h2>脚本可被放置在 HTML 页面的 &lt;body&gt; 和&lt;head&gt; 部分中。</h2>
		<!--
		<script>
			function test1(){
				alert("测试body放置脚本");
			}
		</script>
		-->
		<input type="button" value="测试body中放置脚本" onclick="test1();"/><br>	
		<!--
		<script>
			function test1(){
				alert("测试body放置脚本");
			}
		</script>
		-->
		<input type="button" value="测试head中放置脚本" onclick="test2();"/>
		<h2>通常情况下我们将javascript脚本放置在head部分</h2>
		<h2>
		可以将javascript程序单独保存在一个文件中,保存javascript程序
		的文件后缀名一定是“.js”,r然后在html文件中&lt;body>&gt;和&lt;head&gt;
		部分通过&lt;script&gt;标记的src属性将保存javascript程序的文件导入到html文件中。
		</h2>
		<h2>在独立的javascript文件中编写程序代码是不需要&lt;script&gt;</h2>
		<input type="button" value="测试使用独立的javascript文件" onclick="test3();"/>
	</body>
</html>

4.JavaScript 输出

     为了以后调试程序,输出运行结果,判断程序运行是否正常,找出错误并修改。

     1.使用 window.alert() 弹出警告框。

     2.使用  document.write() 方法将内容写到 HTML 文档中。

     3.使用 innerHTML 写入到 HTML 元素。

     4.使用 console.log() 写入到浏览器的控制台。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>输出数据的方式</title>
		<script>
			function testalert(){
				var a=100;
				var b=12.5;
				var c=a+b;
				//window.alert("c="+c);
				alert("c="+c);
			}
			
			function testwrite(){
				var a=100;
				var b=12.5;
				var c=a+b;
				document.write("c="+c);
			}
			function testinnerHTML(){
				var a=100;
				var b=12.5;
				var c=a+b;
				document.getElementById("h2").innerHTML="c="+c;
			}
			function testconsole(){
				var a=100;
				var b=12.5;
				var c=a+b;
				console.log("c="+c);
			}
		</script>
	</head>
	<body>
		<h1>使用 window.alert() 弹出警告框。</h1>
		<input type="button" value="测试window.alert()" onclick="testalert();"/>
		<h1>使用document.write() 方法将内容写到 HTML 文档中。</h1>
		<input type="button" value="测试document.write()" onclick="testwrite();"/>
	    <h1>使用 innerHTML 写入到 HTML 元素。</h1>
		<h2 id="h2"></h2>
		<input type="button" value="测试innerHTML" onclick="testinnerHTML();"/>
		<h1>使用 console.log() 写入到浏览器的控制台</h1>
		<input type="button" value="测试console.log()" onclick="testconsole();"/>
	</body>
</html>

5.Javascript中的变量

  1. 变量是程序运行中的最小单位。
  2. 变量是存储数据的”容器”,为了减少程序的运行空间

         例如:我们现在需要在程序中出现100次“hello”这个数据,每需要一个“hello”这个数据我们就写一次“hello”这个数据,假设“hello”这个数据一次需要5个字符的存储空间,那么100次就是500个

字符,如果我们现在将“hello”这个数据保存到一个变量上,那么一个变量只占5个字符数据的存储空间,当下一次需要使用“hello”这个数据时候,我们只需将占5个字符数据的存储空间的变量提供

就可以了,这是我们的程序中出现100次“hello”这个数据时,只开辟了5个字符数据的存储空间,不会是500个。

     3.变量的组成

        1.数据类型 【赋值的时候根据所赋予的具体数据值判定数据类型】

        2.名称  

        3.数据值

        4.作用域 【变量在不同位置的有效性】

     4.定义变量

        通过var关键字定义变量

        格式: var 变量名称 = 数据值 ;

                 var 变量名称 ;

                 可以一次性定义多个变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定义变量</title>
		<script>
			//格式: var 变量名称 = 数据值 ; 
			var  a = 100;
			//var 变量名称 ; 
			var b;
			//变量赋值
			b=12.5;
			//可以一次性定义多个变量
			var  test1,hello1;
			//变量赋值
			test1=125.8;
			hello1="你好";
			var  test2="hello",hello2="world";
			alert(hello2);
		</script>
	</head>
	<body>
	</body>
</html>

     注意变量的名称使用规则:

  1. 变量的名称可以由数字、字母、$ 、_ ,数字不能开头。
  2. 变量的名称不能有空格,不能使用中文。
  3. 区分大小写(y 和 Y 是不同的变量)
  4. 不能是关键字。

     关键字就是javascript语言为一些单词赋予了特殊的含义,这是被赋予了特殊的含义的单词就是关键。【被javascript语言占用】。

6.JavaScript中的数据类型

     1.javaScript的变量的数据类型,不是在声明/定义变量的时候决定的,javaScript的变量的数据类型是在赋值之后,根据所赋予的具体数据值决定变量的数据类型。

         var  a = 100;

         var  b;

         b=”hello”;

     2.javaScript具体数据类型

        字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)。

        JavaScript 拥有动态类型,javaScript的变量的数据类型,不是在声明/定义变量的时候决定的,javaScript的变量的数据类型是在赋值之后,根据所赋予的具体数据值决定变量的数据类型。

        var  a = 100;  //a 数字(Number)

         a=”hello”; //字符串(String)

        2.1JavaScript 字符串 

            字符串是存储字符(比如 "Bill Gates")的变量。字符串可以是引号中的任意文本。您可以使用单引号或双引号;

            “hello”, ‘world’----常量

            例如:

             var carname="Volvo XC60";
             var carname;

             carname=’Volvo XC60’;

             可以在字符串中使用引号,只要不匹配包围字符串的引号即可:“zhnagsn:say”hello””------>“zhnagsn:say’hello’”

              例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>javascript中的字符串</title>
		<script>
			//String -- 字符串数据类型
			//"" 、  '' ---字符串数据类型标志
			//"hello"----字符串常量【程序运行过程中不会改变的数据】
			//字符串变量的声明/定义
			var  str1="hello";
			var str2;
			str2="你好";
			//window.alert(str1);
			//您可以在字符串中使用引号,只要不匹配包围字符串的引号即可
			//var say1="zhangsan:say"hello"";【不推荐使用】
			//双引号中的双引号用单引号代替
			//var say1="zhangsan:say'hello'";
			window.alert(say1);
		</script>
	</head>
	<body>
	</body>
</html>

         2.2数字(Number)

              JavaScript 只有一种数字类型。数字可以带小数点,也可以不带。

              极大或极小的数字可以通过科学(指数)计数法来书写。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>javascript数字型</title>
		<script>
			var num1=100;  //整数的数字型
			var num2=12.5; //小数的数字型
			//整数与小数统一成数字型Number
			var num3=num1+num2;
			//alert("num3=="+num3);
			//极大或极小的数字可以通过科学(指数)计数法来书写
			var y=123e5;
			var z=123e-5;
			alert("y=="+y);
		</script>
	</head>
	<body>
	</body>
</html>

         2.3JavaScript 布尔[逻辑]【Boolean】

              取值只有两种:true/false,往往都是用来做判断

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>布尔Boolean</title>
		<script>
			var boo1=true;
			var boo2=false;
			function isAge(){
				//得到文本框输入的年龄值
				var ageText=document.getElementById("in1");
				var spanText=document.getElementById("span");
				var age=ageText.value;
				var res= age > 18;
				if(res){
					spanText.innerHTML="年龄合法!";
				}else{
					spanText.innerHTML="年龄不合法!";
				}
			}
		</script>
	</head>
	<body>
		<input id="in1" type="text" value="请输入年龄"  /><span id="span"></span>
		<input type="button" value="判断年龄" onclick="isAge();" />
	</body>
</html>

        2.4数组类型【Array】:数组就是保存一组数据值的数据类型。

             数组定义:

           1.先定义,后赋值

              var arr1=new Array(); //定义/创建

              数组赋值--通过下标

              理解下标:具体数据值在数组中的位置【从0开始】

              格式:数组变量名称[下标]=数据值;

              arr1[0]=”zhangsan”;

              arr1[1]=23;

              arr1[2]=true;

          2.定义+赋值

              var arr2=new Array(“zhangsan”,23,true); //定义+赋值

              数组的取值: 数组名称[下标]

              arr2[1]----23

              数组的length属性:得到数组把中的元素个数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组[Array]</title>
		<script>
			/**
			 * 数组就是保存一组数据值的数据类型。
				数组定义:
				1.先定义,后赋值
				var arr1=new Array(); //定义/创建
				数组赋值--通过下标
				理解下标:具体数据值在数组中的位置【从0开始】
				格式:数组变量名称[下标]=数据值; 
				arr1[0]=”zhangsan”;
				arr1[1]=23;
				arr1[2]=true;
				2.定义+赋值
				var arr2=new Array(“zhangsan”,23,true); //定义+赋值
				数组的取值: 数组名称[下标]
                arr2[1]----23
			 */
			function testArray(){
			  /*	
			  var h_arr1=new Array();
			  h_arr1[0]=1;
			  h_arr1[1]=2;
			  h_arr1[2]=3;
			  h_arr1[3]=4;
			  h_arr1[4]=5;
			  h_arr1[5]=6;
			  */
			  var h_arr1=new Array(1,2,3,4,5,6);
			  //document.write("<h"+h_arr1[0]+">测试数组</h"+h_arr1[0]+">");
			  //数组的length属性:得到数组把中的元素个数
			  var len=h_arr1.length;
			  //alert(len);
			  for(var i=0;i<len;i++){
				 document.write("<h"+h_arr1[i]+">测试数组</h"+h_arr1[i]+">");
			  }
			 }
		</script>
	</head>
	<body>
		<input type="button" value="测试数组" onclick="testArray();"/>
	</body>
</html>

        2.5 JavaScript 对象---通过”{}”,在其中使用键值对【标题:页码】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对象型</title>
		<script>
			//定义对象变量
			//通过”{}”,在其中使用键值对【标题:页码】
			var user={userid:1001,
					  username:"zhangsan",
					  useraddress:"西安",
					  getName:function(){
						return "hello";  
					  }
					  };
			//对象的使用
			//alert(user.userid);
			//alert(user["username"]);
			//alert(user['username']);
			//alert(user.getName());
			//对象---{}
			//对象中的元素是变量,函数
			//对象中的变量 【变量名称:数值】
			//对象中的函数 【函数名称:function(){}】
			//访问对象中的变量
			//对象名称.变量名称  / 对象名称["变量名称"] 
			//对象名称.函数名称()
		</script>
	</head>
	<body>
	</body>
</html>

         2.6javascript中的Undefined 【未定义】

              Undefined --没有值

          2.7javascript中的null[空]

               null---有值,只是值的内容是空的。

              通常情况下定义的变量如果不确定数据类型,可以使用null空类型代替。

               var  a=null;

               var  b=null;

               a=“zhangsan”;

7.JavaScript 注释

       注--标注【为了以后查看】

       释--说明

       注释---标注出来程序,解释说明含义。

       注释的作用:1.标注出来程序,解释说明含义,方便他人或者以后的自己查看。

                             2.调试程序

       注释的特征:注释的内容是不会被执行的

       Javascript中的注释有2中:

          1.单行注释  【一次注释一行】‘// ’被注释的内容【自己的解释说明含义的文字/代码】

             出现的位置【1.当前行代码上面一行  2.当前行代码后面】

             例如: 

                     var num1=100;  //整数的数字型

                     var num2=12.5; //小数的数字型

                     //整数与小数统一成数字型Number

                     var num3=num1+num2;

            2.多行注释【一次注释多行】

                 /*

                   *被注释的内容

                   *【自己的解释说明含义的文字/代码】

                    * //可以包含单行注释

                  */

                     不要使用javascript语法注释去注释html标记

8.JavaScript 函数

     函数也叫方法。函数其实就是实现某一个相关功能的代码集合【代码块{}】

     函数的语法格式:

       function [函数名称](){

       }

      function 是声明/定义函数的关键字

      函数名称

      ()----参数列表【可以有,也可以有多个,可以没有(没有参数,不能省略)】

             参数将当前函数之外的数据引入到当前函数中进行运算【找帮手】

       {}--代码块具体实现功能的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数</title>
		<script>
			/*
			函数也叫方法。
			函数其实就是实现某一个相关功能的代码集合【代码块{}】
			函数的语法格式:
			function [函数名称](){
			
			}
			function 是声明/定义函数的关键字
			函数名称
			()----参数列表【可以有,也可以有多个,可以没有(没有参数,不能省略)】
			参数将当前函数之外的数据引入到当前函数中进行运算【找帮手】
			{}--代码块具体实现功能的代码
			*/
		     //1.根据函数有没有名称【有名函数,匿名函数】
			 /*
			 function test1(){
				 alert("有名函数");
			 }
			 */
			/*
			window.onload=function(){
				 alert("匿名函数");
			}
			*/
		    //2.根据函数有没有参数【有参函数,无参数函数】
			function test2(){
				 alert("无参数函数");
			}
			function test3(num1,num2){
			    var res=num1+num2-10;
				alert("res=="+res);
			}
			//3.根据函数有没有结果【有返回值函数,无返回值函数】
			function test4(){
			    var res=100-10;
				return res; //返回结果【函数调用处】
			}
			function test5(num1,num2){
			    var res=num1+num2-10;
				alert("res=="+res);
			}
			
			function test6(a1){
				return null;
			}
			//有参数函数  1.看个数 2传
			//有返回值函数  那里调用,那里接
		</script>
	</head>
	<!--<body onload="test1();">-->
	<body>
		<input type="button" value="测试无参数函数"  onclick="test2();"/><br>
		<input type="button" value="测试有参数函数"  onclick="test3(12.5,23.8);"/><br>
		<input type="button" value="测试有返回值函数"  onclick="var a=test4();alert(a);"/>
	</body>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值