javaScript

1，什么是JavaScript

1.1概述

javaScript是世界上最流行的脚本语言

Java javaScript

10天

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

1.2历史

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

但最新版本已经到es6版本~

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

开发环境---线上环境---版本不一致

2，快速入门

2.1引入javaScript

内部标签

<script>alert('hHllo,Word');</script>

2.外部引入

<script src="../JavaScript/js.js"></script>-

代码测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="../JavaScript/js.js"></script>-->
    <script>alert('hHllo,Word');</script>//网页弹窗
</head>
<body>

</body>
</html>

Elements：元素

Console：控制台

Source：源码

Network：网络

Application：用途

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 1.定义变量  变量类型   变量名称 = 变量值；
        let score=71;

        if (score == 60){
            alert("七个");
        }else {
            alert("客服节课");
        }
        // console.log(score);在浏览器打印变量


    </script>
</head>
<body>

</body>
</html>

2.2.数据类型

数据，文本，图形，音频，视频等，都算是数据类型

在JavaScript中不区分小数和整数统一用Number

123//整数123

123.1//浮点数123.1

1.123e3//科学计数法

-99负数

NaN // not a number

Infinity//无穷大

字符串

“abc” “abc”

布尔值

true，false

逻辑运算

&& 两个都为之真，结果为真

|| 一个为真，结果为真

！真就是假假就是真

比较运算符号！！！重要

== 等于（类型不一样，值一样，也会判断为ture）

=== 绝对等于（类型一样，值一样结果为TRUE）

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

须知：

NaN===NaN，这个与所有的数值都不相等，包括自己
只能通过isNan（NaN）来判断这个数是否是Nan

浮点数问题：

console.log（1/3）===（1-1/3）

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

Math .abs（1/2-（1-2/3））<0.000001

null和undefinde

null空
undefined 是未定义的

数组

Java的数组必须是相同类型的对象，JavaScript中不需要这样

let arr = [1,5,5,"万达华府",]

取数组下标越界会显示：undefined

对象

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

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

2.3严格检查格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        前提：idea需要支持es6语法
        'use strict'；严格检查模式，预防JavaScript的随意性导致产生的一些问题
        必须现在JavaScript的第一行
        局部变量建议都用let去定义
         */
        'use strict';
        //全局变量
         i=1;
    </script>
</head>
<body>

</body>
</html>

3.数据类型

3.1字符串

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

2.注意转义字符

多行字符串编写tab上面的那个可以实现

let person = `
你好
我是王刚
hello，word`

4.模板字符串

 let name = "王刚";
    let age = 3;
    let msg =  `你好啊， ${name}`
</script>

5.字符串长度

str.length

6.字符串的可变性，不可变

7.console.log(student.indexOf('t')); 获取指定下标值

8.console.log(student.substring(3,7)); 结头不结尾

3.2数组

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

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

1.长度

arr.length

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

2.indexOF，通过元素获得下标索引

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

3.slice（）截去array的一部分，返回一个新数组，类似于String中的substing

4.pubsh（） pop（）

push：压入尾部

pop：弹出尾部的一个元素

5.unshift（），shift（）头部

unshift：压入头部

shift：弹出头部的一个元素

6.排序sort（）；

7.元素反转 reverse（）

8.concat（）；

注意:concat()并没有修改数组，只是会返回一个新的数组

9.连接join

打印拼接数组，使用特定的字符串连接

10.多维数组

数组：存储数据（如何存，如何取，方法都可以自己实现）

3.3对象

若干个键值对

<script>
    let person = {
        name:"王刚",
        age:10,
        emil:"1557724280@qq.com",
        score:0
    }

javaScript中，{.....}表示一个对象，键值对描述属性xxxx，xxx多个属性之间使用逗号隔开，最后一个属性不加逗号！

JavaScript中的所有健都是字符串，值是任意对象

1.对象赋值

person
{name: '王刚', age: 10, emil: '1557724280@qq.com', score: 0}
person.name="子义"；
VM169:1 Uncaught SyntaxError: Invalid or unexpected token
person.name="子义"
'子义'

2.使用一个不存在的对象属性，不会报错，undefined

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

person
{name: '子义', age: 10, emil: '1557724280@qq.com', score: 0}
delete person.name
true

4.动态的添加，直接给新的属性添加值即可

person.haha="haha"
'haha'
person
{age: 10, emil: '1557724280@qq.com', score: 0, haha: 'haha'}
age: 10
emil: "1557724280@qq.com"
haha: "haha"
score: 0

5.判断属性值是否在这个对象中 xxx in xxx！

'age' in person
true

6.判断一个属性是否是这个对象自身拥有的 hasOwnProperty（）

person.hasOwnProperty('toString')//判断person这个属性是否有toString这个方法
false
person.hasOwnProperty('age')//判断person这个属性是否有toString这个方法
false
true

3.4流程控制

if判断

let age = 3;
if (age < 3){
    alert("小孩")
}else {
    alert("不是小孩")
}

while循环

      let age = 3;
while (age < 100){
    age++;
    console.log(age)
}

for 循环

let age = 3;
for (let i = 0; i < 100; i++) {
    console.log(i)
}

forEach 函数循环

let age = [12,54,54,548,1]
age.forEach(function (value) {
    //function函数循环
    console.log(value)
})

3.5，map和set

<script>
     /**
      * 打印学生的成绩和名字
      * 
      * @type {Map<string, number>}
      */
let map = new Map([['top',100],['jack',80],['hah',60]])
     let name = map.get('top');
     console.log(name)
      map.set('asdf',100)//新增
      map.delete（“tom”）//删除

Set：无序不重复的集合

set.add（2）；//添加

set.delete（1）；//删除

console.log（set.has（3））；//是否包含某一个元素

3.6，iterator

let arr = [3,4,5]
for (let arrKey of arr) {//现在是遍历数组，如果吧for (let arrKey of arr)里面的of替换成in的话，那就是查数组索引
    console.log(arrKey);
}

遍历map（注意第一行的中括号，和键值对）

let map = new Map([['nihao',66],['dsf',54],['wosf',1233]])
  for (let x of map){
      console.log(map)
  }

遍历set 注意Set的s大写

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

4.函数

4.1定义函数

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

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

如果没有执行return，函数执行也会返回结果

定义方式二

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

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

调用函数

abs（10）//10
abs（-10）//10

参数问题：JavaScript可以传递任意个参数，也可以不传递参数~

参数进来是否存在问题？

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


### 5.2 JSON

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

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

- 对象都用{}
- 数组都用[]
- 所有的键值对都是用key：value

JSON字符串和JS对象的转化

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


很多人搞不清楚，json和js对象的区别

## 6.面向对象编程

### 原型对象

javaScript，Java，C#.....面向对象；

- 类：模板 ， 原型对象
- 对象：具体的实例

在JavaScriot这个需要大家换一下思维方式！

原型：

var Student = {
name:"asf",
age:3,
run:function () {
console.log("飞")
}
}
var xiaoming ={
name:"小明"
}
//原型对象
xiaoming.proto = Student;


> class继承

class关键字，是在es6引入

1.定义一个类，属性，方法

class Student{
constructor(name) {
this.name=name;
}
hello(){
alert('hello')
}
}
let xiaoming = new Student("xiaoming")

class xiaoStundent extends Student{
constructor(name, grade){
super(name)
}
Mygrads(){
alert("王刚");
}
}
let xiaoming = new xiaoStundent("xiaoming")


本质，查看对象原型

> 原型链

proto

## 7 ， 操作BOM对象（重点）

> 浏览器介绍

JavaScript和浏览器关系？

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

 BOM：浏览器对象模型

- IE6~11
- Chrome
- Safar
- Firefox
- Opera

> Navigator

Navigator,封装了浏览器的信息

navigator.appName
'Netscape' 

navigator.appVersione
undefined
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36'

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



> screen

代表屏幕尺寸

screen.width
1536
screen.height
864


> location(重要)

location代表当前页面URL信息

host: "www.bilibili.com"
hostname: "www.bilibili.com"
href: "https://www.bilibili.com/video/BV1JJ41177di?p=19"
protocol: "https:"
reload: ƒ reload()//刷新网页
//设置新的地址
location.assign()


> document

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

document.titlt='子义'


获取具体的文档树节点

java
java1
java2

```

获取cookie

document.cookie

获取网页信息

history

history代表浏览器的历史记录

history.back//后退
ƒ back() { [native code] }
history.forword//前进
undefinedxxxxxxxxxx <dt>java</dt><dt>java1</dt><dt>java2</dt>history.backƒ back() { [native code] }history.forwordundefined

8.操作DOM对象

核心

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

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

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

<dl class="app">
    <dt id="as">java</dt>
    <dt>java1</dt>
    <dt>java2</dt>
</dl>
<script>
    let cai = document.getElementById('app')
    let dt = document.getElementsByClassName()
    let chi = father.children//获取父节点，下面的所有子节点

这是原始节点，之后我们都用JQ

更新节点

id1.innerText='123' // 修改文本的值
'123'
id1.innerHTML='<strong> 1<strong>'//可以解析HTML标签
'<strong> 1<strong>'

操作JS

id1.innerText='123'
'123'
id1.style.color='red'
'red'
id1.style.fontSize='2em'
'2em'
id1.style.padding='3em'
'3emxxxxxxxxxx id1.innerText='123''123'id1.style.color='red''red'id1.style.fontSize='2em''2em'id1.style.padding='3em''3emscript>    let id1 = document.getElementById('id1')</script>

注意点

属性使用字符串包裹
-转驼峰命名

删除节点

删除节点的步骤：现货区父节点，在通过父节点删除自己

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

插入节点

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

追加

<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 js = document.getElementById('js'),
        list = document.getElementById('list')
</script>

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

var js = document.getElementById('js'),
    list = document.getElementById('list')
let newP = document.createElement('p');//创建一个p标签
newP.id = 'newP'//创建一个id
newP.innerText = 'hello.kuangs';
list.appendChild(newP)
//创建一个标签节点（通过这个属性，可以改任意的值）
let MyScript =  document.createElement('script')
    MyScript.setAttribute('type','text/javascript')
    list.appendChild(MyScript)
    
      var Mysyle = document.createElement('style')//生成style对象
    Mysyle.setAttribute('type','text/css')//设置属性,转换成css
    Mysyle.innerHTML = 'body{    background: rebeccapurple;}'
    document.getElementsByTagName('head')[0].appendChild(Mysyle);//将创建好的内容丢进head

9.操作表单

表单是什么 form Dom 树

文本框 text
下拉框 < select >
单选框 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="women" id="girl">女
    </p>
    <script>
       let input_text = document.getElementById('username')
       let boy_radio = document.getElementById('boy')
       let girl_radio = document.getElementById('girl')
        //得到输入框的值
        input_text.value
        //修改输入框的值
        input_text.value = '123'
        //对于单选框，多选框等等固定的值boy_radio只能获取到当前的值
        boy_radio.checked;//查看返回结果，是否为TRUE，如果为true则被选中
        girl_radio.checked = true;//赋值

md5加密链接

<script> src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"</script>

初识JQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="llb/jquery-3.5.1.js"></script>
</head>
<body>
<a href="" id="子义">点我</a>
<script>
    //选择器就是css选择器
    $('#子义').click(function () {

           while (true){
               alert('我是赵付豪')
           }
    })
</script>
</body>
</html>

JQuery选择器

//原生js选择器少不好记
//标签
<script>
    document.getElementsByTagName()//标签
    document.getElementById()//id
    document.getElementsByClassName()//class
    //JQuery选择器 css中的选择器他都能用
    $('p').click()//标签选择器
    $('.class').click()//类选择器
    $('#id').click()//id选择器

事件

鼠标事件，键盘事件，其他

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/Download%20jQuery%20_%20jQuery.html">

    </script>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
mouse: <span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>

<script>
    $(function () {
        $('#divMove').onmousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
        })
    })
</script>
</body>
</html>

操作Dom节点

$('.adc li[id = cde]').text();//获得值
$('.adc li[id = cde]').text('设置值');

css

$('#cde').css({"color":"red"})

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

$('#cde').css({"display":"none"})//隐藏
   $('#cde').css({"display":"show"})//显示

未来 ajaxb'n

小技巧

如何巩固js（看JQuer源码，看游戏源码）
巩固HTML.css（扒网站，全部down下来，然后对应修改看效果）

posted @ 2021-12-02 10:27 πππ· 阅读(91) 评论(0) 收藏举报

刷新页面返回顶部

πππ·