首页 > 编程语言 >前端基础7天快速入门——狂神说JavaScript笔记

前端基础7天快速入门——狂神说JavaScript笔记

时间：2022-10-31 13:55:42浏览次数：39  
标签：function console 入门 JavaScript name var 狂神 document log

1、快速入门

1.1 引入JavaScript

内部标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert('hello,word');
    </script>
</head>
<body>


</body>
</html>

外部引入

  • 新建一个js文件
<script src="q.js">

</script>

image-20220804211933796

1.2基本语法入门

  • JavaScript中严格区分大小写
  • 定义变量可以用java代码规范
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var  num=1;

    var score=81;
        if(score>70 && score<80){
            alert("成绩合格");
        }else if(score>80 && score<90){
            alert("成绩优秀");
        }else{
            alert("成绩不合格");
    }
</script>

</body>
</html>
  • console.log(score) 在浏览器中打印变量

image-20220804215723832

1.3数据类型

number

  • JS不区分小数和整数，统一用Number表示

image-20220805082544966

		123 //整数
        123.1 //浮点数
        1.125e3 //科学计数法
         
        NaN //not a number
        Infinity //表示无限大

字符串

‘abc’，“abc”

布尔值

true，false

逻辑运算

		 &&//两个都为真，结果为真
        || //一个为真，结果为真
        ！ //真既假，假既真

比较运算符

= //赋值
1, "1"
== 等于(类型不一样，值一样，也会判断为true)
=== 绝对等于(类型一样，值一样，结果为true)

这是一个JS的缺陷，坚持不要使用 == 比较

  • NaN===NaN,返回false,这个NaN与所有的数值不相等，包括自己
  • 只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数

image-20220805083935652

尽量避免使用浮点数进行计算，存在精度问题

一般用丨a-b丨某个精确度，来表示a=b

Math.abs(1/3-(1-2/3))<0.0000001

image-20220805084330146

null和undefined

  • null 空
  • undefined 未定义

数组

java的数组必须是相同类型，但JS不需要严格规范


        //保证代码可读性，尽量使用[]
     var arr=[1,2,3,4,5,'hello',null,true];
     console.log(arr[5]);
        
       //第二类定义方法
      new Array(1,2,3,4,5,'hello');

对象

  • 对象是大括号，数组是中括号
  • 每个属性之间使用逗号隔开，最后一个不需要逗号
var person = {
	name:'Tom',
	age:3,
	tags:['js','java','web','...']
}

image-20220805085658226

1.4严格检查模式

<!--
    前提：IEDA需要设置支持ES6语法
    'use strict';严格检查模式
    必须卸载JavaScript第一行
    局部变量建议使用let定义  
  -->
    <script>
       'use strict';
       let i=1;

    </script>

2、数据类型

2.1字符串

正常字符串我们使用 单引号，或者双引号包裹

  • 注意转移字符
\'  //单引号
\n  //回车
\t	//table
\u	//Unicode字符
\x	//Ascall字符

image-20220805110529855

多行字符串编写

  • `是table上面的键
<script>
   'use strict';
  var msg=
      ` hello
      word
      你好
      nihao`
     

</script>

image-20220805111154288

模板字符串

<script>
    'use strict';
  let name ='Tom';
  let age= 3;
  var msg=`你好，${name}`;


</script>

字符串长度

image-20220805113159833

  • console.log(msg[1]) 去指定下标字符

字符串的可变性

不可变

大小写转换

这里是方法 不是属性

console.log(student.toUpperCase() )

  • console.log(student.indexOf('t'))
  • console.log(student.indexOf('u'))

substring

substring，从0开始截取字符串

  • console.log(student.substring('0'))

    • student

  • console.log(student.substring('1'))

    • tudent

2.2数组

<script>
    'use strict';
    var arr=[1,2,3,4,5,6,7,"1","2"];
   
</script>

长度

  • alert(arr.length)
  • 注意：假如给arr.length赋值，数组大小就会发生变化~
  • 如果赋值过小，元素就会丢失

indexOf()方法

通过元素获得下标索引，字符串的 “2” 和数字2 是不同的

  • console.log(arr.indexOf('2'))
    • 8
  • console.log(arr.indexOf(2))
    • 1

slice()方法

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

  • console.log(arr.slice(1,7))
    • Array(6) [ 2, 3, 4, 5, 6, 7 ]

push()，pop()尾部

pop尾部弹出

  • arr

    • Array(9) [ 1, 2, 3, 4, 5, 6, 7, "1", "2" ]

  • arr.pop()

    • "2"

  • arr.pop()

    • "1"

push()尾部加入

  • arr.push(0) //加入数字0

    • 7 //数组长度

  • arr

    • Array(7) [ 1, 2, 3, 4, 5, 6, 0 ]

  • arr.push(10) //加入数字10

    • 8 //数组长度

  • arr

    • Array(8) [ 1, 2, 3, 4, 5, 6, 0, 10 ]

unshift(),shift() 头部

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

排序sort()

  • 冒泡排序规则
  • arr.sort()

元素反向排序

  • arr.reverse()

concat()

添加元素后，不会更改现有的数组，只会返回一个新的数组

连接符 join()

  • 打印拼接数组，使用特定的字符串连接
  • arr.join('-')

多维数组

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

填充 fill()

  • arr.fill(1)

2.4对象

若干个键值对

  • javascript 中对象，{…}表示一个对象，键值对描述属性xxx：xxx，多个属性之间用逗号隔开，最后一个属性不加逗号！
  • jJavaScript 中的所有的键都是字符串，值是任意对象！
//定义了一个person对象，它有四个属性
"use strict"
var person={
    name:"海摆摆",
     age:22,
     email:"[email protected]",
     score:66
}

赋值

  • 控制台中

person.name='小海儿' ;

使用不存在的对象属性

  • 不会报错 undefined

image-20220805164900373

动态的删减属性，通过delete删除对象的属性

delete person.name;

true

动态的增加属性

person.over='韭摆儿'

判断属性值是否在对象中 xx in xx

'age' in person

true

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

person.hasOwnProperty('tostring') >false

person.hasOwnProperty('age') >true

2.5 Map和Set

  • ES6新特性

Map

"use strict"
var map= new Map([['tom',100],['jack',60],['toni',80]]);
var score= map.get('tom');//通过key获取value
console.log(score);//打印结果

map.set('admin',150);//新增或修改 key--value
map.delete("tom");//删除键值对

Set

  • 无序不重复的集合
  • set 可以去重
var set = new Set([3,1,1,1,1]);
console.log(set);
>Set [ 3, 1 ]

2.6 iterator

ES6新特性

遍历Map

  • let 声明局部变量或者全局变量
var map=new Map([['tom',100],['jack',80],['toni',90]]);
for(let x of map){
    console.log(x);
}

遍历set

var set= new Set([2,1,3,4,4,4,4])
for(let x of set){
    console.log(x)
}

3、函数

3.1定义函数

  • 定义一个绝对值函数

方式一：

一旦执行到 return 代表函数结束，返回结果！

如果没有执行 return，函数执行完也会返回结果，结果就是 undefined

function abs(x){
    if (x>=0){
        return x
    }else {
        return -x
    }

方式二：

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

var abs = function(x){
 	if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

调用函数

abs(10)
> 10
abs(-10)
> 10

参数问题

javaScript可以传任意个参数，也可以不传递参数~
参数进来是否存在问题？
假设不存在参数，如何规避？

  • 手动抛出异常
"use strict"
function abs(x){
    if (typeof x!='number'){
        throw 'not a number';
    }
    if (x>=0){
        return x
    }else {
        return -x
    }
}

abs()
> Uncaught not a number

arguments

arguments是一个JS免费赠送的关键字；代表传递进来的所有参数，是一个数组！

function abs(x){
  console.log("x-->"+x);

  for(var i=0;i<arguments.length;i++){
      console.log(arguments[i]);
  }
    if (x>=0){
        return x
    }else {
        return -x
    }
}

abs(5,6,7,8,9,10,11) 
x-->5
5
6
7
8
9
10
11

rest

ES6引入的新特性，获取除了已经定义的参数之外的所有参数

function abs(x,y,...rest){
  console.log("x-->"+x);
    console.log("y-->"+y);
    
 abs(5,6,7,8,9,10,11) 
x-->5
y-->5
5 
6
7
8
9
10
11

3.2变量的作用域

了解

在JavaScript中，var定义变量实际有作用域

假设在函数体中声明，则在函数体外不可以使用（可以用"闭包"实现）

function qj(){
    var x = 1;
    x = x + 1;
}
x = x + 2;//Uncaught ReferenceError: x is not defined

两个函数使用相同的变量名，在函数内部不会冲突

function qj(){
    var x = 1;
    x = x + 1;
}
function qj2(){
    var x = "a";
    x = x + 1;
}

内部函数可以访问外部函数成员，反之不行

function qj(){
    var x = 1;
    
    function qj2(){
        var y = x + 1;
    }
    var z = y + 1;//Uncaught ReferenceError: y is not defined
}

内部函数和外部函数变量重名

  "use strict"
        function f1(){

        var x=1;
        function f2(){
            var x="A";
            console.log("inner"+x);
        }
        console.log("outer"+x);
        f2();
        }
        f1();
==========================================================
>outer1
>innerA

规范变量命名

  • 变量全部在前面声明完
function f(){
    var x=1,
        y=2,
        z=3;
}

规范全局变量

由于我们的所有变量都会绑定到 window上,如果不同的 js 文件，使用了相同的全局变量，就会产生冲突—>如何减少这样的冲突？

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题~
jQuery中就是使用的该方法：jQuery.name，简便写法：$()

 		"use strict"
        //唯一全局变量
        var DuPeng={};
        
        //定义全局变量
        DuPeng.name='海摆';
        DuPeng.add=function (x,y){
          return x+y;
      }

局部作用域

  • console.log(i+1);出了作用域还可以使用
  function aaa(){
      for (var i = 0; i < 100; i++) {
          console.log(i);
      }
      console.log(i+1);
}
aaa();
  • ES6 的 let 关键字，解决了局部作用域冲突的问题
  "use strict"
  
  function aaa(){
      for (let i = 0; i < 100; i++) {
          console.log(i);
      }
      console.log(i+1);
}
aaa();

3.3方法

  • 定义方法

方法就是把函数放在对象的里面,对象只有两个东西：属性和方法

"use strict"
var kuangshen= {
    //属性
    name:"秦疆",
    birth:2000,

    //方法
    age:function (){
        var now=new Date().getFullYear();
        return now -this.birth;
    }
}
//属性
console.log(kuangshen.name);

//方法要带上（）
console.log(kuangshen.age());

在java中this无法指向的,是默认指向调用它的那个对象的;在js中可以使用apply控制this指向

  "use strict"
    function getAge() {
        var now =new Date().getFullYear();
        return now-this.birth;
    }

    var kuangshen ={
        name:"狂神",
        birth:2000,
        //方法
        age:getAge

    };
    var xioming = {
        name:"小明",
         birth:2000,
         age:getAge
    }
===================================    
> getAge.apply(kuangshen,[]);

4、Date

4.1基本使用

var now =new Date();
console.log(now);//打印此刻的中国标准时间
console.log(now.getFullYear());//年
console.log(now.getMonth());//月
console.log(now.getDate());//日
console.log(now.getDay());//星期几
console.log(now.getHours());//时
console.log(now.getMinutes());//分
console.log(now.getSeconds());//秒
console.log(now.getTime());//时间戳 全世界统一 1970.1.1 0:00:00 到现在的毫秒数

console.log(new Date(1659834921787));//将时间戳转为时间
console.log(now.toLocaleDateString());//转换为当地时间

输出结果：

image-20220807091806884

4.2JSON

"use strict"
var user={
    name:"张三",
    age:3,
    se:"男"
}
console.log(user)//Object { name: "张三", age: 3, se: "男" }


//对象转换为JSON字符串
var jsonuser =JSON.stringify(user);
console.log(jsonuser);//{"name":"张三","age":3,"se":"男"}

//json字符串转换为对象
var obj=JSON.parse('{"name":"张三","age":3,"se":"男"}');
console.log(obj);

4.3 AJAX

  • 原生的 js 写法 xhr 异步请求
  • jQuery 封装好的方法 $(“#name”).ajax(“”)
  • axios请求

5、面向对象

原型对象
javascript、java、c#------都是面向对象的语言；但是 javascript 有些区别！

举个例子，在Java中：类是模板，对象是具体实例，在 javascript 中，需要大家转换一下思维方式！

"use strict"
var student={
    name:"张三",
    age:3,
    sex:"男",
    run:function (){
        console.log(this.name+"run...")
    }
}
//小明也是学生
var xiaoming={
    name:"小明"
}
//小明原型指向student
xiaoming.__proto__ = student;

//列2
var Bird = {
    fly : function () {
        console.log(this.name + " fly...")
    }
}
xiaoming.__proto__ = Bird;
console.log(xiaoming.fly());

Class以及继承

class 关键字，是在 ES6 引入的

1、定义一个类、属性、方法

"use strict"
class student {
    constructor(name) {
    this.name= name;
    }
    hello(){
        alert('hello,'+this.name);
    }
}
var jerry=new student("jerry");
var jeck=new student("jeck");

console.log(jerry.hello());
console.log(jeck.hello());
  • 继承
  • 继承的本质还是原型，只是换了一种更加友好的写法而已
"use strict"
class student {
    constructor(name) {
    this.name= name;
    }

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

//定义一个小学生类继承student
class xiaostudent extends student{
    constructor(name,grade) {
        super(name);
        this.grade=grade;
    }
    myGrade(){
        alert(this.name+'一名小学生');
    }
}
var jerry=new student("jerry");
var jeck=new student("jeck");
var tom=new xiaostudent("tom");

console.log(jerry.hello());
console.log(jeck.hello());
console.log(tom.myGrade());

6、操作BOM对象（重点）

浏览器介绍

  • javascript 和浏览器关系？

    • JavaScript 诞生就是为了能够让他在浏览器中运行

  • BOM：浏览器对象模型

浏览器内核：

  • Edge
  • Chrome
  • Safari
  • FireFox
  • Opera

第三方浏览器：

  • QQ浏览器
  • 360浏览器

window对象(重要)

image-20220807130504095

Navigator（不建议使用）
Navigator封装了浏览器的信息

img

screen对象

  • 屏幕尺寸

image-20220807130623021

location（重要）

代表当前页面的URL信息

image-20220807130950415

img

document

document 代表当前的页面，HTML是怎么展示的？—> HTML DOM文档树

document.title
"百度一下，你就知道"
document.title='海摆海摆'
"海摆海摆"

image-20220807131224823

获取cookie

  • document.cookie

image-20220807132022317

劫持cookie原理
www.taobao.com

在这里插入图片描述

history(不建议使用)

  • history.back() //后退
  • history.forward() //前进

7、操作DOM对象（重点）

DOM：文档对象模型

浏览网页就是一个Dom树形结构

  • 更新：更新Dom节点
  • 遍历：得到DOM节点
  • 删除：删除一个DOM节点
  • 添加：添加一个新的节点

要操作一个Dom节点，就必须要先获得这个Dom节点、

<body>

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p  class="p2">p2</p>
</div>
    <script>
        "use strict"
        //对应css选择器
        var  father= document.getElementById('father');
        var  h1=  document.getElementsByTagName('h1');
        var  p1=   document.getElementById('p1');
        var  p2=  document.getElementsByClassName('p2');

        var childers=father.children;//获取父节点下所有的子节点
    </script>
</body>

更新节点

<div id="id1">
<!--  一个空标签  -->
</div>
<script>
    var id1=document.getElementById('id1')
    
</script>

>id1.innerText='12345'
>"12345"
>id1.innerHTML='<strong>123</strong>'
> "<strong>123</strong>" 

>id1.style.color='yellow'
>"yellow"
>id1.style.fontSize='50PX'
>"50PX"
>id1.style.padding='2em'
>"2em"

删除节点

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

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

father.removeChild(p1)

//删除是一个动态的过程
father.removeChild(father.childre[0])
father.removeChild(father.childre[1])
father.removeChild(father.childre[3])

插入节点

我们获得了某个 Dom 节点，假设这个 Dom 节点是空的，我们通过 innerHTML 就可以增加一个元素了，但是这个 Dom 节点已经存在元素了，我们就不能这么干了！会产生覆盖

<body>
    <p id="js">JavaScript</p><!--现在我们想把这个标签添加到 div中-->
    <div id="list">
        <p id="se">JavaSE</p>
        <p id="ee">JavaEE</p>
        <p id="me">JavaME</p>
    </div>

    <script>
        var js = document.getElementById('js');
        var list = document.getElementById('list');

        list.appendChild(js);//追加到后面
    </script>
</body>

效果如下：

在这里插入图片描述

上面是将一个已经存在的节点添加到别处，现在我们新创建节点:

<script>
    var js = document.getElementById('js');//已经存在的节点
    var list = document.getElementById('list');
    //通过JS创建一个新的节点
    var newP = document.createElement('p');//创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'Hello,Kuangshen';
    //创建一个标签节点
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');

    //可以创建一个style标签
    var myStyle = document.createElement('style');//创建了一个空style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color:chartreuse;}';//设置标签内容

    document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>

插在前面 insertBefore

<body>
    <!--现在我们想把这个JavaScript添加到div中JavaEE的前面-->
    <p id="js">JavaScript</p>
    <div id="list">
        <p id="se">JavaSE</p>
        <p id="ee">JavaEE</p>
        <p id="me">JavaME</p>
    </div>

    <script>
        var ee = document.getElementById('ee');
        var js = document.getElementById('js');
        var list = document.getElementById('list');
        //要包含的节点.insertBefore(newNode,targetNode)
        list.insertBefore(js,ee);
    </script>
</body>

8、操作表单

表单是什么？form-----DOM树

  • 文本框----text
  • 下拉框----select
  • 单选框----radio
  • 多选框----checkbox
  • 隐藏域----hidden
  • 密码框----password
  • .......

表单的目的：提交信息

<body>
<form method="post">
    <p>
        <span>用户名：</span>
        <input type="text" id="username"/>
    </p>

    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy"/>男
        <input type="radio" name="sex" value="woman" id="girl"/>女
    </p>
</form>

<script>
    var input_text=document.getElementById("username");
    var boy_radio=document.getElementById("boy");
    var girl_radio=document.getElementById("girl");

   >console.log(input_text.value); // 打印输出框的值
   > input_text.value ="456";//  修改输出框的值

    >var boySelected = boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中。
    >girl_radio.checked = true;//赋值
</script>
</body>

md5加密

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>
    <!--MD5加密工具类-->
    <script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">

    </script>
</head>
<body>
<!--表达绑定提交事件
    οnsubmit= 绑定一个提交检测的函数，true，false
    将这个结果返回给表单，使用onsubmit接收

    action表示提交到哪里,#表示当前页
-->
    <form action = "#" method = "post" onsubmit = "return aaa()">
        <p>
            <span>用户名：</span>
            <input type="text" id = "username" name = "username"/>
        </p>
        <p>
            <span>密码：</span>
            <input type="password" id = "password" />
        </p>
        <input type = "hidden" id = "md5-password" name = "password">

        <!--绑定事件 onclick 被点击-->
        <button type = "submit">提交</button>

    </form>

    <script>
        function aaa(){
            alert(1);
            var username = document.getElementById("username");
            var pwd = document.getElementById("password");
            var md5pwd = document.getElementById("md5-password");
            //MD5算法
            //pwd.value = md5(pwd.value);
            md5pwd.value = md5(pwd.value);
            //可以校验判断表单内容，true就是通过提交，false就是阻止提交
            return true;
        }
    </script>

</body>
</html>

9、jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    导入jquery-->
    <script src="lib/jquery-3.5.1.js"></script>
</head>
<body>
<!--
 $代表jquery,()内是选择器
 公式：$(selector).action()
-->
<a href="" id="test-jquery"> 点我</a>
<script>
    $('#test-jquery').click(function(){
        alert('hello,jquery');
    })

</script>
</body>
</html>

选择器

<script>
    //原生js,选择器少，麻烦不好记
    //标签
    document.getElementsByTagName();
    //id
    document.getElementById();
    //class
    document.getElementsByClassName();
    
    //jQuery css中的选择器它全部都能用
    $('p').click();//标签选择器
    $('#id1').click();//id选择器
    $('.class1').click();//class选择器
</script>

事件

mousedown()(jQuery)----按下

mousemove()(jQuery)----移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.5.1.js"></script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
mouse:<span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>

<script>
    //当网页元素加载完毕之后，响应事件
    //document.ready（function(){}）

    $(function (){
        $('#divMove').mousemove(function (e){
            $('#mouseMove').text('x:'+e.pageX+"   y:"+e.pageY)
        })
    });

</script>
</body>
</html>

节点文本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.5.1.js"></script>
</head>
<body>
<ul>
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

<script>
    //document.getElementById('');原本得这样写，太麻烦
    //用JQuery
    $('#test-ul li[name=python]').text();//获得值
    $('#test-ul li[name=python]').text('设置值');//设置值
    $('#test-ul').html();//获得值
    $('#test-ul').html('<strong>123</strong>');//设置值


</script>

</body>
</html>

标签：function,console,入门,JavaScript,name,var,狂神,document,log
From： https://www.cnblogs.com/DuPengBG/p/16844001.html

相关文章

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99