Day10 学习JavaScript基础

最新推荐文章于 2024-09-13 08:33:26 发布
最新推荐文章于 2024-09-13 08:33:26 发布
阅读量71 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/asd1996asdd/article/details/108944942
版权

学习JavaScript基础

JavaScript 是一门脚本语言，和java没啥关系

引入的两种方式

  1. 在html的head标签内写<script>写js代码<script>
// 弹窗
<script>
    alert("123");
</script>
  1. 通过创建js文件外部引入，<script src=“js文件的地址”></script>

基本语法入门

  1. 定义变量 var 变量名; / 也可以给初始值 var 变量名 = 初始值 ;
  2. 数据类型：
    - number ： 数字，小数和整数都是一样的类型 NaN : 不是一个数字 Infinity:表示无限大
    - 字符串 ： “aaa” ‘aaa’
    - 布尔值 ： true false
    - 逻辑运算 ： && || !
    - 比较运算符：两个等于（类型不一样，值一样，也为true 1==“1”），=== 表示绝对等于（类型和值都一样，才为true）
    - NaN 与任何数据都不等，包括他自己 NaN ===NaN false 需用 isNaN(NaN) 判断
    - Math.abs(1/3-(1-2/3))<0.000001 来判断是否相等 1/3 === (1-2/3) 直接这样为false
    - null 空 undefined 未定义
    - 数组 [] 没有类型限制 [1,1.1,“aa”,null]
    - 对象{key1:value1,key2:value2}
    -
  3. 建议使用严格检查模式 ‘use strict’ – ES6 语法
  4. 建议使用let 定义局部变量 var 定义全局变量

字符串

  1. 多行字符串 字符串
  2. 模板字符串 aaa, ${变量名} 例： asd ${num} sad${a}
  3. 字符串长度 str.length
  4. 字符串不可变
  5. 截取字符串 str.substring(1,4) 包括下标1不包括下标4
    在这里插入图片描述

数组

  1. 数组长度是可变的 可以给arr.length赋值
  2. 可以通过arr[0] 赋值和取值
  3. 长度 arr.length
  4. 通过元素获得下标索引 arr.index0f(元素)
  5. 截取数组 arr.slice(1,6) [1,6)包括下标1不包括下标6
  6. 可以通过push()/unshift() pop()/shift() 赋值取值 push 压入到尾部 unshift压入头部 pop 从尾部弹出 shift 头部弹出
  7. 排序 sort() 升序
  8. 反转 reverse()
  9. 打印拼接数组使用特定字符串连接 str.join("-")

对象

  1. 键都是字符串，值是任意数据类型
  2. 定义对象，都是键值对 var person={firstname:“John”, lastname:“Doe”, id:5566};
  3. 可以动态的删除对象的属性 delete person.id;
  4. 动态的添加：直接给新的属性赋值 person.age = 18;
  5. 判断属性是否存在 “age” in person; true则存在 “toString” in person 也为true 还包括从继承的
  6. 判断自身拥有的属性 person.hasOwnProperty(“age”)

Map

  1. 定义map，也是键值对 ：var map = new Map([[“tom”,20],[“lucy”,30]])
  2. 取出map的某个值 var age = map.get(“lucy”);
  3. 设置map的值 map.set(key,value) 如果key存在则添加，否则覆盖
  4. 删除某个键 map.delete(key)

Set

  1. Set 为不重复的值的集合
  2. var set = new Set([1,2,3,4,5,1,2,3,1,2,3]) 结果为[1,2,3,4,5]
  3. 添加 set.add(5);
  4. 删除 set.delete(2)
  5. 是否包含 set.has(3)

遍历

for(let x of map/set/arr){ x }

流程控制

  1. if 判断
  2. while 循环
  3. for 循环
  4. for … in 循环
  5. foreach 需要传入函数

函数

  1. 定义 function 函数名(参数){。。。} 或者 var 函数名 = function(参数){。。。}
  2. JavaScript使用时不限定传入参数个数，函数中可用arguments获取所有参数
  3. 还可以通过 …rest 获取其余参数 function aa(a,b,…rest){…}

变量作用域

1. 在函数体内var 声明一个变量，函数外不能使用
2. 函数中可以使用函数外的变量，如果在函数中定义了与函数外一样的变量，则屏蔽函数外的变量使用函数内的变量
3. JavaScript会自动提升变量到开头，但不会进行赋值

var a = 1 + y;
var y = 2;    
alter(a);    // 不会报错，只是undefine
==============相当于
var y;
var a = 1+y;
y=2;
alter(a);
  1. 全局对象 window 所有全局变量都在全局对象中，重名会冲突 window.a
  2. 建议自己定义一个全局对象 var myAll = {}
  3. 使用let 定义局部变量
for(var i=0;i<10;i++){}
alter(i) // 10
for(let i=0;i<10;i++){}
alter(i) // 报错  ReferenceError
  1. 常量使用const 定义 const PI = 3.14;

方法

  1. 定义在对象中的函数就是方法
  2. 所有的函数都有apply，也可以实现方法调用
var peo = {
	name:"xxx",
	age:14;
	now:function(){   // 这就是方法
		return new Date();
	}
}
pro.now();   // 使用方法
=================   方式2 
function getNow(){  
		return new Date();
	}
var peo = {
	name:"xxx",
	age:14,
	now:getNow    // 
}
peo.now();   // 使用方法1
getNow.apply(peo,[]) // 使用方法2  函数名(对象名，参数)
  1. Date对象： 创建 var date = new Date();
  2. JSON对象 1. 创建json JSON.stringfy(需要转化为json格式的对象) 2. 解析JSON.parse()
var peo = {
       name:"xxx",
       age:14}
JSON.stringify(peo)   // '{"name":"xxx","age":14}'

var bb = JSON.stringify(peo)   // '{"name":"xxx","age":14}'
JSON.parse(bb)     // {name: "xxx", age: 14}

面向对象编程

  1. JavaScript 有原型链的概念 来实现继承
var M = function (name) { this.name = name; }
var m1 = new M(); //创建对象
var m2 = new M();
m1.__proto__   // M的原型
// 使得m1和m2都可以共有的方法   添加共有方法
m1.__proto__.add = function () { alter("fly"); } 
// 或者
M.prototype.add = function () { alter("fly"); }


m1.add()
m2.add() // 都有结果

M.prototype === m.__proto__  // true  都指向了原型对象

在这里插入图片描述
2. ES6 可以使用class来定义 使用extends来继承

class Stu{
	constructor(name){
		this.name = name;	
	}
	dt(){alert("1")}
}
// 继承
class nextStu extends Stu{
	constructor(name,age){
		super(name);
		this.age=age;	
	}
	nt(){alert("2")}
}

操作BOM对象

  1. BOM：浏览器对象模型
  2. window对象 ： 代表浏览器窗口 有很多方法 window.innerHeight window.innerWidth
  3. navigator 对象 ： 封装浏览器的信息
  4. screen对象 ： 屏幕信息 screen.height screen.width
  5. location对象： 代表当前页面的URL信息
//刷新网页
location.reload();
// 设置新的地址
location.assign("URL地址");
  1. document ： 代表当前页面
// 获取具体的文档树
var d = document.getElementById('d');
// 获取cookie
document.cookie;
  1. history ： 浏览器的历史记录 history.back()/forward() 后退/前进

操作DOM对象

  1. DOM：文档对象模型
  2. 浏览器网页就是一个Dom树，可以更新，删除，遍历（得到），添加 Dom节点
  3. 获得节点
var id1 = document.getElementById('id1');  // 根据id获取 DOM节点
document.getElementsByClassName();// 根据class获取 DOM节点
document.getElementsByTagName();// 根据标签获取 DOM节点

father.children[index]  // 根据索引获取子节点
  1. 更新节点
id1.innertext = "1234";   // 修改文本内容
id1.innerHTML = '<em>1234</em>';  //可以解析html代码，进行展示
id1.style.color = 'blue'; // 修改样式
  1. 删除节点 ： 先获取父节点再通过父节点删除自己
// 获取父亲节点
var h1 = document.getElementsByTagName('h1');
var father = h1.parentElement();

father.removeChild(h1);
  1. 插入节点
// 追加
list.appendChild(js); // 将已有的js节点加到list节点中

// 添加新的节点
var np = document.createElement('p'); // 新建一个p标签的节点
np.id = 'np';  // 设置id为np
// 通用设置值
np.setAttribute("属性","值");
np.innertext = '123';   // 添加文本内容

// 获取body 标签  是一个数组  要取下标0  
var body = document.getElementsByTagName("body")[0];

操作表单

  1. 得到和修改输入框的值
var user = document.getElementById('user');
user.value; // 得到值
user.value = "abc"; // 修改值

// 单选框，多选框 固定value的值需要通过checked判断
sex_boy.checked    // 选中为true 否则weifalse
// 使用MD5进行加密
https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js

// 可以使用隐藏域提交

JQuery库

  1. 里面有大量javascript函数
  2. 引入 1. 下载jquery包，使用script引入 2. 使用线上的cdn，使用script引入
  3. 使用方式
$("选择器").action(function()); // 选择器和css的写法一样  action 表示事件 function()表示函数
  1. 事件： 鼠标事件 mouseXXX()， 键盘事件 ， 其他事件
// 当页面加载完之后写
$(document).ready(function(){
		// 写内容
});
// 简写
$(function(){
    // 写内容
});

还需要学习更多。。。

asd1996asdd
关注
JavaScript基础学习day01笔记
Perryc的博客
08-19 314
对JavaScript进行简单介绍，简述其组成和解释器，并对接下来将要用到的变量进行简单的陈列。末尾附js的思维导图
JavaScript的学习笔记（day14）
woyejiu的博客
08-25 290
JavaScript学习笔记
day16学习 前端JavaScript 基础
cosumerD的博客
07-13 293
前端学习 JavaScript基础 分支结构 循环 函数 数组 字符串 字典
JavaScript 基础学习笔记
幸愉编程·信奥编程私教1v1
02-17 922
HTML 控制网页的结构，CSS 控制网页的外观，JavaScript 控制网页的行为
JavaScript 基础知识 Day01
qq_73990369的博客
07-19 1096
刚学习了JS的基础知识，JS数据类型中只有number这一个数字类型，所以number在计算的时候会保留小数，不会自动取整，需要通过另外一个方法parseInt来进行取整。
day09_JavaScript基础1
08-08
学习JavaScript的基础，主要包括以下几个方面： 1. **基本语法**：JavaScript的语法与Java有相似之处，但也存在差异。例如，注释可以使用单行注释`//`或多行注释`/* ... */`。在数据类型上，JavaScript有五种原始...
JavaScript基础练习_day11
10-26
### JavaScript基础练习_day11知识点解析 #### 一、变量声明与作用域 **知识点概述：** 本部分内容涉及JavaScript中的变量声明方式以及不同声明方式之间的区别。JavaScript中有多种声明变量的方式，每种方式都有其...
day10_JavaScript高级1
08-08
JavaScript 高级课程主要涵盖了BOM（Browser Object Model）和DOM（Document Object Model）对象，以及如何...通过实际案例的练习，可以提升学员的动手能力和问题解决能力，为构建动态、响应式的网页应用打下坚实基础。
JavaScript基础练习_day4
08-27
### JavaScript基础练习_day4 #### 知识点概述 本次基础练习主要针对JavaScript中的几个核心概念进行探讨，包括但不限于变量作用域、异步操作、定时器的行为以及闭包的应用等。通过具体的代码示例，帮助初学者理解...
JavaScript基础练习_day12
10-27
### JavaScript基础练习_day12 #### 知识点概述 本篇练习主要涵盖了以下几个方面的JavaScript基础知识： 1. **数组操作**：使用数组进行循环、条件判断等基础操作。 2. **数学运算**：通过数学计算解决实际问题。...
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2792
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 832
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 413
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 858
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
JavaScript基础
zhangh040629的博客
09-10 1274
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
jEasyUI 创建带复选框的树形菜单
wjs2024的博客
09-10 346
jEasyUI 是一个基于 jQuery 的框架，它为用户提供了一套完整的用户界面组件，包括菜单、窗口、表格等。在本文中，我们将重点介绍如何使用 jEasyUI 创建一个带复选框的树形菜单。
JS的输出语句
最新发布
J3259392566的博客
09-13 184
js中严格区分大小写。
八十多种证件识别接口-JavaScript身份证识别API示例-护照识别-户口页识别
weixin_41711744的博客
09-12 502
证件识别API包含了身份证识别、护照识别、户口页识别、港澳台来往通行证识别等八十多种证件识别类型，提供了快速、精准的证件信息提取功能，广泛应用于实名认证 、机场出入口等场景。身份证识别API常用于在线支付、金融服务、酒店入住等需要进行实名认证和提取身份信息的场景。在这些场景中，通过快速识别和验证身份证信息，可以有效提高处理速度，减少人为错误，增强安全性。八十多种证件识别接口提供了一种高效、精准的识别方式来读取各类证件信息，通过合理应用这些技术，可以大幅提升用户体验和企业运营效率。
echarts饼图内容循环播放实现
qq_39877681的博客
09-12 225
echarts饼图内容循环播放实现
JavaScript Day_03：循环语句详解
"JavaScript Day_03 - 学习前端开发中的循环语句，包括while、do-while和for循环，以及break和continue关键字的使用" 在JavaScript中，循环语句是编程中非常重要的一部分，它允许我们重复执行一段代码，尤其在处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值