前端三大件--JavaScript详解

Posted 乘凉者 栽树人

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端三大件--JavaScript详解相关的知识,希望对你有一定的参考价值。

javascript入门到实战

1、入门

1.1、引入JavaScript

  • 内部标签

    <script>
        //asasda
    </script>
    
  • 外部引入

    a.js

    //asda
    

    test.html

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

1.2、基本语法

<script>
    const score = 71;
    if (score>60&&score<=70)
        alert("及格");//alert 在网页中弹窗
        console.log("嘿嘿");//控制台输出
    else if (score>70&&score<=80)
        alert("优秀");
    else
        alert("其他");
    
</script>

跟java的语法及其类似,重点是f12操作调试器

2、数据类型

大体上还是跟Java差不多,就写几个不一样的

  • 跟Java差不多,需要注意的是不分整数和小数

  • 只有nullundefined

    • null 空
    • undefined 未定义
  • 数组

    • 特别注意,数组下标越界:undefined,而不会报下标越界错误
  • 对象

    • 对象使用大括号
    • 数组使用中括号[]

2.1、字符串

  • 转义字符

    \\'
    \\n
    \\t
    \\u4e2d
    \\x41
    
  • 多行字符串编写

    let msg='hello  asdad' +
                'asd' +
                'asd' +
                'ad'
    
  • 模板字符串

    let name="kongkong";
    let age=9;
    let msg='加油,$name'
    
  • 字符串长度

    str.length
    
  • 字符串不可变性

  • 大小写转换

    student.toUpperCase()//变成大写
    student.toLowerCase()//变成小写
    
  • 正则表达式

    [)
    student.substring(1);
    student.substring(1,2);//从第下标1截取到2
    

2.2、数组

  1. 定义一个数组

    let array=[1,2,3,4,5,6]
    
  2. 长度

    array.length
    
  3. 通过元素获取下标索引

    array.indexOf(2)
    
  4. slice()截取数组的一部分

    array.slice(xx,xx)
    
  5. push(),pop()尾部

    push:插入到尾部
    pop:弹出尾部元素
    
  6. unshift(),shift()头部

    unshift():插入到头部
    shift():弹出头部元素
    
  7. 排序sort()

    ["A","c","B"]
    array.sort()
    ["A","B","C"]
    
  8. 元素反转reverse

    ["A","C","B"]
    array.reverse()
    ["B","C","A"]
    
  9. concat返回一个新的数组

    ["A","c","B"]
    array.concat([1,2,3])
    ["A","C","B",1,2,3]
    
  10. join连接字符串

    ["C","B","A"]
    array.join('-')
    "C-B-A"
    
  11. 多维数组

    array=[[1,2],[3,4],[2,3]]
    array[1][0]
    2
    

2.3、对象

JavaScript中的所有键都是字符串,值是任意对象

  1. 对象赋值

    person.name="kongkong"
    
  2. 使用不存在的对象属性,不会报错

    person.name
    
  3. 删除属性

    delete person.name
    
  4. 动态添加

    person.oo="asdas"
    
  5. 判断属性是否在对象中

    'age' in person
    

2.4、流程控制

  • if判断

  • while和do while循环

  • for循环

  • forEach循环(遍历每一个元素)

    var age=[12,3,463,124,4,11,123]
    
    age.forEach(function(value)
        console.log(value)
    )
    

2.5、Map和Set

  • Map集

    //对于过多的列表,每次取值的解决
    //var names=["sa","asd","ads"]
    //var score=["12","41","123"]
    
    var map=new Map([['sa',12],['asd',41],['ads',123]]);
    var name=map.get('tom');//通过key获取value
    map.set('adin',123);//新增和修改
    map.delect("tom");//删除
    
  • set:无需不重复的集合

    set.add(2);//添加
    set.delect(1);//删除
    console.log(set.has(3));//是否包含
    

3、函数

  • 函数定义

    • function()函数
    function num()
    
    
    
    • 匿名函数
    var a =funtion num()
    
    //a()调用
    
  • 作用域

    • 局部
    function b()
       var x=1;
       ....
    
    
    • 全局
    var x=1;
    function c()
       .....
    
    
    • 全局对象
    var x='xxx';
    alert(x);
    alert(window.x);
    
    • let关键字
    function a()
         for(var i=0;i<100;i++)
               console.log(i);
         
        console.log(i+1);//可以发现i即使出了整个作用域也可以继续运行
    
    

    解决局部作用域冲突问题

    function a()
         for(let i=0;i<100;i++)
               console.log(i);
         
        console.log(i+1);//Uncaught ReferenceError:i is not defined
    
    
    • const常量

    用const定义的常量是不能被改变的,只可以读取

    const PI='3.14';
    console.log(PI);
    PI='123';//TypeError
    

3.1、方法

  • 定义方法

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

    var kong=
        name='kong',
        bithrday:2000,
        //方法
        age:function()
            var now=new Date().getFullYear();
            return now-this.bithrday;
        
    //属性
    kong.name
    //方法
    kong.age()
    
    

    通过apply方式调用,控制this的指向

    function getAge()
        var now=new Date().getFullYear();
        return now-this.birth;
    
    
    var kong=
        name='kong',
        birth:2000,
        age:getAge
    
    
    var bai=
        name='kong',
        birth:2000,
        age:getAge
    
    
    getAge.apply(kong,[]);//apply控制了this的指向,指向kong
    

3.2、日期

常用时间调用

    var now=new Date();
        now.getFullyear();//年
        now.getMonth();//月
        now.getDate();//日
        now.getDay();//星期几
        now.getHours();//时
        now.getMinutes();//分
        now.getSeconds();//秒
        
        now.getTime();//时间戳 全国统一的时间
        console.log(new Date(1578106175991))//当前时间
        
        now.toLocaleString()//当地时间字符串
        now.toLocaleString()//当前时间标准格式

3.3、JSON

  • 什么是json

    • 简洁和清晰的层次结构使得JSON称为理想对象
    • 易于人阅读和编写,同时也易于机器解析
  • 任何js支持的类型,格式:

    • 对象用
    • 数组用[]
    • 键值对key:value
  • JSON字符串和JS 对象的转化

    var user=
        name:"kong",
        age:3,
        sex:'男'
    
    //对象转化为json字符串
    var jsonUser=JSON.stringify(user);
    
    //json字符串转为对象
    var obj=JSON.parse('"name":"kong","age":"2"')
    

4、面向对象编程

  • 类:模板
  • 对象:具体的实例
var user=
    name:"kong",
    age:3,
    sex:'男'


var zhiye=
    name:"员工"
;

//原型对象
zhiye.__proto__=user;
  • class继承
//Es6的新特性
//定义一个学生类
class student
    constructor(name)
        this.name=name;
    
    hello()
        alert('hello')
    


class littleStudent extends student
    constructor(name,score)
        this.name=name;
        this.score=score;
    
    speak()
        alert('小学生')
    


var xiaoming=new student("xiaoming");
var xiaohong=new student("xiaohong");

5、操作BOM对象(重点)

BOM:浏览器对象模型

  • window 浏览器窗口
window.alert
ƒ alert()  [native code] 
window.alert(1)
undefined
window.innerHeight
787
window.innerWidth
167
  • Navigator 封装浏览器信息
Navigator.length
0
Navigator.name
"Navigator"
Navigator.caller
null
  • screen 屏幕尺寸
screen.width
1536
screen.height
864
  • location 当前页面的URL信息
hash: ""
host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/s?ie=UTF-8&wd=jkh&tn=88093251_22_hao_pg"
origin: "https://www.baidu.com"
pathname: "/s"
port: ""
protocol: "https:"
  • cookie
document.cookie
  • history 服务器的历史记录
history.back()//后退
history.forword()//前进
  • document 获取文本
document.title()

6、操作DOM对象

  • 核心

    • 更新:更新Dom节点
    • 遍历dom节点:得到Dom节点
    • 删除:删除一个Dom节点
    • 添加:添加一个新的节点
  • 获得dom节点

    var h1=document.getElementsByTagName('h1');
            var p2=document.getElementById('p1');
            var kk=document.getElementsByClassName('kk');
            var father = document.getElementById('father');
            
            var child=father.children;//获取所有father下的子节点
            father.firstChild
            father.lastChild
    
  • 更新dom节点

    <div id="id1">
    
    </div>
    
    <script>
        var id1=document.getElementById('id')
    </script>
    

    操作文本

    • id1.innerText=‘456’ 修改文本的值
    • id1.innerHTML=‘

      asa

      ’ 解析HTML

    操作JS

    id1.style.color='yellow';
    id1.style.fontSize='20px';
    id1.style.padding='2em'
    
  • 删除节点

    删除多个节点的时候,children一直在变化,也就是说删除了一个节点,下一个节点会依次顶替上一个节点

    <div id="father">
        <h1>2</h1>
        <p id="p1">3</p>
        <p class="p2">4</p>
    </div>
    <script>
        var self=document.getElementById('p1');
        var father=p1.parentElement;
        father.removeChild(self)
        
        //假设先删除了第一条语句执行第三条语句的时候它就会报错,因为在第一条语句执行完毕后,第三条语句的存放位置会相应发生改变
        father.removeChild(father.children[0])
        father.removeChild(father.children[1])
        father.removeChild(father.children[2])
    </script>
    
  • 创建节点

    <script>
        var newP=document.createElement('p');//创建一个P节点
        newP.id='newP';
        newP.innerText='hellword';
    //创建一个标签节点
        var myscript=document.createElement('script');
        myscript.setAttribute('type','text/javascript');
         var mystyle=document.createElement('style');
        myscript.setAttribute('type','text/css');
        mystyle.innerHTML='bodybackgroud-color:chartreuse;'//设置标签内容
        document。getElementByTagName('head')[0].appendChild(mystyle)
    </script>
    
  • 插入节点(insertBefore)

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

7、表单

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

表单目的:提交信息

<form action="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 text=document.getElementById('username');
    var boy=document.getElementById('boy');
    var girl=document.getElementById('girl');

    //得到输入框的值
    text.value
    //修改输入框的值
    text.value='123'
    
    boy.checked;
    girl.checked=true;
</script>
  • md5加密
<form action="https://www.baidu.com/" method="post" onsubmit="return a()">
    <p>
        <span>用户名:</span>
        <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码:</span>
        <input type="password" id="input-password">
    </p>
    <input type="hidden" id="md5-password" name="password">

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

<script>
    function a() 
        alert(1);
        var name=document.getElementById('username');
        var pwd=document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');

        md5pwd.value=md5(pwd.value);

        return true;
    

</script>

8、jQuery

  • 语法:$(selector).action()
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<a href="" id="test-jquery">点我</a>

<script>
    //选择器就是css
    $('#test-jquery').click(function () 
        alert('hello,world')
    )
</script>
  • 选择器
$('p').click();
$('#id').click();
$('.class').click();

9、总结

1、重点是要多参考jquery中文文档学习

2、学好了可以去参考一下做一些小游戏

以上是关于前端三大件--JavaScript详解的主要内容,如果未能解决你的问题,请参考以下文章

前端三大件--JavaScript详解

8分钟为你详解ReactAngularVue三大前端技术

前端三大件之HTML篇

大前端驱动下MapGIS敏捷开发赋能行业

详解前端异步编程的六种方案

非计算机专业出身,能从事程序员的工作吗?