javaScript

最新推荐文章于 2024-06-22 16:43:13 发布

温朴寒

最新推荐文章于 2024-06-22 16:43:13 发布

阅读量775

点赞数 27

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2302_77125952/article/details/139709197

版权

javaScript概述

javaScript历史:

● JavaScript是由Netscape公司（美国网景公司）开发的一种脚本语言。

● Netscape公司将这种脚本语言命名为LiveScript，与java一样,也是面向对象的语言,而且无需编译，可由浏览器直接解释运行。

● Netscape公司见LiveScript大有发展前途，而SUN公司( java)也觉得可以利用Livescript为Java的普及做铺垫，于是两家签订协议，将LiveScript改为JavaScript。

● JavaScript一种直译式脚本语言，用来为网页添加各式各样的动态功能（javaScript可以操作网页内容），不需要编译可直接通过浏览器解释运行，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

<script src="js/index.js"></script>
		<script>
			//调用对话框函数
			/* alert("大家好，我是js!") */
			/* function test(){
				alert("大家好，我是js!")
			} */
		</script>
	</head>
	<body>
		<input type="button" value="测试" onclick="test()"/>
	</body>

基本语法-变量

● 声明变量用var关键字例如 var name;

● 声明变量的同时对其赋值 var test=“THIS IS A BOOK”

<script>
			/*
			java是强类型语言  数据类型 值
			javaScript弱类型 
			使用一个var关键字声明
			*/
		   var a;
		   a=10;
		   alert(a);
		   a="abc";
		   alert(a);
		   //1.数值类型 包含整数和浮点数
		   //alert(typeof(b)); 返回变量数据类型
		   
		   //2.布尔类型
		   var c=true;
		   var d=false;
		   alert(c==f);
		   
		   //3.字符串
		   var e="abcd";
		   var f='abcd';
		   alert(typeof(c));
		   alert(typeof(f));
		   
		   //4.undefined 类型 声明变量没有赋值
		   var g;
		   alert(g==undefined);
		   
		   //5.对象类型
		   var d=new Date();
		   
		</script>

函数-定义函数

functionName:表示函数名;

arguments:表示传递给函数的参数列表，各个参数之间用逗号隔开，可以为空;

statements: 表示实现函数功能的函数体;

return expression:表示函数将返回expression的值，同样是可选的的语句。

<script>
			/*
			定义函数
			*/
		  /* function test(){
			   
		   } */
		   //系统中的全局函数 在系统中已经定义好了，直接调用函数
		   //alert(输出内容); 弹框提示
		   var a=10.5;
		   var b="a10";
		   var c=5;
		   alert(parseInt(a));//把浮点数转为整数
		   alert(parseInt(b)+c);//把字符串数字转为整数，如果转换的内容是字符串，字符不能开头，只能开头的数字部分转换
		   var s="2+3*2";
		   alert(eval(s))
		</script>

<script>
			/*
			算数运算符  + - /% ++ --
			+ 加法运算  字符串链接
			*/
		   var a="10";
		   var b=5;
		   alert(a+b);//字符串连接
		   alert(a-b);//字符串-数值=数值  会把表达式中的数字字符串尝试类型转换
		   var c=10;
		   var d="a";
		   alert(c-d);//NaN not a number 如果字符串不能转化为数值 返回NAN
		   alert(a*b);//50
		   alert(a==b);//只比较值是否相等
		   alert(a===b);//全等  比较值和类型
		</script>

全局函数

• parseInt(arg) 把括号内的内容转换成整数之后的值。如果括号内是字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回 “NaN” 。

• parseFloat(arg) 把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回“NaN” 。

• typeof (arg)返回arg值的数据类型。

• eval(arg) 可运算某个字符串。

内置对象-String字符串

属性 length 用法：返回该字符串的长度.

方法 charAt(n)：返回该字符串位于第n位的单个字符.

indexOf(char)：返回指定char首次出现的位置.

lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找.

substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从start位置到end位置的前一位置的一段.

substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位置开始，长度为length的一段.

split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，分隔符字符>决定了分离的地方，它本身不会包含在所返回的数组中。

内置对象- Array数组

数组的定义方法： var 数组名> = new Array(); 这样就定义了一个空数组。

以后要添加数组元素，就用：数组名>[下标] = 值; 如果想在定义数组的时候直接初始化数据，请用：

var 数组名> = new Array(元素1>, 元素2>, 元素3>...);

还可以 var 数组名> = [元素1>, 元素2>, 元素3>...];

内置对象- Math

• Math 对象，提供对数据的数学计算。属性 PI 返回π（3.1415926535...)。

方法 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 中的最小值

内置对象-Date

● 获取日期 new Date() 返回当日的日期和时间

getFullYear() 返回四位数字年份

getDate() 返回一个月中的某一天 (1 ~ 31)

getMonth() 返回月份 (0 ~ 11)

getDay() 返回一周中的某一天 (0 ~ 6)

getHours() 返回 Date 对象的小时 (0 ~ 23)

getMinutes() 返回 Date 对象的分钟 (0 ~ 59)

getSeconds() 返回 Date 对象的秒数 (0 ~ 59))

事件

onclick()鼠标点击时；

onblur()标签失去焦点;

onfocus()标签获得焦点;

onmouseover()鼠标被移到某标签之上;

onmouseout鼠标从某标签移开;

onload()是在网页加载完毕后触发相应的的事件处理程序;

onchange()是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。

<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function test(){
				console.log("事件被触发了")
			}
		</script>
	</head>
	<body>
		<!-- 
		onclick()鼠标点击时；
		onblur()标签失去焦点; 
		onfocus()标签获得焦点;
		onmouseover()鼠标被移到某标签之上;
		onmouseout鼠标从某标签移开;
		onload()是在网页加载完毕后触发相应的的事件处理程序;
		onchange()是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。 
		 -->
		<input id="btn" type="button" value="单击事件" onclick="test()"/>
		<div onclick="test()">单击事件</div>
		<input onblur="test()"/><br />
		<input onfocus="test()"/>
		<div style="background-color: aqua;" onmouseover="test()" onmouseout="test()">aaa</div>
	</body>

Html DOM-查找元素

● 通常，通过 JavaScript，您需要操作 HTML 标签。

● 为了做到这件事情，您必须首先找到该标签。

● 要操作，先得到 ● 有四种方法来做这件事：通过 id 找到 HTML 标签 document.getElementById(“id"); 通过标签名找到 HTML 标签 document.getElementsByTagName("p"); 通过类名找到 HTML 标签 document.getElementsByClassName("p"); 通过name找到 HTML 标签 document.getElementsByName(“name");

	<title></title>
		<script>
			function test(){
			var tobj1=document.getElementById("t1");
			var tobj2=document.getElementById("t2");
			/* tobj2.value=tobj1.value; */
			/* tobj1.value=""; */
			tobj2.value=eval(tobj1.value)
			tobj1.value="";
			}
		</script>
	</head>
	<body>
		<input type="text1" id="t1" value=""/>
		<input type="text1" id="t2" value=""/>
		<input type="button" value="测试" onclick="test()"/>
	</body>

Html dom允许javaScript 改变html标签的内容。

改变 HTML 标签的属性

document.getElementById(“username").value=“new value";

DOM - 改变 CSS

● html dom允许 javaScript改变html标签的样式。语法： document.getElementById("id").style.property=new style; 例： document.getElementById("p2").style.backgroundImage="url(bg.jpg)";

温朴寒

关注

27
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
javaScript

● JavaScript是由Netscape公司（美国网景公司）开发的一种脚本语言。● Netscape公司将这种脚本语言命名为LiveScript，与java一样,也是面向对象的语言,而且无需编译，可由浏览器直接解释运行。● Netscape公司见LiveScript大有发展前途，而SUN公司( java)也觉得可以利用Livescript为Java的普及做铺垫，于是两家签订协议，将LiveScript改为JavaScript。
复制链接

扫一扫