JavaScript超详细笔记——概述、基本语法、函数、内置对象、事件、htmlDOM对象、计时器

最新推荐文章于 2024-05-20 15:17:08 发布

弥岛

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量115

点赞数 1

文章标签： javascript 笔记前端

本文链接：https://blog.csdn.net/xinin919/article/details/130309061

版权

文章目录

javaScript概述
基本语法
函数
内置对象
事件
htmlDOM对象
计时器

javaScript概述

一、JavaScript是一种直译式脚本语言，用来为网页添加各式各样的动态功能，与java一样,也是面向对象的语言，而且无需编译，可由浏览器直接解释运行，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

二、作用：

1.响应客户端鼠标和键盘事件
2.客户端页面表单数据验证
3.使用JavaScript动态的改变页面标签的样式

基本语法

一、脚本写在哪里？
javaScript脚本写在一组script标签中，此标签可以放在head中或body中，一般习惯放在head中，还可以将脚本写在外部的.js文件中，在html页面中导入外部的.js文件

样式：
<html>
<head>
<script src=“外部文件”>
...
</script>
</head>
<body>
...
</body>
</html>

第一个JavaScript程序：
<html>
<head>
<script type="text/javascript">
alert(“hello javaScript”);
</script>
</head>
<body>
</body>
</html>

二、变量

声明变量用var关键字：

var name

三、数据类型

1、数值型(number)：
包括整型数和浮点型数。
var a=10;

2、布尔型(boolean)：
var b=true;

3、字符串型：
由单个或多个文本字符组成。字符串是用单引号或双引号来说明的。
（使用单引号来输入包含引号的字符串。）
var c=‘5’;
var d=“abc”;

4: undefined类型：
var e;

5: Object类：
var f=new Date();

四、算术运算符
+可以进行“加法”与“连接”运算，如果2个运算符中的一个是
字符串，javascript就将另一个转换成字符串，然后将2个运算数
连接起来。
在这里插入图片描述
五、赋值运算符

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yMjSB0Tf-1682162777399)(C:\Users\月\AppData\Roaming\Typora\typora-user-images\1682157995500.png)]$

六、比较运算符
在这里插入图片描述

七、逻辑运算符
在这里插入图片描述

八、条件运算符：
语法：
var result = (条件表达式)?结果1:结果2

九、控制语句：
第一种是选择结构
1.单一选择结构（if）
2.二路选择结构（if/else）
3.多路选择结构（switch）
第二种类型的程序控制结构是循环结构。
1.由计数器控制的循环（for）
2.在循环的开头测试表达式（while）
3.在循环的末尾测试表达式（do/while）
4.break continue

函数

一、定义函数的语法：

函数定义的基本语法：
function 函数名(参数){
函数内容
}

二、全局函数

• parseInt(arg) 把括号内的内容转换成整数之后的值。如果括号内是字符串。
则字符串开头的数字部分被转换成整数，如果以字母开头，则返回
“NaN”。
• parseFloat(arg) 把括号内的字符串转换成浮点数之后的值，字符串开头的
数字部分被转换成浮点数，如果以字母开头，则返回“NaN”。
• typeof (arg)返回arg值的数据类型。
• eval(arg) 可运算某个字符串。

内置对象

一、4种内置对象：宇符串,数组,日期,Math

//①.内置对象—字符串
var s="cab:cdef";
//console.log向浏览器控制台输出日志信息，便于程序调试
console.log(s.length);
console.log(s.charAt(2));
console.log(s.indexOf("c"));
console.log(s.lastIndexOf("c"));
console.log(s.substring(0,2));//(开始位置，结束位置)
console.log(s.substr(1,4));//(开始位置，截取长度)
console.log(s.split(";"));

//②.内置对象-数组
var a=new Array();//没有长度
a[0]=1;
a[1]="m";
a[2]="你好";
console.log(a);
var b=new Array(1,2,3,"bbb");
console.log(b);
var c=[1,2,3,4,5];
console.log(c);
console.log(c.join(":"));//数组转为字符串
console.log(c.reverse());//倒叙
var d = ["b","c","a","d"];
console.log(d.sort());
var e = [2,1,4,12];
console.log(e.sort(numbersort));//排序不是按照数字大小排序
//自定义的排序规则函数
function numbersort(a,b){
return a-b;
}

③.内置对象-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))

④.内置对象- 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

事件

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

<input type="button" value="点击按钮" onclick="fun()">
<input type="text" onblur="fun()"><br/>
<input type="text" onfocus="fun()"><br/>
<input type="button" value="移入时" onmouseover="fun()"><br/>
<input type="button" value="移出时" onmouseout="fun()"><br/>
<input type="text" onchange="fun()"><br/>
<div onclick="fun()">登陆</div>

htmlDOM对象

1、DOM是文档对象（网页中的标签）模型的缩写，通过htmldom，可用javaScript操作html文档的所有标签，通过 JavaScript，您需要操作HTML标签，首先我们需要找到该标签：

有四种方法可以找到该标签：

通过 id 找到 HTML 标签
document.getElementById(“id");
通过标签名找到 HTML 标签
document.getElementsByTagName(“p”);
通过类名找到 HTML 标签
document.getElementsByClassName(“p”);
通过name找到 HTML 标签
document.getElementsByName(“name");

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

// 1、对标签的属性进行操作
function oper(){
var obj1=document.getElementById("t1");
var obj2=document.getElementById("t2");
obj2.value=obj1.value;
obj1.value="按钮";
obj1.type="button";
}

// 2、对标签的体重内容进行操作
// function oper(){
// var divobj1=document.getElementById("div1");
// var divobj2=document.getElementById("div2");
// divobj2.innerHTML=divobj1.innerHTML;
// }
// 3、对标签的css操作
function oper(){
var divobj1=document.getElementById("div1");
divobj1.style.backgroundColor="red";
divobj1.style.width="100px";
divobj1.style.height="100px";
}