javaScript概述-CSDN博客

本文链接：https://blog.csdn.net/m0_46698935/article/details/120749000

javaScript概述

历史

javaScript是由美国网景公司开发的一种脚本语言。

原名：LiveScript，也是面向对象的语言。网景公司和Sun公司合作后改名为javaScript。

java用于服务器；javaScript用于前端网页，在浏览器运行。

javaScript的使用

可以动态操作页面内容。

具体表现：

1.响应鼠标、键盘事件。

2.客户端表单验证（在前端将一些无效的信息过滤掉，减轻服务器端的压力）。

3.动态改变标签样式。

基本语法

脚本位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
            //对象是一种复杂的数据类型，里面可以包含很多信息（属性、函数）
			aler("hello javaScript");
		</script>
	</head>
	<body>
	</body>
</html>

声明变量

var 关键字（语言中事先定义好的用来修饰的单词）

例如：

var a; //声明变量（js是弱类型语言，变量的值可以是语言中支持的所有类型）
a=10; //给变量赋值

数据类型

数值型

包含整数、浮点数。

例如：

var b=10；
    b=10.5；

布尔型

boolean，即逻辑值，true或flase。

例如：

var c=true；
    c=false；
    c==a==b；

字符串型

“ “ ‘ ’都表示字符串。

例如：

var s="abc"；
    s='abc'；

undefined类型

不明确，声明未赋值的变量。

对象型（object类型）

对象型是一种复合（复杂）类型，里面可以包含属性（变量），方法（动作）。

例如：

var date=new Date(); //会包含一个程序运行那一刻的时间信息
alert (date.getFullYear());

运算符

算术运算符

+：加法；连接字符串

var a=10;
var b=5;
var c="5";
var d="abc";
alert(a+b); //数值+数值=数值
alert(a+c); //数值+（连接）字符串=字符串
alert(c+d); //字符串+（连接）字符串=字符串

-：减法

alert(a-b); //数值-数值=数值
alert(a-c); //数值-字符串数值(隐式类型转换)=数值
alert(a-d); //NaN(not a number),"abc"不能转换为整数

*：乘法

alert(a*b); 
alert(a*c); 
alert(a*d);

/：除法

alert(a/b); 
alert(a/c); 
alert(a/d);

%：取余

alert(a%b);

++：累加

–：递减

比较运算符

== ， === ，!= ，> ，< ，>= ，<=

var x=10;
var y=10;
var z="10";
alert(x==y);
alert(x==z);//true
alert(x===y);//=== 全等，比较值和类型
alert(x===z);//false

赋值运算符

=，+=，-=，*=，/=，%=

逻辑运算符

&&（逻辑与，短路与），||（短路或），!（逻辑非）

var m=10;
var n=5;
alert(m<n&&m++>n);//false&&true=false
alert(m);
alert(m>n||m++<n);//true||false=true
alert(m);

条件运算符（三元运算符）

结果=(条件)?表达式:表达式

var res=(m>n)?m:n;
alert(res);

流程控制

if，switch，for，while

函数

函数：定义一次，多次调用完成某种功能的有名称的代码块。

函数定义的基本语法：

fuction 函数名([参数]){

函数体

[return 值]

}

全局函数

parseInt(arg)：将参数转换为整数，浮点->整数

字符串开头的数字部分转为整数；字母开头的字符串返回NaN。

parseFloat(arg)：将参数转换为浮点数，浮点->浮点

字符串开头的数字部分转为浮点数；字母开头的字符串返回NaN。

typeof (arg)：返回所给参数的数据类型。

eval(arg)：可以将字符串当做脚本运行（可运算某个字符串）。

内置对象

内置对象：语法中已经定义好的。

日期对象：表示程序运行时的时间。

算术对象：包含一些算术运算的函数。

内置对象-Date

var date=new Date();//创建一个日期对象
var year=date.getFullYear();//返回四位数字年份
var month=date.getMonth();//返回月份 (0 ~ 11)
var da=date.getDate();//返回一个月中的某一天 (1 ~ 31)

var h=date.getHours();//返回 Date 对象的小时 (0 ~ 23)
var m=date.getMinutes();//返回 Date 对象的分钟 (0 ~ 59)
var s=date.getSeconds();//返回 Date 对象的秒数 (0 ~ 59)

var w=date.getDay();//返回一周中的某一天 (0 ~ 6)
alert(year+"年"+month+"月"+da+"日"+h+"时"+m+"分"+s+"秒"+"星期"+w);

内置对象- 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 之间的随机数，可能为0，小于1

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

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

事件

事件：属于html标签中的内容，例如点击按钮，会触发一个事情。

不同事件触发方式不同。

触发方式：鼠标触发，键盘触发。

单击：鼠标左键单击 onclick()

双击：鼠标左键双击 ondblclick()

移入：鼠标移动到标签上触发 onmouseover()

移出：鼠标移出标签触发 onmouseout()

聚焦：输入组件获得鼠标焦点触发 onfocus()

失焦：输入组件失去鼠标焦点触发 onblur()

内容改变：内容改变且失去焦点触发 onchange()

页面加载：当页面内容一旦加载触发 onload()

键盘按下：按键按下时触发 onkeydown()

键盘抬起：按键抬起时触发 onkeyup()

点击submit按钮触发，有返回值，返回true表示提交表单，返回false不返回 onsubmit()

Html DOM 对象

html标签可以触发事件，事件可以调用js中的函数，在函数中操作网页中的内容(标签)。

HTML DOM对象：指的是网页中的具体的一个标签。

js是面向对象的语言，在js的世界中，认为网页中的每一个标签就是一个对象，操作网页就是操作对象。

解决问题：在js中获得网页中的标签

要操作，先得到

document对象：表示整个html文档，通过document对象，就可以获得网页中的标签。

查找元素

（1）通过 id 找到 HTML 标签，例如：
var obj = document.getElementById(“id”);
（2）通过标签名找到 HTML 标签，例如：
var obj = document.getElementsByTagName(“p”);
（3）通过类名找到 HTML 标签，例如：
var obj = document.getElementsByClassName(“p”);
（4）通过name找到 HTML 标签，例如：
var obj = document.getElementsByName(“name”)；

改变HTML

改变 HTML 标签的属性，例如：
document.getElementById(“username”).value=“new value”;
document.getElementById(“image”).src=“new.jpg”;
修改 HTML 内容使用 innerHTML 属性，例如：
document.getElementById(“div”).innerHTML=new HTML;