【前端三要素】JavaScript入门_javascript三要素-优快云博客

本文链接：https://blog.youkuaiyun.com/Daears/article/details/126696966

1. 什么是JavaScript

1.1、概述

JavaScript是一门世界上最流行的脚本语言

一个合格的后端人员，必须要精通JavaScript

1.2、历史

链接: JavaScript历史

ECMAScript它可以理解为是JavaScript的一个标准

最新版本已经到es6版本了

但是大部分浏览器还只停留在支持es5代码

这导致开发环境和线上环境版本不一致

2. 快速入门

2.1、引入JavaScript

1.内部标签

  <script>
    alert('hello world')
  </script>

2.外部引入

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

3.测试代码

<!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>

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

</body>
</html>

2.2、基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    <!-- js严格区分大小写 -->
    // 1.定义变量 变量类型 变量名 = 变量值；
    var num = 1;
    alert(num)
    // 2.条件控制
    if (2>1)
    {
        alert(true);
    }


    //console.log(num); 在浏览器的控制台打印变量
  </script>
</head>
<body>

</body>
</html>

2.3、数据类型

数值、文本、图形、音频、视频…

变量

var

number

js不区分小数和整数，Number

123//整数123
123.1//浮点数123.1
1.23e3//科学计数法
-99//负数
NaN//not a number 不是一个数字
Infinity //表示无限大

字符串

’abc‘ “abc”
布尔值

true，false

逻辑运算

&& 一假则假
|| 一真则真
!  真就是假，假就是真

比较运算符

=
==  等于（类型不一样，值一样也会判断为true）
=== 绝对等于（类型一样值一样，结果为true）

须知：

NaN与所有数都不相等，包括自己
只能通过isNaN（NaN）来判断这个数是都为NaN

浮点数问题：

console.log((1/3)===(1-2/3));

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

null和undefine
- null空
- undefine未定义
数组

Java的数组必须是同类型的变量，js中不用
```
var arr=[1,2,3,4,'asdsad',null.true];
```
数组下标越界：undefined
对象

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

每个属性之间都使用逗号隔开，最后一个不需要添加

var person{
    name:'Genius Sue',
    age:3,
    tags:['js','java']
}

取对象的值

person.name

2.4、严格检查模式

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

  <!--    'use strict'
    必须写在js的第一行
    严格检查模式，预防js的随意性导致的一些问题
    局部变量都建议使用let去定义
    -->
  <script>
    'use strict'
    let i=1;
  </script>
</head>
<body>

</body>
</html>

3.数据类型

3.1、字符串

正常字符串使用单引号或者双引号包裹
注意转义字符\

\'
\n
\t
\u4e2d	\u#### Unicode字符
\x41 AscLL字符

多行字符串编写

``
var msg=
    `
    你好
    我好
    大家好
    `

模板字符串

let name="Genius Sue";
let age=3;

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

字符串长度

str.length

字符串的可变性，不可变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dGHE8w5p-1662308406673)(C:\Users\PC\AppData\Roaming\Typora\typora-user-images\image-20220904002249019.png)]

大小写转换

//注意这里是方法，不是属性
student.toUpperCase()

student.indexOf(‘s’);
substring

substring(1,3) 打印从第一到第三个

3.2、数组

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

var arr=[1,4,1,456]

长度

arr.length

注意：给他赋值数组的大小就会改变，如果变小，那么数组里的元素就会丢失

indexOf，通过元素获得下标索引

字符串的 “1” 和数字 1 是不同的
slice（）可以截取Array的一部分，返回一个新数组，类似于substring
push，pop
1. push（）；压入尾部
2. pop（）；弹出尾部的一个元素
unshift（），shift头部
1. shift（）：弹出头部的一个元素
2. unshift（）：压入到头部
排序sort()
元素反转reverse（）
concat()

并没有修改数组，只是会返回一个新的数组

数组：存储数据（如何存，如何取）

3.3、对象

诺干个键值对

var 对象名 = {
    属性名：属性值,
    属性名：属性值,
    属性名：属性值,
    属性名：属性值
}

var person= {
    name:"Genius Sue",
    age:3,
    email:"1420779618@qq.com",
    score:66
}

js中所有键都是字符串，值是任意对象

使用一个不存在的对象属性，不会报错，undefined
动态删减属性，通过delet删除对象属性
```
delete person.name
true
```

$(img-ZpiGPOyD-1662308406675)(C:\Users\PC\AppData\Roaming\Typora\typora-user-images\image-20220904005132928.png)]$

动态的添加，直接给新属性添加值即可
```
person.ad=456;
456
```

$(img-XqhshOUE-1662308406677)(C:\Users\PC\AppData\Roaming\Typora\typora-user-images\image-20220904005212856.png)]$

判断属性值是都在这个对象中xxx in xxx!

'age' in person
true
'toString' in person
true

判断一个属性是否是这个字符串本身所拥有的

person.hasOwnProperty('age');
true
person.hasOwnProperty('toString');
false

在这里插入图片描述

3.4、Map 和 Set

ES6的新特性

Map

//ES6 Map
//学生的成绩，名字
var map = new Map([['tom',100],['jack',90],['lucy',80]]);
var name = map.get('tom');//通过key获得value
map.set('admin',123456);
map.delete('tom');

Set：无序不重复的集合

set.add(2);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含某个元素

3.5、 iterator

遍历数组

//for in下标，for of 内容
var arr = [3,4,5];
for(var x of arr)
{
	console.log(x);
}

遍历map

var map = new Map([['tom',100],['jack',90],['lucy',80]]);
for(var x of map)
{
	console.log(x);
}

遍历set

var set = new Set([7,8,9]);
for(var x of set)
{
	console.log(x);
}

4.函数及面向对象

4.1、函数定义及变量作用域

1. 函数定义

定义方式一

绝对值函数

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

定义方式二

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

function（x）{ }这是一个匿名函数，但是可以把结果赋值给abs，通过abs可以调用函数

方法1和2是等价的

假设不存在参数，如何规避

  <script !src="">
    "use strict";
    function abs(x){
      if(typeof x!=='number')
      {
        throw "Not a Number!"
      }
      if(x>=0){
        return x;
      }else{
        return -x;
      }
    }
  </script>

2.作用域

在js中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 = 1;
    x = x + 1;
}

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

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

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

function qj(){
    var x = 1;
    function qj2() {
        var x = 'A';
        console.log('inner'+x);
    }
    console.log('outer'+x);
    qj2();
}
qj();

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

提升变量作用域

function qj(){
    var x = 'x' + y;
    console.log(x);
    var y = 'y';
}

结果：xundefined

说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值

所以所有的函数变量都放在函数的头部，便于维护

全局变量

var x = 'xxx';

window.alert(x);

var new_alert = window.alert();

new_alert(x);

window.alert=function () {

};

//发现alert（）失效了
 window.alert(123);

 //恢复
 window.alert=new_alert;
 window.alert(456);

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

规范

由于所有的全局变量都会绑定到window上，如果不同的js文件使用了相同的全局变量，如何能够减少冲突

//唯一全局变量
var KuangApp = {};
//定义全局变量
KuangApp.name = 'Kuangshen';
KuangApp.add = function(a,b){
    return a+b;
}

把自己的代码全部放入到自己定义的唯一空间名字中，降低全局命名冲突的问题

4.2、方法

定义方法

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

var Genius = {
    name:'Sue',
    birth:1999,
    age:function (){
        return new Date().getFullYear()-this.birth;
    }
}

this代表什么？拆开上面代码看看

function getAge() {
    return new Date().getFullYear() - this.birth;
}
var Genius = {
    name: 'Sue',
    birth: 1999,
    age:getAge()
}
//Genius.age()  ok
//getAge()      NaN

this始终指向调用他的人

apply

在js中可以控制this的指向

function getAge() {
    return new Date().getFullYear() - this.birth;
}
var Genius = {
    name: 'Sue',
    birth: 1999,
    age:getAge()
};
getAge.apply(Genius,[]);//this指向了Genius,参数为空

5.常用对象

标准对象

在这里插入图片描述

5.1.Date

基本使用

var now=new Date();//Sun Sep 04 2022 14:32:37 GMT+0800 (中国标准时间)
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒

now.getTime();//时间戳 1662273187035

转换

now.toLocaleString()
'2022/9/4 14:34:13'

5.2、JSON

JSON是什么

JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JS中一切皆对象，任何js支持的类型都可以用JSON来表示

格式

对象用{}
数组用[]
所有的键值对都使用key:value

JSON字符串和JS对象的转化

var user = {
    name:"Genius",
    age:3,
    sex:'男'
}
//对象转化为JSON字符串  '{"name":"Genius","age":3,"sex":"男"}'
var jsonuser = JSON.stringify(user);

//json字符串转化为对象 参数为json字符串
var obj = JSON.parse('{"name":"Genius","age":3,"sex":"男"}');

6.操作Bom对象（重点）

浏览器介绍

js和浏览器

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

BOM：浏览器对象模型

IE
Chrome
Safari
FireFox Linux

三方

QQ浏览器
360浏览器

window

window 代表浏览器窗口

Navigator（不建议使用）

Navigator封装了浏览器的信息

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

所以不建议使用他来编写代码

screen

代表屏幕尺寸

screen.width
1920 px
screen.height
1080 px

location

location代表当前页面对象的URL信息

host: "localhost:63342"
href:"http://localhost:63342/JavaScript/lesson03/3.%E5%8F%98%E9%87%8F%E7%9A%84%E4%BD%9C%E7%94%A8%E5%9F%9F.html?_ijt=5d6sgjamoma17g3vov5p2nchfi&_ij_reload=RELOAD_ON_SAVE"
protocol: "http:"
reload: ƒ reload //刷新网页

//设置新的地址
location.assign('https://blog.youkuaiyun.com/Daears?spm=1000.2115.3001.5343')

document 内容（DOM）

document代表当前的页面，HTML、DOM树

可以获得具体的文档树节点

<dl id="app">
  <dt>Java</dt>
  <dt>JavaSE</dt>
  <dt>JavaEE</dt>
</dl>
<script !src="">
    var dl=document.getElementById('app');
</script>

在这里插入图片描述

获取cookie

document.cookie
//恶意人员可以获取你的cookie上传到他的服务器

服务器端可以设置cookie：httpOnly

history （不建议使用）

代表浏览器的历史记录

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

7.操作Dom对象

核心

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

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

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

获得DOM节点

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


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

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

更新节点

<div id="id1">

</div>

<script !src="">
  var id1=document.getElementById('id1');
</script>

id1.innerText='456’修改文本值

id1.innerHTML=< strong > 456 < strong >

操作JS

id1.style.color='red' //属性使用字符串包裹
'red'
id1.style.fontSize='55px';
'55px'

删除节点

删除节点步骤：先获取父节点，然后再删除自己

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


<script !src="">
    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>

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

插入节点

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

追加

<p  id="js"></p>
<div id="list">
  <p id="java">JAVA</p>
  <p id="se">JAVASE</p>
  <p id="ee">JAVAEE</p>
</div>

<script !src="">
  var  js = document.getElementById('js');
  var  list = document.getElementById('list');
</script>

在这里插入图片描述

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

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

 //通过js创建一个新的节点
  var newp=document.createElement('p');
  newp.id='newp';
  newp.innerText="Genius Sue";

  list.appendChild(newp);
    
 //创建一个标签节点（通过这个属性，可以设置任意的值）
  var myScript = document.createElement('script');
  myScript.setAttribute('type','text/javascript');
</script>

9.操作表单（验证）

表单是什么 form DOM树

文本框 text
下拉框 < select >
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
…

表单的目的：提交信息

获得要提交的信息

  <div>
    <form action="get">
        <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="women" id="girl">女
        </p>
    </form>
  </div>

  <script !src="">
      var inputtext = document.getElementById('username');
      var boy_radio = document.getElementById('boy');
      var girl_radio = document.getElementById('girl');

      //得到输入框的值
      //inputtext.value
      //修改输入框的值
      //inputtext.value = '456'

      //对于单选框、多选框等固定的值，boy_radio.value只能获取当前的值
      boy.checked;//查看返回的结果是否为true，为true则被选中
      girl.checked=true;//赋值
  </script>

提交表单 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>
<div>
  <!--//表单绑定提交事件-->
  <!--onsubmit绑定一个提交检测的函数，true，false
  将这个结果返回给表单，使用onsubmit回收-->
  <form action="https://www.baidu.com" method="post" onsubmit="return send()">
    <p>
      <span>用户名</span>
      <input type="text" id="username" name="username">
    </p>
    <p>
      <span>密码：</span>
      <input type="password" id="pwd">
    </p>
    <input type="hidden" id="md5-pwd" name="md5pwd">
    <p>
      <span>性别：</span>
      <input type="radio" name="sex" value="man" id="boy">男
      <input type="radio" name="sex" value="women" id="girl">女
    </p>
    <!--//绑定事件-->
    <button type="submit">提交</button>
  </form>

  <script !src="">
    function send(){
      var uname = document.getElementById('username');
      var pwd = document.getElementById('pwd');
      var md5pwd = document.getElementById('md5-pwd');

      md5pwd.value=md5(pwd.value);

      //可以校验判断表单内容，true通过提交，false不通过
      return true;
    }
  </script>
</div>
</body>
</html>

10. jQuery

JavaScript

jQuery 库，里面存在大量的js函数

获取jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="lib/jquery-3.6.1.js"></script>
</head>
<body>

<!--
  公式：$(selector).action
-->

<a href="" id="test-jquery">点我</a>

<script !src="">
  //选择器就是css选择器
  $('#test-jquery').click(function (){
    alert('hello')
  })
</script>

</body>
</html>

选择器

//元素js，选择器少，麻烦不好记
//标签
document.getElementsByTagName();

//id
document.getElementById();
//类
document.getElementsByClassName();

//jQuery  css的选择器他都能用
$('p').click();//标签选择器
$('#id').click();//id选择器
$('.class').click();//类选择器

文档工具站：https://jquery.cuishifeng.cn/

事件 action

鼠标事件、键盘事件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.1.js"></script>
    <style>
        #divMouse{
            height: 500px;
            width: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--要求：获取鼠标当前的坐标-->
mouse：<span id="mouseMove"></span>
<div id="divMouse">
    在这里移动鼠标试试
</div>
<script !src="">
<!--  当网页元素加载完毕之后响应事件  -->
    $(document).ready(function (){
        $('#divMouse').mousemove(function (e){
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
        })
    });
</script>
</body>
</html>

操作DOM

节点文本操作

$('#test-ul li[name=python]').text();//获得值
$('#test-ul li[name=python]').text('123');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值

CSS操作

$('#test-ul li[name=python]').css({"color","red"});

元素的显示和隐藏:本质display：none；

$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();

总结：
前端三要素的简单入门就在这里了，当然这里并不全面，我也是跟着B站UP主学习的遇见狂神说
有兴趣的小伙伴可以自行去B站观看，欢迎大家一起讨论学习~

【前端三要素】JavaScript入门

1. 什么是JavaScript

1.1、概述

1.2、历史

2. 快速入门

2.1、 引入JavaScript

2.2、基本语法入门

2.3、数据类型

2.4、严格检查模式

3.数据类型

3.1、字符串

3.2、数组

3.3、对象

3.4、Map 和 Set

3.5、 iterator

4.函数及面向对象

4.1、函数定义及变量作用域

1. 函数定义

2.作用域

4.2、方法

5.常用对象

5.1.Date

5.2、JSON

6.操作Bom对象（重点）

7.操作Dom对象

9.操作表单（验证）

10. jQuery

2.1、引入JavaScript