前端javaScript_js前端-CSDN博客

本文链接：https://blog.csdn.net/weixin_71243923/article/details/127064305

javaScript概述:

javaScript是一种直译式脚本语言,它是一种面向对象的语言,可以由浏览器直接运行,它可以为网页添加各种各样的动态功能,通常JavaScript脚本通过嵌入在HTML中来实现自身的功能,可以弥补html的缺陷.

javaScript与css,html的关系:

一个标准的页面最终由html,css,javascript组成,相辅相成

基本语法:

javaScript脚本写在一组<script>标签中，此标签可以放在head中或body中，一般习惯放在

head中，还可以将脚本写在外部的.js文件中，在html页面中导入外部的.js文件

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 在html中导入外部的js文件 -->
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/* 在此标签内些javascript语法 */
			alert("你好")
		</script>
	</head>
	<body>
		
	</body>
</html>

第一个helloworld程序:

<html> 
   <head> 
     <script type="text/javascript"> 
             alert(“hello world”); //提示框语言
     </script> 
</head> 
<body> 
</body> 
</html>

基本语法-变量

声明变量用 var 关键字

例如 var a;

声明变量的同时对其赋值

var b=true;

基本语法-数据类型 :

java是一种强数据类型语言,对数据类型要求高数据类型 int 变量名=10
javascript是一种弱类型语言
声明变量: 使用var关键字声明使用变量可以表示任何数据类型

var a =10;
			var b="abc";
			    b=20;
				b=true;
				alert(b)

JavaScript支持的数据类型

1、数值型(number)：

其中包括整型数和浮点型数。

2、布尔型(boolean)：

即逻辑值，true或flase。

3、字符串型：

由单个或多个文本字符组成。字符串是用单引号或双引号来说明的。

（使用单引号来输入包含引号的字符串。）

4: undefined类型

5: Object类型

1.数值型 number 整数和浮点都是数值型
           var a= 10;
           var b="10.5";
2.布尔型 boolean true false
           var c = true;
           var d = a>b;
3.字符串 "" '' 双引号和单引号都表示字符串
           var e = "abc";
           var f = 'abc';
alert(typeof(f)); // 这个返回的是数值类型
4.undefined类型变量没有赋值,值不明确
               var g;
5. Object 对象类型 javascript是一种面向对象的语言,但是对于我们而言,可以把它理解成一个半面向对象,半面向过程的语言

基本语法-算术运算符 :

+ 可以进行“加法”与“连接”运算，如果 2 个运算符中的一个是字符串,javascript就将另一个转换成字符串，然后将 2 个运算数连接起来。

var a=5;
			var b =10;
			var c ="5";
			var d = "a";
			//alert(a+b);  加法运算,数值与数值操作
			//alert(a+c);  连接
			
			//alert(b-a);  减法 数值与数值
			//alert(b-c);  5 数值与字符的数字   此处会进行一个隐式数据类型转换
			//alert(b-d);  NaN(not a number)  数字格式化异常  试图将字符串转换为数字,没有转换成功
			//alert(b*c);  隐式转换

基本语法-赋值运算:

/* =赋值   ==比较内容是否相等  ===比较格式和内容是否相等 */
			var a = 10;
			var b ="10";
			alert(a==b)//true
			alert(a===b)//false

基本语法-比较运算符 ;

x=5;

基本语法-逻辑运算符 :

给定 x=6 以及 y=3 ，下表解释了逻辑运算符：

基本语法-条件运算符 :

语法：

var result = ( 条件表达式 )? 结果 1: 结果 2

当条件成立返回 ? 后的内容，否则返回 : 后的内容

基本语法-控制语句:

(1)选择结构

1.单一选择结构（if）

2.二路选择结构（if/else）

3.多路选择结构（switch）

(2)循环结构。

1.由计数器控制的循环（for）

2.在循环的开头测试表达式（while）

3.在循环的末尾测试表达式（do/while）

4.break continue

函数 -定义函数 :

js 是一种面向对象语言
对于程序员来讲,是一种半面向对象,半面想象过程语言
alter() 也是一种函数只不过这是一种内置函数,已经定义好的函数

(1)函数定义的基本语法:

function 函数名(参数){
               函数体
               返回值
           }
function text(){
               alert();
           }

注意:(1)有参数的函数不需要定义参数类型

function text(a,b,c){
alert(a+":"+b+":"+c)
}

(2)实参可以传入任意的类型,有返回值不需要定义返回值类型

function text(a,b){
               return a+b;
           }
           var c= (10,5);

(3)函数的调用

1.函数的调用可以通过函数名来调用

2.函数的调用也可以通过函数的嵌套来调用

全局函数 :

全局函数(内置函数): 就是js函数库找那个已经内置好的,在安装浏览器时已经安装好的,只需要调用即可
               alter()就是内置函数
               parseInt() 可以吧浮点转为整数,吧字符串转为整数,如果其中包含字母,只能转换到字母,以字母开头的直接返回NaN
               parseFloat()
               typeof() 返回值的类型
               eval(字符串) 吧js当做脚本执行

            var a = 10;
			var b = 10.5;
			var c = "a5";
			var d = "5a";
			var f = "5.5";
			alert(a+parseInt(b));//20
			alert(a+parseInt(c));//NaN
			alert(a+parseInt(d));//15
			
			alert(a+parseFloat(b));//20.5
			alert(a+parseFloat(f));//15.5
			alert(a+parseFloat(d));//15
			
			var g;
			 alert(typeof(g));
			 
			 var s=  "2+3";
			 var s1 = "alter(s)"
			 alert(s);//"2+3"
			 alert(eval(s));//5
			 alert(s1);//2+3

内置对象 -String 字符串:

var s = "abc";
           var s1 = new String("abc:fg");
           alert(s1.length);
           alert(s1.charAt(2));//c
           alert(s1.substring(1,4));//开始位置,结束位置(不包含)
           alert(s1.substr(1,4));//从第一位开始,截取4个长度
           alert(s1.split(":"));

内置对象-Date :

var date = new Date;
           alert(date.getFullYear());
           alert(date.getMonth());
           alert(date.getDate());//日期
           alert(date.getDay());//星期
           alert(date.getHours());

内置对象 - Math:

Math.abs(x) 绝对值计算；

Math.pow(x,y) 数的幂；x的y次幂

Math.sqrt(x) 计算平方根；

Math.ceil(x) 对一个数进行上舍入

Math. floor(x) 对一个数进行下舍入。

Math. round(x) 把一个数四舍五入为最接近的整数

Math. random() 返回 0 ~ 1 之间的随机数

Math. max(x,y) 返回 x 和 y 中的最大值

Math. min(x,y) 返回 x 和 y 中的最小值

内置对象 - Array 数组 :

(1)var array = new Array();//创建一个空数组
           array[0]=1;
               array[1]="abc";
               array[2]=true; //向空数组中添加元素

(2)var array = new Array(1,"abc");

(3)var array = [1,"abc"];

以上三点都是创建数组的方法

关于数组的属性和操作方法:

var array = [2,1,3,12];
               alert(array.length);
               alert(array.join(":"));//吧数字中的元素用特殊符号连接为字符串
               alert(array.reverse());//逆序

//排序
           var array1 = ["b","d","a","c"];//97 98 99 100 按照编码来排序
               array1.sort();

           array.sort(sortnumber);//将排序规则定义函数,传入到sort方法中
           //定义一个排序的函数
           function sortnumber(a,b){
               return a-b;
           }

事件:

onclick()鼠标点击时； onblur()标签失去焦点;
           onfocus()标签获得焦点;
           onmouseover()鼠标被移到某标签之上;
           onmouseout鼠标从某标签移开;
           onload()是在网页加载完毕后触发相应的的事件处理程序;
           onchange()是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。

html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function text(){
				console.log(1);//想浏览器控制台输出内容
			}
		</script>
	</head>
	<body onload="text()">
		
		 <input type="button" value="开始" onclick="text()" />
		 <div onclick="text()">
			 点击
		 </div>
		 
		 <input type="text" onfocus="text()" />
		  <input type="text" onblur="text()" />
		  <div onmouseover="text()" onmouseout="text()"></div>  //鼠标移入移出
		  <input type="text" onchange="text()" />
	</body>
</html>

Html DOM :

DOM是Document Object Model文档对象（网页中的标签）模型的缩写.

通过html dom，可用javaScript操作html文档的所有标签

js 是面向对象的语言虽然都是对象,但是两种对象语言的结构不同

           HTML DOM 对象(Document Object Model)
           文档对象模型---> 这指的是一类对象,网页中的标签,
           从js的角度,认为网页中的每一个标签就是一个独立的对象,这一类对象,称为dom对象
           这样就可以以面向对象的思想来操作网页的内容

(1)在js中获取网页中的标签:

在js中,一旦网页被加载到浏览器中,就会生成一个document对象,此对象表示整个html

               要操作,先获得
               可以使用document对象,获取网页中的标签,
1.document.getElementbyid("") 通过标签中的id属性来获取标签一对一

2.通过标签名找到 HTML 标签

document.getElementsByTagName("p");

3.通过类名找到 HTML 标签

document.getElementsByClassName("p");

4.通过name找到 HTML 标签

document.getElementsByName(“name");

在获得标签后,可以对标签进行以下操作 :
               1.对标签中的属性进行操作(标签中支持的属性),包含获取属性值,给属性赋值
               2.对标签体内容进行操作
               3.对标签的内容进行操做

function text(){
				//在js中获取到文本框中的值,如何获取呢
				var tobj1 = document.getElementById("t1");
				console.log(tobj1.value);
				console.log(tobj1.type);
			}

<input type="text" id="t1" value=""/>
		 <input type="button" value="测试" onclick="text()" />

改变标签中的内容:

function text(){
				
				var pobj = document.getElementById("p1");
				    alert(pobj.innerHTML);//获取到标签体中的标签
				var divoj =  document.getElementById("div1");
					divoj.innerHTML=pobj.innerHTML;
			}

修改标签的样式:

function text(){
				var divobj = document.getElementById("div2");
				    divobj.style.background="red";//对标签的样式修改
					divobj.style.width="100px";
					divobj.style.height="100px";
			}

其他三种获取标签的方法:

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
				
			function text(){
				/* document.getElementById()//通过id属性获取一个标签对象
				document.getElementsByTagName();//通过标签名名获取
				document.getElementsByClassName();//通过类名 */
				var a = document.getElementsByClassName("c1");//通过名字获取,后三个都是集合
				//遍历集合
					
				for(var i=0;i<a.length;i++){
					a[i].checked=true
				}
			}
		</script>
	</head>
	<body>
		<input type="checkbox" name="course" class="c1" value="java" />
		<input type="checkbox" name="course" class="c1" value="java" />
		<input type="checkbox" name="course" class="c1" value="java" />
		<input type="checkbox" name="course" class="c1" value="java" />
		
		<input type="button"  value="全选" onclick="text()"/>
		<input type="button"  value="取消" onclick="text()"/>
	</body>
</html>

计时:

通过 JavaScript ，可以在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function text(){
				alert("aaa0");
			}
			//把text()函数的调用交给了setTimeout定时器,在延迟指定时间后调用
			/* var a = setTimeout("text()",3000);//a为定时器编号
			//中间去掉定时效果
			function stopp(){
				clearTimeout(a);//关闭定时器
			} */
			var t;
			function text(){
				t= setInterval("text()",3000);//不间断的调用函数
			}
			function stopp(){
				clearInterval(t);//关闭
			}
		</script>
	</head>
	<body>
		<input type="button" value="关闭" onclick="stopp()"/>
	</body>
</html>

表单验证:

表单: 在客户端为后端服务器收集数据,里面有许多可以输入,选择的组件
       凡是从前端向后端发送的数据,都需要进行数据验证
               不要讲垃圾数据传入到后端中处理,会有资源的浪费,会加重服务器的压力
               需要借助js对内容的验证
               在提交表单时,如何触发js
               onsubmit: 在点击submit按钮时触发

<script type="text/javascript">
			function checkaccount(){
				var aobj = document.getElementById("accountid");
				var aoobj = document.getElementById("accounttid");
				if(aobj.value.length==0){
					aoobj.innerHTML="账号不能为空";
					aoobj.style.color="red";
					return false;
				}else{
					aoobj.innerHTML="√";
					return true;
				}
			}
			function checkfrom(){
				if(checkaccount()==true){
					return true;
				}
				return false;
			}
		</script>

 <form action="server.html" method="get" onsubmit="return checkfrom()">
			 账号:<input type="text" name="account" id="accountid" onblur="checka"/><br /><span id="accounttid"></span>
			 密码:<input type="text" name="password" id="passwordid"/><br />
			 <input type="submit" value="登录"/>
		 </form>