前端之js学习

最新推荐文章于 2023-09-01 20:58:14 发布

一直学习的程序小白

最新推荐文章于 2023-09-01 20:58:14 发布

阅读量3.6k

点赞数 4

分类专栏：前端学习文章标签： js

本文链接：https://blog.csdn.net/dgvesrhetd/article/details/119102528

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

js学习

一、简介
1、简介
Java Script 简称JS，是一种基于对象Object和事件驱动Event Driver的解释型脚本语言，用于增强HTML页面的动态交互性。
2、特点

嵌套在HTML中；
环境支持，js在运行中需要浏览器环境的支持，如果使用的浏览器不支持js脚本，那么浏览器在运行时将忽略js代码；
解释执行，无需经过专门编译器的编译，在嵌入脚本的HTML文档载入时被浏览器逐行地解释执行；
弱类型语言，js中不需要指定变量的类型；
基于对象，js提供了很多内建对象，也允许定义新的对象，还提供对DOM（文档对象模型）的支持；
事件驱动，HTML中控件（如文本框、按钮）的相关事件触发时可以自动执行js代码；
跨平台，js是依赖浏览器运行的，与具体的操作系统无关。

二、基本语法
1、引入JS脚本
内部引入

<script type="text/javascript">
//js脚本代码
</script>

外部引入js文件

<head>
<script type="text/javascript" src="../js/div.js"></script>
</head>

2、声明变量
JS中的任何数据类型的变量都可以用var关键字声明；
示例：

var no = 1;
var str = "abc";
var obj = {
	name: "张三",
	age: 12
};

三、数据类型
1、五种原始基本数据类型
在这里插入图片描述

2、引用类型
在这里插入图片描述

3、数据类型转换
1） parseInt()转成数字类型
示例：

var no = "1";
console.info(no+1);//打印结果 11
var no2 = parseInt(no);
console.info(no2+1);//打印结果 2

注意当转换失败时，会报NaN（Not a Number），指不是一个数字，所以导致转换失败；
可以用isNaN()方法验证，将要类型转换的值是否是数字；
示例：

var no = "1";
var tar = isNaN(no);
2 ）parseFloat()转成小数

四、运算符
1、算术运算符
在这里插入图片描述

2、赋值运算符
在这里插入图片描述

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

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

5、三元运算符（条件运算符）
Condition ? Value if true : value if false;
示例：

var text = (a > b) ? "yes" : "no";

五、分支语句
1、if分支
if(condition){

} else if(condition){

} else {

}

2、switch分支
switch(){
case v1:
break;
case v2:
break;//跳出分支
default:
//当所有的case值都不匹配时，执行default分支
}

六、循环语句
1、for/in循环
示例：

//创建对象
var user = {
name:"张三",
	age: 12,
	sex: "男"
}
for(key in user){
//获取对象的属性值
	var value = user[key];
	console.info(key + ":"+ value);
}

2、for循环

var arr = [1,2,3,4];
for(var i = 0; i < arr.length; i++){
console.info(arr[i]);
}

3、while循环

while(condition){

}

4、do while循环

do{

}while(condition);

5、break/continue关键字
break 跳出循环，循环终止；
continue 跳出本次循环，继续下一次循环；

七、函数function
函数用function关键字声明

function [函数名](参数列表){
return [返回值];
}

无参无返回值函数

function f1(){

}

有参无返回值函数

function f2(a, b){
//参数列表中的形参，不需要用var声明
}

有参有返回值函数

function f3(a, b){
return a+b;
}

调用函数

f1();
f2(1, 2);
var c = f3(1, 2);

八、对象
1、创建对象

var user = {
//对象属性
name:"张三",
	age: 12,
	sex: "男",
//对象方法
move:function(){
console.info("user is moving");
}
}
获取

2、获取对象属性值

var property = user.name;
或者
var property = user["age"];

3、修改属性

user.name = "李四";
或
user["age"] = 20;

4、添加属性

user.addr = "青岛";

5、删除属性

delete user.addr;

九、DOM文件对象模型
DOM(Document Object Model) 文档对象模型
当页面被加载时，浏览器会创建页面的DOM，可以把DOM理解为当前被加载的HTML页面的对象；

1、domument对象
getElementById()
根据标签的id，返回一个标签对象(element)
示例：

var ele = document.getElementById("user_name");
console.info(ele.value);

getElementsByName()
根据标签名称（name属性），返回一个标签对象的集合
示例：

var ele = [];
ele = document.getElementsByName("p2");
console.info(ele[0].innerHTML);

getElementsByTagName()
根据标签名，返回一个标签对象的集合

2、element对象
在这里插入图片描述

3、DOM事件
在这里插入图片描述
示例：

<input type="button" value="获取属性值" onclick="getElementAttribute();" />

十、BOM浏览器对象模型
1、window对象
所有浏览器都支持window对象，它表示浏览器窗口；
在这里插入图片描述

2、Location对象
URL示例：http://192.168.1.156:8080?content=淘宝
[protocol]😕/[pathname]:[prot]?[search]
在这里插入图片描述

3、History对象
history对象相当于浏览器中的历史记录，可以通过history跳转到我们之前访问过得指定页面；

在这里插入图片描述
示例：

//页面跳转方式1
//跳转到指定路径的页面
window.location.href='https://www.baidu.com';
				
//页面跳转方式2
//history 页面访问历史记录
//back() 加载history列表中的前一个url
window.history.back();
				
//页面跳转方式3
//go()加载history列表中的某一个具体页面
window.history.go(-1);//-1表示当前页面的前一个页面

4、navigator对象
在这里插入图片描述
示例：

//appName属性 返回浏览器的名称
var browser_name = window.navigator.appName;
alert(browser_name);
			
//返回浏览器的平台和版本信息
var app_version = window.navigator.appVersion;
alert(app_version);
			
//判断浏览器是否启用cookie,返回一个布尔值
var useCookie = window.navigator.cookieEnabled;
alert(useCookie);

十一、弹框
警告框

alert("警告框")

确认框

var tar = confirm("请确认");
if(tar){
}

输入框

prompt("标题","输入提示信息");

十二、定时事件
setInterval(function, time);
设置间隔多长时间执行一次function代码，代码可以被多次执行，时间单位是毫秒ms
示例：

//设置1000ms执行一次，打印当前系统时间
var id = setInterval(function(){
console.info("定时任务:::"+new Date().toString());
},1000);

clearInterval(id);
1可取消由 setInterval() 设置的time间隔时间，即让setInterval失效。
2 clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
示例：

function stop(){//可以通过触发事件调用该方法
clearInterval(a);
}

setTimeout(function,time);
设置延迟多长时间执行代码，代码执行一次，时间单位为毫秒ms
示例：

//调用该方法后，延迟2s执行弹框
function run(){
setTimeout(function(){
		alert("延迟执行，只执行一次");
	}, 2000);
}

十三、Cookie
Cookie是页面之间的共享数据，被保存在浏览器中，有失效时间
1、创建/修改Cookie

//方式1 会话状态，关闭浏览器cookie消失
document.cookie="username=张三;"
//方式2 创建cookie设置有效期，到期cookie消失
document.cookie="username=张三; expires=Fri Jul 23 2021 15:24:48 GMT";

2、删除cookie

//修改cookie有效期让cookie失效
document.cookie="username=张三; expires=Fri Jul 23 1970 15:24:48 GMT";

3、查询cookie

var cookies = [];
cookies = document.cookie.split(',');
for(ck in cookies){
var kv = ck.trim().split('=');
console.info(kv[0]+':'+kv[1]);
}

一直学习的程序小白

关注

4
点赞
踩
31

收藏

觉得还不错? 一键收藏
0
评论
前端之js学习

js学习一、简介1、简介Java Script 简称JS，是一种基于对象Object和事件驱动Event Driver的解释型脚本语言，用于增强HTML页面的动态交互性。2、特点嵌套在HTML中；环境支持，js在运行中需要浏览器环境的支持，如果使用的浏览器不支持js脚本，那么浏览器在运行时将忽略js代码；解释执行，无需经过专门编译器的编译，在嵌入脚本的HTML文档载入时被浏览器逐行地解释执行；弱类型语言，js中不需要指定变量的类型；基于对象，js提供了很多内建对象，也允许定义新的对象，还
复制链接

扫一扫