JavaScript学习笔记

最新推荐文章于 2023-08-02 13:27:53 发布
最新推荐文章于 2023-08-02 13:27:53 发布
阅读量609 收藏
点赞数
分类专栏： 前端语言 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45012118/article/details/113915757
版权

javascript学习笔记

一、JavaScript和Java一样严格区分大小写

JavaScript最主要的是做网络通信、交互、操作DOM

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

二、JavaScript在浏览器控制台打印变量

  1. console.log(变量)
  2. JavaScript的变量都是以var定义的，其他的类似Java

三、数据类型–字符串、布尔值、逻辑运算、数组、对象、流程控制、Map和Set、iterator

**ES6新特性–严格检查模式use strict预防JavaScript的随意性出问题
**

  1. JavaScript不区分整数和小数
    NaN–not a number
    Infinity–表示无限大

  2. 字符串
    “abc” ‘abc’

    2.1、正常的字符串我们使用单引号、双引号来包裹
2.2、注意转义字符 \
2.3、多行字符串` `` `

`sdsdsd
sfdsafd
张山
是的是的
发达发达地方
`

	2.4、模板字符串

let msg=`你好，{$name}`

	2.5、字符串长度 length
	2.6、字符串的可变性--不可变
	2.7、大小写转换方法
		toUpperCase() 转大写
		toLowerCase() 转小写
	2.8、获取指定字符串的下标 indexOf
	2.9、截取指定字符串substring
		[) 截取前面不截取后面
		substring(1) 从第一个截取到最后一个
		substring(1,3) 从第一个截取到第三个

  1. 布尔值 true flase

  2. 逻辑运算
    &&与运算
    ||或运算
    !取反运算

  3. 比较运算
    = 赋值
    !=不等于
    ===绝对等于（推荐使用这个）
    只能通过isNaN来判断一个数是否是NaN
    浮点数问题：精度的损失，尽量避免使用浮点数来计算

  4. null和undefined
    null 空
    undefined 未定义

  5. 数组

    7.1、JavaScript中数组不需要是相同的数据类型，数组（array）可以包含任意的数据类型

var s1=["掌声"，5555，sdsds，null，true]

	7.2、数组长度length
	7.3、IndexOf()，通过元素获取下标索引
	7.4、slice()截取数组的一部分，返回一个新的数组，类似于String中的subString
	7.5、push()往数组尾部压入一个元素，pop()弹出数组尾部的元素
	7.6、unshift()压入到头部，shift()弹出头部一个元素
	7.7、排序sort()
	7.8、元素反转reverse()
	7.9、concat()拼接数组，返回一个新数组
	7.10、连接符join，打印拼接数组的特定连接符
	7.11、多维数组

var arr[1][2]
  1. 对象–若干个键值对
    数组是中括号[]，对象是大括号{}
var 对象名={
		属性名1：属性值1，
		属性名2：属性值2，
		属性名3：属性值3
		}
var person={
		name: “sss”，
		age：12，
		ss：[s,1,2,34,,43]

	8.1、对象赋值
	8.2、使用一个不存在的对象，不会报错
	8.3、动态的删减属性，通过delete

delete.person.name

	8.4、动态的添加，直接给新的属性添加值即可

person.name="lucy"

	8.5、判断属性是否在这个对象中

'name' in person		

	8.6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

  1. 流程控制

     9.1、if循环大致同java
 9.2、while循环for循环都大致同Java
 9.3、数组循环forEach（）
 9.4、for...in

  2. map和set ES6新特性

    10.1、map

var map=new Map([['tom',100],['lucy',100],['zhang',100]])
		var name=map.get('tom')
		map.set('admin',12212)
		map.delete("admin")

	10.2、set：无序不重复的集合

var set=new Set([3,2,2,2,2])  set去重
		set.add(2)
		set.delete(2)
  1. iterator来遍历和迭代Map、Set集合
var arr=[2,1,2,1]

	11.1、遍历下标

for(var i in arr){
		console.log(i) //打印出来的是下标	
		}

    11.2、for..of迭代遍历，ES6新特性

遍历数组、map、set集合
		for(var i of arr){
		console.log(i) //打印出来的是具体的值	
		}

四、函数

  1. 定义函数–两种方式

    1.1、方式一（后端程序员的偏爱）

function as(x){
if(x>=0){
return x;
}
else {
return x;
}
}

	1.2、方式二（前端程序员的偏爱）

var as=function(x){ 
//其中function(x){...}叫做匿名函数				
if(x>=0){
return x;
}
else {
return x;
}
}

	1.3调用函数

as(10) 
as(10)

 	1.4、调用函数时的参数问题，JavaScript中可以传任意个参数，也可以不传参数
 			这就需要我们自己来手动处理空参问题了

var as=function(x){ 
if(typeof x!='number'){
throw 'not a number';
}
//其中function(x){...}叫做匿名函数				
if(x>=0){
return x;
}
else {
return x;
}
}
  1. arguments是一个js免费赠送的关键字–代表传递进来的所有参数是一个数组！
var as=function(x){ 
console.log("x=>"+x);
for(var i=0;i<argument.length;i++){
console.log(argument[i]);
}
//其中function(x){...}叫做匿名函数				
if(x>=0){
return x;
}
else {
return x;
}
}
  1. rest函数ES6新特性，获取已经定义的参数之外的所有参数…rest
function as(a,b,...rest){
            console.log("a=>"+a);
            console.log("b=>"+b);
            console.log("rest=>"+rest);
        }

  1. 变量的作用域

     4.1、var局部变量
 4.2、let全局变量
 4.3、变量的由内向外查找原则，变量重名时，内部函数会先用自己的变量。
 4.4、养成规范，变量先定义再使用。alert也是一个windows变量

  2. 方法–方法就是把函数放对象里，对象只有两个东西–属性和方法。

var s1={
    name:"里斯",
    sex:0,
    birth:1998,
    age:function getage(){
        var now=new Date().getFullYear();
        return now-this.birth;
    }
};
console.log(s1.age());

	拆开来写如下

function getage(){ //函数
    var now=new Date().getFullYear();
    return now-this.birth;
};
var s1={//对象
    name:"里斯",
    sex:0,
    birth:1998,
    age:getage //这里是方法
};
console.log(s1.age());//调用

在js中可以控制this的指向–apply

function getage(){
    var now=new Date().getFullYear();
    return now-this.birth;
};
var s1={
    name:"里斯",
    sex:0,
    birth:1998,
    age:getage
};
console.log(s1.age());
console.log(getage.apply(s1,[]));

五、内部对象–Date、json

  1. Date对象–和Java差不多直接new出来

    常用的一些

 var now=new Date();
    now.getFullYear();//年
    now.getMonth();//月 0~11，用的时候注意
    now.getDate();//日
    now.getDay();//星期几
    now.getHours();//时
    now.getMinutes();//分
    now.getSeconds();//秒
    now.getTime();//时间戳 全球统一
    new Date(now.getTime());//时间戳转为时间
    now.toLocaleString()//当前时间
  1. JSON轻量级的数据交换格式

在JavaScript中万物皆对象，任何js支持的类型都可以用json来表示

json的格式
		对象都用{}
		数组都用[]
		所有的键值对都是用key:value

json和对象的相互转换

var test1={
        name:"tome",
        sex:0,
        sge:20
   };
    var  test2=JSON.stringify(test1);//将对象转化为json字符串
    console.log(test2);
    var  test3=JSON.parse(test2); //将json字符串转化为对象
    console.log(test3);

json对象和js对象的区别
		var json={"name":"tome","sex":0,"sge":20}
		var js={ name: "tome", sex: 0, sge: 20 }

Ajax
原生的写法：xhr异步请求
JQuery封装好的方法：
axios请求：

六、面向对象编程

类：模板
对象：具体的实例

  1. 面向对象原型继承
 var user={
         name:"小黑",
         age:20,
         run:function () {
             console.log("跑起来了");
         }
     };
    var user1={
        name: "小米"
    };
    //这个是关键__proto__,user1继承user
    user1.__proto__=user;
  1. 面向对象class继承–class关键字，ES6引入
 class student{
        constructor(name) {
        this.name=name;
        }
        hello(){
            alert("hello");
        }
    }
    class lucy extends student{
        constructor(name,grade) {
            super(name);
            this.grade=grade;
        }
        mygrade(){
            alert("lucy");
        }
    }
    var s1=new student("s1");
    var s2=new lucy("s2",50);

原型链（类比继承）–proto,在JavaScript中每个每个函数都有一个prototype属性，这个属性指向函数的原型对象

  1. 操作BOM对象（BOM–浏览器对象模型） （重要部分）

     3.1、**Windows代表浏览器窗口，常用的有获取浏览器的内外高度、宽度以及弹窗。**(重要)

	//获取浏览器内部高宽度    
	window.innerHeight
    window.innerWidth
    //获取浏览器外部高宽度    
    window.outerHeight
    window.outerWidth

	3.2、Navigate封装了浏览器的信息。常用的有获取浏览器版本、内核等信息。
	**大多数不会使用navigator，因为会被人为的修改**

    navigator.appName//浏览器名称
    navigator.appVersion//浏览器版本
    navigator.appCodeName//浏览器内部代码
    navigator.userAgent//
    navigator.platform//

3.3、screen代表屏幕尺寸
3.4、location代表当前页面的URL信息（重要）
		location当前页面URL的一些信息

host：主机
href：当前指向的位置
protocol：协议
reload：reload()刷新网页
assign：设置新的地址

3.5、document代表当前页面，HTML，DOM文档树。
3.5.1、可以获取具体的文档树节点，删除节点，实现动态的修改网页。

<dl id="java">
    <dt>javase</dt>
    <dt>javaee</dt>
    <dt>spring</dt>
</dl>
<script>
    var jiedian=document.getElementById('java');
    console.log(jiedian);
</script>

3.5.2、获取cookie

document.cookie

劫持cookie的原理
www.baidu.com
<script src="aa.js"></script>
恶意人员，获取你的cookie上传到他的服务器中。
服务器端设置：cookie：httpOnly

3.6、history前进forward和后退back

柒、操作DOM对象（DOM：文档对象模型）

注：

 浏览器网页就是一个DOM树形结构。
				更新：更新DOM节点
				遍历DOM节点：得到DOM节点
				删除：删除一个DOM节点
				添加：添加一个新的节点

要操作一个DOM节点，就必须要先获得这个DOM节点。
document:文档

<div id="d1">
    <h1 id="s1">sdsd</h1>
    <h2 class="s2">sddsd</h2>
</div>
<script>
    //对应css选择器
    var d1=document.getElementById('d1');
    var s1=document.getElementById('s1');
    var s2=document.getElementsByClassName('s2');
    //获取父节点下的所有子节点，
    var childrens=d1.children;
    //获取第一个节点
    d1.firstChild;
    //获取最后一个节点
    d1.lastChild;
    console.log(d1);
    console.log(s1);
    console.log(s2);
</script>

更新节点

<div id="d1">
    <h1 id="s1">sdsd</h1>
    <h2 class="s2">sddsd</h2>
    <h3>sdadsd</h3>
</div>
<script>
  
    //获取节点
    var s1=document.getElementById('s1');
    //操作文本
    s1.innerText="靓仔";
    //解析HTML文本标签
    s1.innerHTML=' <h3>sdadsd</h3>';
    //操作CSS
    s1.style.color='yellow';
    s1.style.fontSize='200px';
</script>

删除节点

	删除节点步骤：先获取父节点，再通过父节点删除自己。

<div id="d1">
    <h1 id="s1">sdsd</h1>
    <h2 class="s2">sddsd</h2>
    <h3>sdadsd</h3>
</div>
<script>

    //获取节点
    var s1=document.getElementById('s1');
    //获取父节点
    var father=s1.parentElement;
    //删除节点，父节点删除子节点
    father.removeChild(s1);
</script>

创建和插入节点

	1、创建一个新标签，实现插入

<div id="d1">
    <h1 id="s1">sdsd</h1>
    <h3 id="s3">sdadsd</h3>
</div>
<script>

    //获取节点
    var s1=document.getElementById('s1');
    //通过JavaScript创建一个新的节点
    var newP=document.createElement('p');//创建一个p标签
    newP.id="s2";//标签id值
    newP.innerText="哈哈哈哈";//标签内容
    s1.appendChild(newP);//新标签追加到节点是后面
    //第二种方式,推荐使用
    //获取节点
    var s3=document.getElementById('s3');
    var script=document.createElement('script');
    script.setAttribute('type','text/javascript');//
    s3.appendChild(script);//新标签追加到节点是后面
</script>

2、插入节点

<div id="d1">
    <h1 id="s1">节点</h1>
    <h3 id="s3">插入</h3>
</div>
<script>
    //获取节点
    var s1=document.getElementById('s1');
    var s3=document.getElementById('s3');
    var d1=document.getElementById('d1');
    //插入节点
    d1.insertBefore(s3,s1);
</script>

3、操作表单

获取的是一个对象：document.getElementById(“username”)
获取的是一个值：document.getElementById(“username”).value
且document.getElementById(“username”).value，取得是当前的值

document.forms	表示获取当前页面的所有表单
document.forms[0]	表示获取当前页面的第一个表单
document.forms[‘exportServlet’]	表示获取当前页面的name="exportServlet"的表单
document.forms[‘exportServlet’].username.value	获取表exportServlet，	name为exportServlet的值
document.forms[0].submit	表示提交第一个form表单

绑定按钮事件onclick

<div>
        <form action="">
            username:<input type="text" id="username3" required ><br>
            password:<input type="password" id="password3" required><br>
            <input type="submit" value="提交" onclick="myform4()"><!--绑定事件，onclick被点击-->
            <input type="reset" value="重置">
        </form>
    </div>
<script>
    function myform4(){
        alert("绑定事件已触发")
    }
</script>

绑定表单提交事件，onsubmit绑定一个提交检测的函数：true，flase。将这个给结果返回给表单，使用onsubmit接受

 <div>
        <form action="#" onsubmit="return myform4()" method="get">
            username:<input type="text" id="username3" required name="username"><br>
            password:<input type="password" id="input-password3"  required><br>
                    <input type="hidden" id="md5-password" name="md5-password">
            <input type="submit" value="提交"><!--绑定事件，onclick被点击-->
            <input type="reset" value="重置">
        </form>
    </div>
<script>
    function myform4(){
        var username=document.getElementById('username3').value;
        var password=document.getElementById('input-password3').value;
        var md5password=document.getElementById('md5-password').value;
        console.log(password);
        password=md5(password);
        md5password=password;
        console.log(password);
        console.log(md5password);
        //return 决定是否会跳转
        return true;
    }
</script>

表单提交MD5加密

    <div>
        <form action="">
            username:<input type="text" id="username3" required ><br>
            password:<input type="password" id="password3" required><br>
            <input type="submit" value="提交" onclick="myform4()"><!--绑定事件，onclick被点击-->
            <input type="reset" value="重置">
        </form>
    </div>
<script>
    function myform4(){
        var username=document.getElementById('username3').value;
        var password=document.getElementById('password3').value;
        console.log(password);
        password=md5(password);
        console.log(password);

    }
</script>
风雪过客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
12-08
本文实例讲述了JS使用正则表达式获取小括号、中括号及花括号内容的方法。分享给大家供大家参考，具体如下： JS 正则表达式 获取小括号 中括号 花括号内的内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.jb51.net JS获取括号内容</title> </head> <body> [removed] var str="123{xxxx}456[我的]789123[你的]456(1389090)789"; var regex1 = /\((.+?)\)/g;
js中截取字符串里=后的内容、括号间内容
Zheng_xinle的博客
11-08 5732
js截取字符串中=后的内容、大括号、小括号、中括号间的内容
js 获取到左右小括号里面的内容
sakura的博客
08-02 1404
js 获取到左右小括号里面的内容
JS利用正则表达式（match）截取括号中的文字与数字
weixin_43416930的博客
12-08 4071
利用js正则表达式，提取指定内容，如 汉字、数字等。
js截取一对括号里面的内容（正则表达式）
m0_37158404的博客
05-12 4515
本文只针对有一对括号的情景： 相关正则表达式： // 小括号和中括号作为正则里的特殊字符，需要使用转义字符\ let regex = /\((.+?)\)/g; // 小括号 let regex = /\[(.+?)\]/g; // 中括号 // 下面这些括号，则不需要，不过加了也没关系 let regex = /{(.+?)}/g; // 大花括号 let regex = /（(.+?)）/g; // 中文小括号 let regex = /【(.+?)】/g; // 中文中括号 使用示例：
javascript学习笔记
11-24
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要...
javaScript学习笔记
最新发布
03-10
个人在学习javaScript过程中做的一些笔记和代码实例
Ruffy javascript 学习笔记
10-29
Ruffy javascript 学习笔记
JavaScript 学习笔记（十一）
10-29
继续学习的是document对象。
JavaScript学习笔记讲解
05-07
第 1 章 JAVASCRIPT的语法 1 1.1 什么是脚本程序和JAVASCRIPT 1 1.1.1 什么是脚本程序 1 1.1.2 Javascrpit的简介 1 1.2 脚本代码的位置 2 1.2.1 也可将javascript放入到单独的一个文件js文件，在需要使用的时候引入:...
JavaScript 学习笔记一些小技巧
10-29
JavaScript 学习笔记一些小技巧，大家可以参考下，比较实用的知识。
JavaScript 学习笔记
01-18
JavaScript 学习笔记
JavaScript 学习笔记（六）
10-29
JavaScript 定义类或对象,javascript步入高手行列必须要了解的。
JavaScript 学习笔记（四）
10-29
今天继续学习JS中的对象，昨天学完了本地对象中的两个重要对象Array和Date。今天看下内置对象Global对象和Math对象。
js获取字符串括号中的内容
qq_44136882的博客
08-15 5012
js获取字符串括号中的内容
js字符串数组小技巧（获取字符串中圆括号中的内容）
树上骑个猴的博客
03-03 2431
数组转字符串，用特殊字符“，”连接。 let a = [‘a’,‘b’,‘c’] let b = a.join("，") // a，b，c
JavaScript取出字符串中括号里的内容
RaoMeng1995的博客
11-02 1万+
/** * 取出中括号内的内容 * @param text * @returns {string} */ export function getBracketStr(text) { let result = '' if (isObjEmpty(text)) return result let regex = /\[(.+?)\]/g; le...
js 正则取出一个括号中的内容
热门推荐
吃糖牙疼的博客
10-20 1万+
正则取出一个括号中的内容，不含括号 var str = "abcdd(123)asdff"; var _str = str.match(/\((.+)\)/g); //regex2 = /\[(.+?)\]/g; // [] 中括号；regex3 = /\{(.+?)\}/g; // {} 花括号，大括号 console.log(RegExp.$1) // 123 RegExp 是javascript中的一个内置对象，为正则表达式。 RegExp.$1是RegExp的一个属性,指的是与正则表达式匹配的
javascript学习笔记--查看html元素和改变html的内容
06-01
好的，我可以为您解答关于 JavaScript 学习笔记方面的问题。针对您的问题，查看 HTML 元素和改变 HTML 内容是 JavaScript 中非常常见的操作之一，我们可以通过以下几种方式实现： 1. 通过 `document.getElementById...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值