首页 > 编程语言 >javaScript介绍

javaScript介绍

时间：2025-01-12 21:58:41浏览次数：3  
标签：function console log javaScript 介绍 var document name

JavaScript

概述

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

Java 和JavaScript没有真正上的联系

历史

https://blog.51cto.com/u_39037/10505185

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

快速入门

引入JavaScript

1.内部标签

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

2.外部引用

abs.js

//...

test.html

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

基本语法入门

1.定义变量 变量类型 变量名=变量值；

2.条件控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var score=100;
        if (score>=60 && score<=70){
            alert("良好")
        }else if (score>=70 && score<=100){
            alert("优秀")
        }else{
            alert("很差")
        }
    </script>
<!--    <script src="../js/text.js"></script>-->
</head>
<body>
<script src="../js/text.js"></script>
</body>
</html>

浏览器必备调试须知

在这里插入图片描述

数据类型

数值，文本，图形，音频，视频

变量

var 命名(不要以数字开头)

number

js不区分小数和整数，Number

111 //整数123
123.2 //浮点数123.1
1.123e3 //科学计数法
-99 //复数
NaN //not a number
Infinity //表示无限大

字符串

‘a’ “a”

布尔值

true,false

逻辑运算

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

|| 一个都为真，结果为 真

！ 真即假，假即真

比较运算符

=

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

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

这是一个js的缺陷，尽量不要使用==

须知：

  • NaN=NaN，结果的数值都不相等
  • 只有通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题

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

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

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

null 和undefined

  • null 空
  • undefined 未定义

数组

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

var arr=[1,2,3,4,5,'hello',null,true];

new Array(1,12,3,4,4,5,'hello');

取数组下标：如果越界了，就会报undefined错误

对象

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

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

var person{

name:"李四",

age:3,

tags:['js','java','web','...']

}

取对象的值

person.name
>"李四"
person.age
>3

严格检查格式

<!--    前提：idea需要支持ES6语法
    'use strict';严格检查模式，预防javaScript的随意性导致产生的一些问题
    必须写在javaScript的第一行！
    局部变量建议都是使用let去定义-->
    <script>
        'use strict';
        //局部变量
        let i=1;
    </script>

数据类型

字符串：

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

2、注意转义字符\

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

3、多行字符串编写

<script>
    //tab上面esc下面
    var msg=
        `hell
    world
    你好呀
    你好`;
  </script>

4、模板字符串

//tab 上面esc键下面
let name ="lisi";
let age =3;
let msg=`你好，${name}`

5、字符串长度

str.length

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

在这里插入图片描述

7、大小写转换

//注意，这里是方法，不是属性了

students.toUpperCase

students.toLowerCase

8、student.indexOf(‘t’)获取下标

9、subString 截取

[)
 student.substring(1)//从第一个字符串截取到最后一个字符串
 student.substring(1,3)//[1,3)
数组

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

var arr =[1,2,3,4,'a']
arr[0]
arr[0]=1

1、长度

arr.length

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

2、indexOf，通过元素获取下标索引

arr.indexOf(2)

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

3、slice()截取Arrray的一部分，返回一个新数组，类似于String中的substing

4、push(),pop()

push:压入到尾部

pop:弹出尾部的一个元素

5、unshift(),shift()

unshift:压入到头部

shift:弹出头部的一个元素

6、排序sort();

(3)["B","C","A"]
arr.sort()
(3)["A","B","C"]

7、元素反转reverse()

(3) ['A', 'B', 'C']
arr.reverse
(3) ['A', 'B', 'C']

8、concat()

(3) ['C', 'B', 'A']
arr.concat(1,2,3)
(6) ['C', 'B', 'A', 1, 2, 3]

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

9、连接符join

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

(3)["C","B","A"]
arr.join('-')
"C-B-A"

10、多维数组

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

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

对象

若干个键值对

var 对象名={

属性名：属性值，

属性名：属性值，

属性名：属性值

}
//定义了一个person对象，他有四个属性
 'use strict'
        var person={
            name:"lisi",
            age:3,
            email:"7445591@qq.com",
            score:0

        }

js中对象，{…}表示一个对象，键值对描述属性xxx:xxx,多个属性之间使用逗号隔开，最后一个属性不加逗号

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

1、对象赋值

person.name="wangwu"
person.name
'wangwu'

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

person.haha
undefined

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

delete person.name
true

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

person.haha="haha"
'haha'
person
{age: 3, email: '7445591@qq.com', score: 0, haha: 'haha'}

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

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

6、判断一个属性是否是这个对象自身拥有的

person.hasOwnProperty('age')
true

person.hasOwnProperty('toString')
flase

流程控制

if判断

 var score=100;
        if (score>=60 && score<=70){
            alert("良好")
        }else if (score>=70 && score<=100){
            alert("优秀")
        }else{
            alert("很差")
        }

while循环，避免程序死循环

var age=3;
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)
}

Map 和Set

在这里插入图片描述

Set:无序不重复的集合

在这里插入图片描述

iterator

遍历数组

//通过for of得到值
//通过for in得到下标
var arr=[3,4,5];
for (var x of arr){
    console.log(x)
}
for (var x in arr){
    console.log(x)
}

遍历Map

var map=new Map([["tom",100],["lisi",91],["wangwu",70]]);
for (let x of map){
    console.log(x)
}

遍历Set

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

在这里插入图片描述

函数

定义函数

定义方式一

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

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

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

定义方式二

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

function(x){…}这是一个匿名函数。但是可以把结果赋值给abs，通过abs就可以调节函数

方式一和方式二等价

调用函数

abs(10)//10
abs(-10)//10

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

参数进来是否存在问题？假设不存在参数，如何规避？

var abs=function(x){
    if (typeof x!=='number'){
       //手动抛出异常来判断
        throw "Not a Number";
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

arguments

arguments是一个js免费赠送的关键字

代表，传递进来的所有的参数，是一个数组

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

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

引入rest

以前
在这里插入图片描述

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

function aaa(a,b,...rest){
    console.log(("a=>"+a));
    console.log(("b=>"+b));
    console.log((rest));
}

rest参数只能写在最后面，必须用…标识

变量的作用域

在javascript中，var定义变量实际是有作用域的

假设在函数体系中声明，则在函数体外不可使用（非要想实现的话，后面可以研究一下闭包）

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

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function aaa(){
    var x=1;
    x=x+1;
}
function bbb(){
    var x=1;
    x=x+1;
}

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

function aaa(){
    var x=1;
    //内部函数可以访问外部函数的成员，反之则不行
    function bbb(){
        var y=x+1;
    }
    var z=y+1;
}//Uncaught ReferenceError: y is not defined

假设，内部函数变量和外部函数的变量，重名！

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

提升变量的作用域

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

结果：xundefined

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

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

这个是在javascript创建之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放，以便于代码维护；

function aaa(){
    var x=1,
    y=x+1,
        z,i,a;//undefined
    //之后随意用
}

全局变量

//全局变量
x=1;
function aaa(){
    console.log(x)
}
aaa();
console.log(x);

前局变量window

var  x='xxx';
alert(x);
alert(window.x);//默认所有的全局，都会自动绑定在window对象下

alert()这个函数本身也是一个window

var  x='xxx';
 window.alert(x);
var old_alert=window.alert;
window.alert=function (){
    
};
//发现alert()失效了
 window.alert(123);
 //恢复
 window.alert=old_alert;
 window.alert(456);

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

规范

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

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

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

jQuery

局部作用域

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

ES6 let 关键字，解决局部作用域冲突问题

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

建议大家都用let去定义局部作用域的变量

常量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);

方法

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

var zhangsan={
    name:'张三',
    bitrh:2000,
    //方法
    age:function (){
        //今年-出生的年
        var now =new Date().getFullYear();
        return now-this.bitrh;
    }
}

apply

在js中可以控制this指向

function getAge(){
     //今年-出生的年
     var now =new Date().getFullYear();
     return now-this.bitrh;
 }
 var zhangsan={
     name:'张三',
     bitrh:2000,
     age:getAge()
     //方法
     
 };
getAge.apply(
    zhangsan,[]//this,指向了zhangsan，参数为空
)

内部对象

Date

标准对象

在这里插入图片描述

基本使用

在这里插入图片描述

转换

在这里插入图片描述

JSON

json是什么

早期，所有数据传输习惯使用XML文件

  • （JavaScript Object Notation）是一种轻量级的数据交换格式
  • JSON是数据表示的理想选择，尤其在网络传输和存储过程中。
  • JSON是一种轻量级的数据交换格式，易于人类阅读和编写，同时也便于机器解析和生成。

在JavaScript 一切皆为对象、任何js支持的类型都可以用JSON来表示；

格式：

  • 对象都用{}
  • 数组都用[]
  • 所有的键值对都是用key:valeu

JSON字符串和JS对象的转化

var user={
name:"zhangsan",
age:3,
sex:'男'
}
//对象转换化为json字符串{name: 'zhangsan', age: 3, sex: '男'}
var jsonUser=JSON.stringify(user)
//jsonn字符串转化为对象参数为json字符串
var obj=JSON.parse('{"name":"zhangsan","age":3,"sex":"男"}')

面向对象编程

什么是面向对象

JavaScript 、java、c#…面向对象；JavaScript 有些区别

  • 类 ：模板
  • 对象：具体的实例

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

原型

var Student={
name:"zhangsan",
age:3,
run:function (){
    console.log(this.name+"run...");
}
}
var xiaoming={
    name:"xiaoming"
}
//小明的原型是Student
xiaoming._proto_=Student;

class继承

class Student{
    constructor(name){
        this.name=name;
    }
    hello(){
        alert('hello')
    }
}
class samllStudent extends Student{
    constructor(name,grade) {
        super(name);
        this.grade=grade;
    }
    myGrade(){
        alert('我是一名小学生')
    }
}

在这里插入图片描述

原型链

_ proto_

在这里插入图片描述

操作BOM对象

浏览器介绍

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

BOM：浏览器对象模型

  • IE
  • Chrome
  • Safari
  • FireFox

三方

  • QQ浏览器
  • 360浏览器

window对象

window代表浏览器窗口

在这里插入图片描述

Nauigator

Nauigator,封装了浏览器的信息

在这里插入图片描述

大多数时候，我们不会使用Nauigator对象，因为会被人为修改不建议使用这些属性来判断和编写代码

scree

代表屏幕尺寸

screen.width
277
screen.height
314

location

location代表当前页面的url信息

在这里插入图片描述

document

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

document.title
'百度一下，你就知道'
document.title='helloword'
'helloword'

获取具体的文档树节点

<><dl>
    <dt>java</dt>
    <dd>javaSE</dd>
    <dd>javaEE</dd>
</dl>
<script>
    var dl=document.getElementById('app');
</script>

获取cookie

document.cookie
'BD_UPN=12314753; PSTM=1721378952;'

劫持cookie原理

<script src="aa.js"></script>
//恶意人员：截取你的cookie上传到他的服务器

服务器端可以设置cookie：httpOnly

history（不建议使用）

history代表浏览器的历史记录

history.back //后退
history.forword//后退

操作DOM对象

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

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

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

在这里插入图片描述

这是原生代码，之后用jQuery

更新节点

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

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

id1.innerHtml='<strong>123</strong>' 可以解析HTML文本标签

操作JS

在这里插入图片描述

删除节点

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

在这里插入图片描述

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

插入节点

我们获得了某个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');
    var list=document.getElementById('list');
    list.appendChild(js);
    
</script>

效果

在这里插入图片描述

创建一个新的标签，实现

 var js=document.getElementById('js');
    var list=document.getElementById('list');
    var newP=document.createElement('p');
    newP.id='newP';
    newP.innerText='hello,lisi';
    //创建一个标签节点
    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)

插到前面

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

操作表单（验证）

表单是什么from，DOM树

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

表单的目的：提交信息

<form action="post">
   <p>
       <span>用户名</span><input type="txet" id="username">
   </p>
    <p>
        <span>性别</span>
        <input type="radio" name="sex" value="man">男
        <input type="radio" name="sex" value="woman">女
    </p>
</form>
<script>
    var input_text=document.getElementById('username');
    var boy_radio=document.getElementById('boy');
    var girl_radio=document.getElementById('girl');
    //得到输入框的值
    input_text.value;
    //修改输入框的值
    input_text.value='123';
    //对于单选框，多选框等固定值，boy_radio.value只能取到当前的值
    boy_radio.checked;//查看返回值的结果，是否为true，如果为true，则被选中
    girl_radio.checked=true;//赋值
</script>

提交表单

提交表单。md5加密密码，表单优化

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

</head>
<body>
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
   <p>
       <span>用户名</span><input type="txet" id="username" name="username" >
   </p>
   <p>
       <span>密码</span><input type="password" id="password" name="input_password">
   </p>
    <input type="hidden" id="md5-password" name="password">
     <button type="submit" onclick="aaa">提交</button>
</form>
<script>
   function aaa(){
       var user = document.getElementById("username");
       var pwd = document.getElementById("password");
       var md5pwd = document.getElementById("md5_password");
       pwd.value=md5(pwd.value);
       md5pwd.value=md5(pwd.value);
       return true;
   }
</script>

jQuery

javascript

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

使用

在这里插入图片描述

事件

鼠标，键盘， 其他事件

在这里插入图片描述

事件

在这里插入图片描述

操作DOM

节点文本操作

在这里插入图片描述

css的操作

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

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

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

公式：$(selector).action()

标签：function,console,log,javaScript,介绍,var,document,name
From： https://blog.csdn.net/m0_63515162/article/details/145045384

相关文章

  • Azure DevOps Server 完整介绍
    1.什么是AzureDevOpsServer2.内网部署和云端服务3.技术架构3.1服务器架构3.2扩展和定制开发3.3客户端4.工作项管理5.版本管理5.1TeamFoundationVersionControl-TFVC5.2Git6.全文索引7.流水线8.测试管理9.制品库Artifacts10.版本路径1.什么是AzureDevOpsS......
  • mv 命令介绍和使用案例
    mv命令介绍和使用案例mv命令是Linux和Unix系统中用于移动文件和目录的基本命令。它的功能包括重命名文件和目录、将文件或目录从一个位置移动到另一个位置。由于mv命令不会创建文件的副本，因此它被视为“搬家”操作。语法mv[options]sourcedestmv[options]sour......
  • C++、Python、Java、JavaScript的fill函数使用
    C++在C++中，std::fill函数用于将指定的值赋给容器或数组中给定范围内的所有元素。它定义在<algorithm>头文件中，函数原型如下：template<classForwardIterator,classT>voidfill(ForwardIteratorfirst,ForwardIteratorlast,constT&value);ForwardIterator：前向迭代......
  • elasticsearch7介绍和基础语法
    elasticsearch7介绍和基础语法参考博客：https://blog.csdn.net/qq_47387991/article/details/129349790什么是elasticsearch？一个开源的分布式搜索引擎，可以用来实现搜索、日志统计、分析、系统监控等功能。开源分布式搜索引擎elasticsearch底层是基于lucene来实现的。L......
  • 惊叹数据结构之美，品味排序算法之妙：对四大排序的详细介绍
    大家好，这里是小编的博客频道小编的博客：就爱学编程很高兴在CSDN这个大家庭与大家相识，希望能在这里与大家共同进步，共同收获更好的自己！！！本文目录正文一、冒泡排序（BubbleSort）二、选择排序（SelectionSort）三、插入排序（InsertionSort）四、希尔排序（ShellSort）快乐的时光......
  • 惊叹数据结构之美，品味排序算法之妙：对快排的详细介绍
    大家好，这里是小编的博客频道小编的博客：就爱学编程很高兴在CSDN这个大家庭与大家相识，希望能在这里与大家共同进步，共同收获更好的自己！！！本文目录正文1.基本快速排序霍尔法（Hoare法）挖坑法快慢指针法2.随机化快速排序3.三向切分快速排序4.插入排序优化6.非递归优化......
  • 【大厂面试AI算法题中的知识点】方向涉及：ML/DL/CV/NLP/大数据...本篇介绍训练网络的时
    【大厂面试AI算法题中的知识点】方向涉及：ML/DL/CV/NLP/大数据…本篇介绍训练网络的时候如何判断过拟合和欠拟合？【大厂面试AI算法题中的知识点】方向涉及：ML/DL/CV/NLP/大数据…本篇介绍训练网络的时候如何判断过拟合和欠拟合？文章目录【大厂面试AI算法题中的知识点】方......
  • workerpool，JavaScript强大的线程池库！
    ......
  • 常见的浏览器内核都有哪些？并介绍下你对内核的理解
    常见的浏览器内核主要包括以下几种：Trident（IE内核）：由微软开发，也被称作IE内核。它是最早的浏览器内核之一，具有较好的兼容性，能够支持各种网站和网页标准。然而，其渲染速度相对较慢，页面渲染效果可能不如其他内核。尽管如此，由于其广泛的用户基础和成熟的接口设计，仍有许多浏览器选择使用......
  • 说说你对javascript的作用域的理解
    在前端开发中，JavaScript的作用域是一个非常重要的概念。作用域决定了变量和函数的可访问性，即它们可以在哪里被访问和使用。理解作用域对于编写高质量、可维护的JavaScript代码至关重要。以下是关于JavaScript作用域的一些关键点：全局作用域和局部作用域：全局作用域：在代码......

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99