js-笔记

最新推荐文章于 2021-09-06 16:33:24 发布

Filwaod

最新推荐文章于 2021-09-06 16:33:24 发布

阅读量307

点赞数

分类专栏： js练习文章标签： js

原文链接：https://blog.csdn.net/bell_love/article/details/106464907

版权

js练习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

1.什么是javascript

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

ECMAScript是JavaScript的规格，JavaScript是ECMAScript的一种实现，在日常场合。
但事实上，JavaScript比ECMA-262的含义多得多，一个完整的JavaScript实现应该由以下三个部分组成：

ECMAScript：核心
DOM：文档对象模型
BOM：浏览器对象模型这两个词是可以互换的

ECMAScript它可以理解为是Javascript的一个标准
最新版本已经到es6版本-
但是大部分浏览器还只停留在支持es5代码上!
开发环境一线上环境,版本不一致

2.快速入门

2.1、引入JavaSciprt
1、内部标签

<script>
//...
</script>

2、外部引入

  <script src="abc.js"></script>

测试代码

<!DOCTYPE html>  
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 

    <!--script标签内,写Javascript代码--> 
    <!--<script>--> 
    <!--alert( 'hello,world');--> 
    <!--</script>--> 

    <!--外部引入--> 
    <!--注意：script标签必须成对出现--> 
    <script src="js/qj.js"></script>

    <!--不用显示定义type，也默认就是 javascript--> 
    <script type="text/javascript"> 

    </script> 
</head> 
<body>
<!--这里也可以存放--> 
</body> 
</html>

2.2、浏览器调试必备须知

在这里插入图片描述
2.3、数据类型

变量（不能以数字开头，可以是中文）

		<script>
			var $a=1;
			var _a=2;
			var 你="傻逼";
			alert(你);
		</script>

number

		<script>
			123 //整数123
			123.1 //浮点数123.1
			1.123e3 //科学技术法
			-99 //负数
			NaN //not a number
			Infinity //无穷大
		</script>

字符串

		<script>
		"你好"
		'我很好'
		</script>

布尔值

true，false

逻辑运算

		&& 两个都为真,结果为真
		|| 一个为真,结果为真
		!  取反

比较运算符

		=
		==    等于(值一样,类型不一样,结果为true)
		===   绝对等于(值和类型必须都一样,结果才为true)

		<script>
		//NaN===NaN,这个与所有的数值都不相等,包括自己
		//只有通过isNaN(NaN)来判断是否是NaN
		alert(NaN===NaN);    //false
		alert(isNaN(NaN));   //true
		</script>

浮点数问题
在这里插入图片描述

对象是大括号，数组是中括号~~

//Person person = new Person(1,2,3,4,5); 
var person = { 
    name:"qinjiang", 
    age: 3, 
    tags: ['js','java','web','...'] 
}

在浏览器调试

person.name 
> "qinjiang" 
person.age 
> 3

2.4、严格检查格式
在这里插入图片描述

<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
<！--
前提：IEDA需要设置支持ES6语法
'use strict'；严格险查模式，预防JavaScript的随意性导致产生的一些问题,必须写在Javascript的第一行！
局演变量建议都使用 let 去定义~
-->
<script>
	'use strict' ;
	//全局变量
	let = 1;
	//ES6   let
</script>

</head>

3、数据类型详解

3.1、字符串 在这里插入图片描述
console.log("\x41") ==> a

console.log(msg) ==> ‘你好呀，qinjiang’

3.2、数组
Array可以包含任意的数据类型

var arr = [1,2,3,4,5,6]; //通过下标取值和赋值
arr[0]
arr[0] = 1

1.长度

arr.length

注意：加入给arr.ength赋值，数组大小就会发生变化-，如果赋值过小，元素就会丢失
2.indexOf，通过元素获得下标索引

arr.indexof(2)
1

字符串的“1”和数字 1 是不同的

arr = [0,1,1];

3.slice()截取Array的一部分，返回一个新数组，类似于String中的substring

arr=[1,2,3,4,5,6]
(6) [1, 2, 3, 4, 5, 6]
arr.slice(2)
(4) [3, 4, 5, 6]

4.push()，pop()尾部

push：压入到尾部
pop：弹出尾部的一个元素

5.unshiift()，shiit()头部

unshift：压入到头部
shift：弹出头部的一个元素

6.排序sort

arr=[8,6,9,2,4,1]
(6) [8, 6, 9, 2, 4, 1]
arr.sort()
(6) [1, 2, 4, 6, 8, 9]

7.元素反转reverse()

(6) [1, 2, 4, 6, 8, 9]
arr.reverse()
(6) [9, 8, 6, 4, 2, 1]

8.数组拼接concat()

(6) [9, 8, 6, 4, 2, 1]
arr.concat(['A','B'])
(8) [9, 8, 6, 4, 2, 1, "A", "B"]

注意：concat()没有修改原数组，会返回一个新数组
9.连接符join

(8) [9, 8, 6, 4, 2, 1, "A", "B"]
arr.join('-')
"9-8-6-4-2-1"

10.多维数组

arr=[[1,2],[3,4],[5,6]]
arr[1][1]
4

3.3、对象
在这里插入图片描述
JavaScript中的所有的键都是字符串，值都是任意对象

3.4、流程控制
if 判断

var age = 3; 
if(age>3){ //第一个判断 
   alert('haha"); 
}else if(age<5) {  //第二个判断 
   alert("kuwa~"); 
}else { //否则, 
   alert("kuwa~"); 
}

while循环,避免程序死循环

while(age<100){ 
    age = age + 1; 
    console.log(age) 
} 
do{ 
    age = age + 1; 
    console.log(age) 
}while(age<100)

for循环

for (let i = 0;i< 100;i++){ 
  console.Log(i) 
 }

forEach 循环

var age = [12,3,12,3,12,3,12,31,23,123]; 
    //函数 
     age. ForEach(function (value) { 
     console.Log(value) 
 })

for…in

//for(var index in object) { }
for(var num in age){ 
    if(age.hasownProperty(num)){ 
        console.log("存在") 
        console.log(age[num]) 
    } 
}

3.5、map和set
ES6的新特性~
在这里插入图片描述

3.6、iterator
ES6的新特性~
ES6 创造了一种新的遍历命令for…of循环， Iterator 接口主要供for…of消费
使用iterator来迭代Map和Set

4、函数

4.1、定义函数
方式一：

			function abc(x){
				if(x<0){
					return -x;
				}
				return x;
			}

一旦执行到return代表函数结束，返回结果。
如果没执行reurn，函数执行完也会返回结果，结果是undefined。

方式二：

			var a=function(X){
					if(x<0){
					return -x;
				}
				return x;
			}

function(x){…}这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数！
方式一和方式二等价

调用函数：

abc(-1)  //1

在这里插入图片描述

			var a=function(x){
				//手动抛出异常
				if(typeof x!='number'){
					throw 'Not aNumber';
				}
				
				if(x<0){
					return -x;
				}
				return x;
			}

在这里插入图片描述

问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有参数~

rest参数只能写在最后面，必须用…标识（rest是自定义名称）
function aaa(a,b,…like){
console.log(like);
}

4.2、变量的作用域
在这里插入图片描述

在JavaScript中，函数查找变量从自身函数开始。由“内”向“外”查找。
假设外部存在这个同名的函数变量。则内部函数会屏蔽外部函数的变量。

在这里插入图片描述
这个是在JavaScript建立之初就存在的特性，养成规范，所有的变量定义都放在函数的头部，不要乱放，便于代码维护。

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错 RefernceError

我们所有的全局变量都会绑定到我们的windows上。如果不同的js文件。使用了相同的全局变量。冲突 ~ >如果能够减少冲突?
在这里插入图片描述
把自己的代码全部放入自己定义的唯一空间名字中,上面。啊降低全局命名冲突的问题.
（jQuery库）

局部作用域 let （es6新特性）

			function aaa(){
				for (var i = 0; i < 100; i++) {
					console.log(i);
				}
				console.log(i+1);// 101
			}

			function aaa2(){
				for (let i = 0; i < 100; i++) {
					console.log(i);
				}
				console.log(i+1);// Uncaught ReferenceError: i is not defined
			}

常量const
在ES6之前，怎么定义常量：只有用最全部大写字母命名的变量就是常量，建议不要修改这样的值。

			var PI='3.14';
			console.log(PI);
			PI=123;
			console.log(PI);

在ES6引入了常量关键字 const

			const PI='3.14';
			console.log(PI);
			PI=123;//Uncaught TypeError: Assignment to constant variable.
			console.log(PI);

4.3、方法
在这里插入图片描述

5、内部对象

在这里插入图片描述

5.2、JSON

在JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示：number，String…

5.3、Ajax

6、面向对象编程

在这里插入图片描述

原型：

        var student={
            name:"qinjiang",
            age:20,
            run:function (){
                console.log(this.name + "run...");
            }
        };

        var xiaoming={
            name : "xiaoming"
        };

        //原型对象
        xiaoming._protp=student;

控制台打印下xiaoming

在这里插入代码片

在这里插入图片描述
以前的继承

现在的继承
class继承
class关键字是在ES6引入的
1.定义一个类，属性，方法

        class Student{

            constructor(name) {
                this.name=name;
            }

            hello(){
                alert('hello '+this.name);
            }
        }

        var xiaoming=new Student('xiaoming');
        var xiaohong=new Student('xiaohong');
        xiaoming.hello();

2.继承

    <script>
        class Student{

            constructor(name) {
                this.name=name;
            }

            hello(){
                alert('hello '+this.name);
            }
        }

        var xiaoming=new Student('xiaoming');
        var xiaohong=new Student('xiaohong');
        //xiaoming.hello();

        class XiaoXueSheng extends Student{

            constructor(name,grade) {
                super(name);
                this.grade=grade;
            }
        }

        var xiaoxuesheng=new XiaoXueSheng('xiaoxuesheng',6);
        xiaoxuesheng.hello();
    </script>

本质还是原型的概念
在这里插入图片描述
原型链

7、操作BOM对象(重点)

在这里插入图片描述
window
window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
304
window.innerWidth
774
window.outerHeight
830

Navigator(不建议使用)

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36"
navigator.platform
"Win32"

大多数时候，我们不会使用navigator对象，因为会被人修改！

screen
代表屏幕尺寸

screen.width
1536
screen.height
864

在这里插入图片描述

document(DOM对象)
document代表当前的页面，HTML DOM文档树

document.title
"Title"
document.title='hello'
"hello"

在这里插入图片描述

8、操作DOM对象（重点）

在这里插入图片描述
获得DOM节点

    <div id="father">
        <h1>标题一</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
    </div>

    <script>
        //对应css选择器
        var h1=document.getElementsByTagName("h1");
        var p1=document.getElementById("p1");
        var p2=document.getElementsByClassName("p2");
        var father=document.getElementById("father");

        father.firstChild;
    </script>

在这里插入图片描述

删除节点

注意，删除多个节点的时刻，children是在时刻变化的，删除节点的时候一定要注意。

插入节点
获得了某个DOM节点，假设这个DOM节点是空的，通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，就会产生覆盖。

<body>
    <p id="js">JS</p>
    <div id="div">
        <p id="se">JavaSE</p>
        <p id="ee">JavaEE</p>
        <p id="me">JavaME</p>
    </div>
    <script>
        var js=document.getElementById("js");
        var div=document.getElementById("div");
        div.appendChild(js);
    </script>
</body>

js代码不能放在中，报错 Uncaught TypeError: Cannot read property ‘appendChild’ of null
突然之间发现这个错误，可能以前也没怎么注意过，然后找到了问题，记录一下。
通过查找原因发现是由于获取不到插入的节点
出现这种情况的原因：获取节点时，节点还没加载
如：js写在head里面，取body里面的某一节点，这时候是取不到的。
解决方法：把JS代码放到后面。

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

<body>
    <p id="js">JS</p>
    <div id="div">
        <p id="se">JavaSE</p>
        <p id="ee">JavaEE</p>
        <p id="me">JavaME</p>
    </div>
    <script>
        var js=document.getElementById("js");
        var div=document.getElementById("div");
        //通过js创建一个新的节点
        let newP = document.createElement("p");
        newP.id="newP";
        newP.innerText="hello ,newP";
        div.appendChild(newP);

        //创建一个标签节点
        let scriptElement = document.createElement("script");
        scriptElement.setAttribute('type','text/javascript');

        document.getElementsByTagName('head')[0].appendChild(scriptElement);

    </script>
</body>

在这里插入图片描述

9、操作表单（验证）

在这里插入图片描述

提交表单，md5密码加密，表单优化（高级玩法 - hidden）

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- MD5工具类 -->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!-- 表单绑定提交事件
οnsubmit= 绑定一个提交检测的函数，true，false
将这个结果返回给表单，使用onsubmit接受 -->
    <form action="" method="POST" onsubmit="return aaa()">
        用户：<input type="text" id="uname" name="username" placeholder="用户名"/><br/>
        密码：<input type="password" id="pname" name="userpassword" placeholder="密码"/><br/>
        <input type="hidden" id="md5pwd" name="epassword"/>
        <button type="submit">提交</button>
    </form>
</body>

<script>
    function aaa(){
        var u = document.getElementById('uname');
        var p = document.getElementById('pname');
        var md5pwd = document.getElementById('md5pwd');
        md5pwd.value = md5(p.value);
        //可以校验判断表单内容，true就是通过提交，false是阻止提交
        return true;
    }
</script>

10、jQuery

获取jQuery - 公式：$(selector).action()

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- jQuery的cdn加速地址 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <a href="" id="test-jquery">点我</a>

    <script>
        //选择器就是css的选择器
        $('#test-jquery').click(
            function(){
                alert('holle，world');
            }
        )

    </script>
</body>

选择器
在这里插入图片描述
文档工具站：https://jquery.cuishifeng.cn/

事件
鼠标事件，键盘事件，其他事件
在这里插入图片描述
比如获取鼠标坐标：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red; 
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <!-- 要求：获取鼠标当前的一个坐标 -->
    mouse: <span id="mouseMove"></span>
    <div id="divMove">
        在这里移动试试：
    </div>
    <script>
       // 在网页加载完毕之后，响应事件
        $(function(){
            $('#divMove').mousemove(function(e){
                $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
            })
        });
    </script>
</body>

操作DOM
在这里插入图片描述

> 小技巧

1、巩固JS

看jQuery源码
看游戏源码
2、巩固HTML
CSS —> 扒网站，全部下载下来，修改对应位置的样式，看效果

Filwaod

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-笔记

1.什么是javascriptJavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。ECMAScript是JavaScript的规格，JavaScript是ECMAScript的一种实现，在日常场合。但事实上，JavaScript比ECMA-262的含义多得多，一个完整
复制链接

扫一扫