JavaScript

小谭同学ha

已于 2023-04-16 13:19:27 修改

阅读量46

点赞数

文章标签： javascript 前端 html

于 2023-04-16 13:18:21 首次发布

本文链接：https://blog.csdn.net/qq_69032468/article/details/130038334

版权

一、概述

历史：

1.JavaScript由NetScape公司(网景公司)开发的脚本语言.

2.将其命名为LiveScript，是面向对象语言，无需编译，由浏览器直接解释运行.

3.与SUN公司签订协议，将其改为JavaScript.

4.脚本语言：不需要进行编译，可直接通过某种解释器，如：浏览器。（数据库，html，JavaScript,python）.

嵌入在html中，用来为网页添加动态功能

作用：

1.响应鼠标和键盘事件

2.客户端表单的数据验证

3.动态改变页面标签样式

html，JavaScript，css关系：

二、基本语法

1.变量

使用var关键字声明，变量无数据类型，值有数据类型

2.数据类型

*数值型(number)：整数型和浮点型

*布尔型(boolean)：true/false

*字符串型：用单引号/双引号表示（使用单引号来说明包含引号的字符串）

*udefined类型：声明但未初始化，返回udefined

*Object类型（对象类型）：字符串对象，数组对象，math，日期 DOM

<script type="text/javascript">
    var date=new Date();
    alert(date);//Sun Apr 09 2023 11:24:34 GMT+0800 (中国标准时间)
</script>

3.运算符

*算数运算符

/*
	算术运算符
	+ 数值+数值=数值  加法运算
	数值+字符串=字符串  连接符
*/
	var a=10;
	var b=7;
	var c="2";
	var d="cd";
	var n="10";
	alert(a+c);//102
	alert(a-c);//8  数值-字符串型数字（隐式的数据类型转换）
	alert(a-d);// NaN -->not a number
	alert(a*c);//20

*赋值运算符

x=10;y=5

*比较运算符

x=5;

*逻辑运算符

x=6;y=3

*条件运算符

var result=(条件)？结果1：结果2

4.控制语句

*选择结构

单一选择结构(if)

二路选择结构(if/else)

多路选择结构(swtich)

*循环结构

for

while  循环开头测试

do/while  循环末尾测试

break

continue

5.函数

*基本语法

<script type="text/javascript">
    function functionName([arguments]){
    javascript statements
    [return expression]
    }
</script>

*调用

<script type="text/javascript">
		function hello(){
				alert("hello");
		}
		hello();//函数调用 
			

		//有参函数
		function hello(name,a,b){
			alert("hello!"+name+":"+a+":"+b);
		}
		hello("大可",true,18);//hello!大可:true:18
		hello("Tom"); //hello!Tom:undefined:undefined
			

		function sum(a,b){
			return a+b;
		}
		var s=sum(10,"5");
		alert(s);//105
			
</script>

*全局函数

javaScript 已定义好的，可直接使用的函数：

alert();

parseInt(); 将数值(小数)转为整数数值/字符串的数字转为数值类型

parseFloat(); 将字符串型数字转为浮点数值

typeof(); 返回数据类型

eval(); 把一段字符串当作脚本执行

<script type="text/javascript">
			
	var a=10;
	var b="5";
	var c="5a";
	var d="5.5";
	var e="a5";
	alert(a+parseInt(b));//15
    alert(a+parseInt(c));//15
	alert(a+parseInt(d));//15
	alert(a+parseInt(e));//NaN
		  
		   
	var a=10;
	var b=5.5;
	var c="5.5";
	alert(a+parseFloat(c));//15.5
		   
	alert(typeof(a));//number 返回数据类型
		   
	var s="3+5";
	alert(eval(s));
		   
	//把一段字符串当作js脚本执行
	var s="alert(a)";
	eval(s);//10
</script>

6.内置对象

*String字符串

<script type="text/javascript">
			
	var a=10;
	var s="abcdefb";//创建字符串对象
    //属性
	console.log(s.length);//7   向浏览器控制台输出日志信息
    //方法
    console.log(s.charAt(0));//a
	console.log(s.indexOf("b"));//1
	console.log(s.lastIndexOf("b"));//6
	console.log(s.substring(0,4));//abcd
	console.log(s.substr(2,4));//cdef (开始位置，截取长度)
	console.log(s.split());
</script>

*Array数组

<script type="text/javascript">
	var a=new Array();
	a[0]=0;
	a[1]=1;
	console.log(a);
			
	var a=new Array(1,2,3);
	console.log(a);//[1, 2, 3]
			
	var a=[1,2,3,4,5];
	console.log(a);//[1, 2, 3, 4, 5]
	console.log(a.length);//5
	console.log(a.join(""));//12345  将数组转为字符串
    console.log(a.join(":"));//1:2:3:4:5
	console.log(a.reverse()); //[5, 4, 3, 2, 1]
			
			
	var a=["c","a","b"];
	console.log(a.sort());//['a', 'b', 'c']
			
	var a=[1,4,2,12];
	console.log(a.sort());//1 12 2 4  排序不是按照数字大小
			
	console.log(a.sort(numberSort));//1 2 4 12
			
	//自定义的排序规则函数
	function numberSort(a,b){
		return a-b;
	}
</script>

*Date

<script type="text/javascript">
	var date=new Date();
	console.log(date.getFullYear());//2023
	console.log(date.getMonth()+1);//4
	console.log(date.getDate());//9
	console.log(date.getDay());//0
	console.log(date.getHours());//15
	console.log(date.getMinutes());//46
	console.log(date.getSeconds());//28
				
</script>

*Math

<script type="text/javascript">

	console.log(Math.PI);//3.141592653589793
	console.log(Math.random());//0.596223419541305
	console.log(Math.floor(9.999999991));//9
</script>

7.事件

事件是属于html标签的内容，
可操作标签产生事件，
通过事件去调用指定函数

onclick() 鼠标左键单击事件
onfocus() 输入框获取鼠标焦点时触发聚焦事件
onblur() 输入框失去焦点时触发失焦事件
onmouseover() 鼠标移入到标签上时触发悬浮事件
onmouseout() 鼠标离开标签时触发

onload() 网页加载完毕后触发相应事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function fun(){
				console.log("aaaaaaaaaaaa");
			}
			//fun();
			
		</script>
	</head>
	<body onload="fun()"><!-- 网页加载完毕后 -->
		<!-- 事件是属于html标签的内容，
		可操作标签产生事件，
		通过事件去调用指定函数 
		onclick="fun()" 鼠标左键单击事件
		onfocus="fun()" 输入框获取鼠标焦点时触发  聚焦事件
		onblur="fun()" 输入框失去焦点时触发  失焦事件
		onmouseover="fun()"  鼠标移入到标签上时触发  悬浮事件
		onmouseout="fun()"  鼠标离开标签时触发
        onchange="fun()";失去焦点且内容改变时触发
		-->
		<input type="button" value="按钮" onclick="fun()" />
		<div onclick="fun()">单击</div>
		<input type="text" onfocus="fun()" /><br />
		<input type="text" onblur="fun()" /><br />
		<input type="button" value="按钮" onmouseover="fun()" onmouseout="fun()"/>
	</body>
</html>

8.HTML_DOM(Document Object Model)

javaScript 是一种面向对象的语言，操作网页时，将网页中的每个标签都视为一个对象，
将这一类标签对象统称为dom对象；
JavaScript要对网页中标签进行操作，就需要获取到要操作的标签；
document对象表示整个html网页文件，网页加载完毕后，生成document对象.

document.getElementById();根据标签id获取唯一一个标签对象
           得到标签对象后：
           1.对标签的属性进行操作
           2.对标签体的内容进行操作
           3.对标签的css属性进行操作

var objs=document.getElementsByTagName("input");//通过标签名获取多个标签集合
var objs=document.getElementsByName("hobby");//通过name属性名获取多个标签集合
var objs=document.getElementsByClassName("c");//通过class属性名获取多个标签集合

全选/全不选/反选操作实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function checkAll(ck){

				var objs=document.getElementsByName("hobby");
				for (var i = 0; i < objs.length; i++) {
					var obj=objs[i];
					obj.checked=ck;
				}
				console.log(objs.length);
			}
			function checkAll1(){
				var objs=document.getElementsByName("hobby");
				for (var i = 0; i < objs.length; i++) {
					var obj=objs[i];
					obj.checked=!(obj.checked);
				}
			}
			
		</script>
	</head>
	<body>
		<input type="checkbox" name="hobby" value="跳舞1" class="c"/>跳舞1
		<input type="checkbox" name="hobby" value="跳舞2" class="c"/>跳舞2
		<input type="checkbox" name="hobby" value="跳舞3"/>跳舞3<br/>
		<input type="button" value="全选" onclick="checkAll('checked')"/>
		<input type="button" value="全不选" onclick="checkAll()" />
		<input type="button" value="反选" onclick="checkAll1()" />
	</body>
</html>

9.表单验证

表单验证：在前端提交表单数据到后端时，要对表单中输入的数据进行验证，若不符合规则，就给用户提示。

简单用户名/密码提交验证操作实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function checkForm(){
				var usernameObj=document.getElementById("usernameId");
				if(usernameObj.value.length==0){
					document.getElementById("usernameMsg").innerHTML="请输入用户名！";
					return false;
				}
				if(usernameObj.value.length<5||usernameObj.value.length>10){
					document.getElementById("usernameMsg").innerHTML="请输入5-10位用户名！";
					return false;
				}
				
				var passwordObj=document.getElementById("passwordId");
				if(passwordObj.value.length==0){
					alert("请输入密码！");
					return false;
				}
				if(passwordObj.value.length<5||passwordObj.value.length>10){
					alert("请输入5-10位密码！");
					return false;
				}
				return true;
			}
		</script>
	</head>
	<body>
		<form action="server.html" method="get" onsubmit="return checkForm()">
			用户名<input type="text" id="usernameId"/><br/><span id="usernameMsg"></span><br />
			密码<input type="password" id="passwordId"/><br />
			<input type="submit"/>
		</form>
	</body>
</html>

10.计时

function startTime(){

t1=setTimeout("oper()",5000);//在指定时间后调用指定函数，只调用一次
t2=setInterval("oper()",3000);//每隔指定时间调用指定函数
}

function stopTime(){
clearTimeout(t1);
clearInterval(t2);

}

小谭同学ha

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript

历史：1.JavaScript由NetScape公司(网景公司)开发的脚本语言.2.将其命名为LiveScript，是面向对象语言，无需编译，由浏览器直接解释运行.3.与SUN公司签订协议，将其改为JavaScript.4.脚本语言：不需要进行编译，可直接通过某种解释器，如：浏览器。（数据库，html，JavaScript,python）.嵌入在html中，用来为网页添加动态功能作用：1.响应鼠标和键盘事件2.客户端表单的数据验证3.动态改变页面标签样式。
复制链接

扫一扫