广告
返回顶部
首页 > 资讯 > 后端开发 > Python >JavaScript
  • 539
分享到

JavaScript

JavaScript 2023-01-30 22:01:35 539人浏览 安东尼

Python 官方文档:入门教程 => 点击学习

摘要

目录 javascript JavaScript介绍 JavaScript是什么? JavaScript历史背景介绍

目录

  • javascript
    • JavaScript介绍
      • JavaScript是什么?
      • JavaScript历史背景介绍
      • JavaScript的用途
      • JavaScript和ECMAScript的关系
      • JavaScript入门易学性
      • JavaScript的组成
    • 第一个JavaScript实例
      • 引入JavaScript的3种方式
      • Hello,JavaScript!
      • alert语句
      • JavaScript的语法规则
    • JavaScript在网页中输出信息的写法
      • prompt()方法
    • JavaScript中的变量
      • 变量的含义
      • 变量的声明和定义
      • 变量名的命名规范
    • JavaScript基本数据类型
      • 基本数据类型
      • 引用数据类型
    • JavaScript的运算符
      • 特殊情况
    • JavaScript中的流程控制语句
      • if语句
      • switch
      • while
      • do...while
      • for循环
    • 数组的创建和使用
      • 数组的基本操作
      • 数组的常用方法
    • 函数的使用
    • Object_构造函数
    • String_Number
    • Date对象的使用
    • Math对象的使用
    • JavaScript案例
      • 模态框案例
      • 点一点有惊喜
      • 简易留言框
      • 选项卡
      • 仿淘宝搜索框
      • 匀速移动案例
      • 5秒自动关闭广告
      • 小米轮播图
      • 轮播图
    • JavaScript的BOM知识点
      • BOM输出
      • open_close方法
      • BOM的其他元素
      • client系列
      • 屏幕的可视区域
      • offset系列

JavaScript介绍

JavaScript是什么?

JavaScript是一种web前端的描述语言,也是一种基于对象(Object)和事件驱动(Event Driven)的、安全性好的脚本语言。它运行在客户端从而减轻服务器的负担。

JavaScript的特点:

  • JavaScript主要用来向html页面中添加交互行为
  • JavaScript是一种脚本语言,语法和C语言系列语法类似,属于弱语言类型
  • JavaScript一般用来编写客户端脚本,如node.js例外
  • JavaScript是一种解释性语言,边执行边解释无需另外编译

在此之间我们就已经学过了HTML+CSS,那么我们就需要重新了解下WEB前端

  • HTML:从语义的角度,描述页面结构
  • CSS:从审美的角度,描述样式(美化页面)
  • JavaScript:从交互的角度,描述行为(提升用户体验)

JavaScript历史背景介绍

布兰登 • 艾奇(Brendan Eich,1961年~),1995年在网景公司,发明的JavaScript。

一开始JavaScript叫做LiveScript,但是由于当时Java语言特别火,所以为了傍上打牌,就改名为JavaScript。Java和JavaScript的关系,就如同北大和北大青鸟的关系。

在同时期还有其他的网页语言,比如VBScript、jscript等等,后来都被JavaScript打败了,所以现在的浏览器中,只运行一种脚本语言就是JavaScript。

JavaScript的用途

JavaScript的用途是解决页面交互和数据交互,最终目的是峰峰客户端效果以及数据的有效传递。

  • 实现页面交互,提升用户体验实现页面特效。即js操作html的dom结构或操作样式
  • 客户端表单验证,即在数据送达服务端之前进行用户提交信息及时有效地验证,减轻服务器压力。即数据交互

JavaScript和ECMAScript的关系

ECMAScript是一种由Ecma国际(前身为 欧洲计算机制造商协会)制定的一种标准。

JavaScript是由公司开发而成的,问题是不便于其他的公司拓展和使用。所以ECMA组织牵头执行了JavaScript的标准,取名为ECMAScript。

简单的说,ECMAScript不是一门语言,而是一个标准。符合这个标准的比较常见的有:JavaScript、Action Script(Flash)。就是说当你的JavaScript学完了,那么Flash程序也就轻而易举了。

ECMAScript在2015年6月,发布了ECMAScript6版厄本那,语言能力更强(也包含了很多新特性)。但是,浏览器的厂商不能那么快追上这个标准。

更多信息请点击:

JavaScript入门易学性

  • JavaScript对初学者比较友好
  • JavaScript是有界面效果的
  • JavaScript是弱语言,变量只需要var来声明。而Java中变量的声明,要根据变量的类型来定义

比如Java中需要定义以下变量:

int a;
float a;
double a;
String a;
boolean a;

但是在JavaScript中,只用定义一个变量:

var a;
  • JavaScript不用关心其他的事情,更关心自己的业务

JavaScript的组成

JavaScript基础分为三个部分:

  • ECMAScript:JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等
  • DOM:操作网页上的元素api。比如让盒子移动、变色、轮播图等
  • BOM:操作浏览器部分功能的额API。比如让浏览器自动滚动

PS:JavaScript重复性的劳动几乎为0,基本都是创造性的劳动。而不像HTML、CSS这种的margin、padding都是机械重复劳动。

第一个JavaScript实例

引入JavaScript的3种方式

  • 外链式
  • 行内式
  • 内部式

外链式

也就是和我们引入外部CSS文件一样,在head头部引入我们自定义JavaScript脚本:

<script src="01%20index.js">

行内式

因为我们的JavaScript是可以操作我们的标签的,也就是说我们可以把标签当成DOM(Document Object Module),所以我们就可以使用行内式来引入JavaScript:

<body>
    <p id="p1" onclick="clickHandler()">你好,JavaScript!</p>
</body>

但是我们发现给了p标签id和onclick属性后,依然是没有任何效果,所以,我们需要讲一下我们的内部式

内部式

在我们写的HTML代码中,拿到浏览器那边,浏览器是从上到下开始解析的,那么我们需要把JavaScript写在最后面,等全部加载成功后,再来加载JavaScript:

<script type="text/javascript">
    
</script>

我们的内部式就是这样引入的,那么我们现在可以去写我们的第一个JavaScript实例了

Hello,JavaScript!

当我们点击P标签的时候,弹框输出:Hello,JavaScript!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p id="p1" onclick="clickHandler()">你好,JavaScript!</p>
    </body>
    <script type="text/javascript">
        function clickHandler(){
            alert('Hello,JavaScript!')
        }
    </script>
</html>

image

alert语句

alert(英文翻译为“警报”)的用途:弹出警告框

alert('这是我的第一个JavaScript程序!')

当我们保存后在浏览器刷新,那么就会出现这样的效果:
image

JavaScript的语法规则

学习程序,是有规律可循的,就是程序中有相同的部分,这些部分就是一种规定,不能更改,我们称为:语法

  1. JavaScript对换行、缩进、空格不敏感

备注:每一条语句末尾都要加上分号,虽然分号不是必须添加的,但是为了程序今后要压缩,如果不加分号,那么压缩后的程序将不能运行

  1. 所有的符号,都是英语的。比如括号、引号、分号
  2. JavaScript的注释:

单行注释:

// 我是注释

多行注释:

JavaScript在网页中输出信息的写法

在JavaScript中,网页输出新的写法有三种:

  • 使用window.alert()输出警告框
  • 使用document.write()方法将内容写到html文档中
  • 使用innerHTML写入到HTML元素
  • 使用console.log()写入到浏览器的控制台

使用window.alert()输出警告框

windos.alert(""),弹框效果,window是BOM对象,指的是整个浏览器,可以省略不写。弹框比较突然,对用户来说体验不是太好,基本上就是测试代码使用的:

<script type="text/javascript">
    window.alert('星儿今天很漂亮')  # window是可以忽略的
    alert('星儿今天很漂亮')
</script>

image

使用document.write()方法将内容写到HTML文档中

document.write("")会直接在页面上输出内容

<script type="text/javascript">
    document.write('星儿今天很漂亮')
</script>

image

既然我们说过,JavaScript是用来操作DOM的,那么我们就可以来尝试一下:

<script type="text/javascript">
    document.write("星儿今天很漂亮")
    document.write("<h1>我是一级标题</h1>")
</script>

image

使用innerHTML写入到HTML元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1 id="demo1">我是一级标题</h1>
        <button type="button" onclick="changeContent()">更改内容</button>
    </body>
    <script type="text/javascript">
        function changeContent(){
            document.getElementById("demo1").innerHTML = "通过innerHTML方法向页面输出内容"
        }
    </script>
</html>

当我们还没有点击的时候是这样的:
image

当我们点击按钮后是这个样子的:
image

使用console.log()写入到浏览器的控制台

其实console是一个系列,不仅仅之后console.log()方法,还有console.error(),console.warn(),当然这些都是输出在控制台上面的:

<script type="text/javascript">
    //控制台日志
    console.log("控制台.日志")
</script>

image

<script type="text/javascript">
    //控制台警告
    console.warn("控制台.警告")
</script>

image

<script type="text/javascript">
    //控制台错误
    console.error("控制台.错误")
</script>

image

prompt()方法

prompt()方法用于显示可提示用户进行输入的对话框。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="button" onclick="hello_user()" value="点我点我"/>
    </body>
    <script type="text/javascript">
        function hello_user(){
            var name = prompt("请输入用户名:")
            if(name != null && name != ''){
                document.write("hello,"+name+"!")
            }
        }
    </script>
</html>

点我们没有点击的时候,此时就只有一个button按钮
image

当我们点击按钮的时候,会弹框让我们输如用户名
image

当点击确定后,会在浏览器界面输出一句话
image

JavaScript中的变量

变量的含义

变量,即是在程序运行过程中它的值是允许修改的量,与他相对应的就是常量:在程序运行过程中它的值不允许修改的量

JavaScript和python是一样的弱类型语言,Python中定义变量没有关键字:username = 'xiao',但是在JavaScript中定义变量使用关键字: var name = 'xiao';

var name = "xiao";

变量的声明和定义

有两种方式:

  • 先声明后定义
  • 声明立刻定义

先声明后定义

//1.先声明
var dog;
console.log(dog)  //undefined代表未定义

image

//2.后定义
dog = "校长";
console.log(dog)

image

声明立刻定义(常用)

<script type="text/javascript">
    var dog2 = "雪儿";
    console.log(dog2)
</script>

image

变量名的命名规范

  • 严格去分大小写
  • 命名时可以出现字母、数字、下划线、$,但是不能数字开头,也不能是纯数字,不能包括JavaScript的关键字和保留字
  • 推荐驼峰命名法
  • 匈牙利命名法

JavaScript的保留关键字

https://www.runoob.com/js/js-reserved.html

JavaScript基本数据类型

JavaScript数据类型包括:基本数据类型引用数据类型

基本数据类型指的是简单的数据段,引用数据类型指的是具有多个值构成的对象

当我们把变量赋值给一个变量时,解析器首先要确认的是这个值是基本数据类型还是引用数据类型

基本数据类型

基本数据类型分为以下五种:

  • number
  • string
  • boolean
  • null
  • undefined

数字类型:number

<script type="text/javascript">
    var num = 123;
    console.log(num)
</script>

number类型在控制台输出是蓝色的
image

字符串类型:string

<script type="text/javascript">
    var str = "泰然城";
    console.log(str)
</script>

字符串类型在控制台输出是黑色的
image

布尔类型:boolean

<script type="text/javascript">
    var b1 = true;
    console.log(b1)
    console.log(typeof b1)
</script>

image

空对象:null

<script type="text/javascript">
    var n1 = null;
    console.log(n1)
    console.log(typeof n1)
</script>

null代表的是空对象
image

未定义:undefined

这个在刚刚我们讲变量的声明和定义已经说过了,如果一个变量声明了但是没有定义,那么就是undefined

<script type="text/javascript">
    var name1;
    console.log(name1)
    console.log(typeof name1)
</script>

image

其实还有一种数据类型,Infinity 属性用于存放表示正无穷大的数值:

<script type="text/javascript">
    var dev = 5/0;
    console.log(dev)
    console.log(typeof dev)
</script>

image

引用数据类型

  • Function
  • Object
  • Array
  • String
  • Date

后面会慢慢讲解

JavaScript的运算符

JavaScript运算符分为四种:

  • 算术运算符
  • 赋值运算符
  • 比较运算符
  • 逻辑运算符

算数运算符和赋值运算符请参考:Http://www.w3school.com.cn/js/js_operators.asp

比较运算符和逻辑运算符请参考:http://www.w3school.com.cn/js/js_comparisons.asp

特殊情况

字符串拼接

我们有这么一段文字需要拼接:

相比10年前的北京奥运,这一次,大家选择了少而精的策略,真正在舞台上的演员只有70余人。

那么此时我们想把北京奥运和70拿出来再通过字符串进行拼接,做法是这样的:

<script type="text/javascript">
    var n1 = "北京奥运";
    var n2 = 70;
    var str = "相比10年前的"+n1+",这一次,大家选择了少而精的策略,真正在舞台上的演员只有"+n2+"余人。";
    console.log(str)
</script>

image

字符串运算

字符串相加

<script type="text/javascript">
    var str1 = "1";
    var str2 = "2";
    var newStr = str1+str2;
    console.log(newStr)
    console.log(typeof newStr)
</script>

虽然结果是12,但是还是string类型
image

如果我们想要将string类型转换成int类型,需要使用到parseInt()方法

<script type="text/javascript">
    //将string类型转换成int类型
    var newStr2 = parseInt(newStr);
    console.log(typeof newStr2)
</script>

image

当我们使用字符串相减的时候:

<script type="text/javascript">
    var str1 = "1";
    var str2 = "2";
    var newStr3 = str1-str2;
    console.log(newStr3)
</script>

image

同样,在我们使用字符串相乘/相除都是可以执行成功不需要转换数据类型的,验证结果略过

我们来尝试下两个都是字符串且不像数字的相乘:

<script type="text/javascript">
    var n1 = 'one';
    var n2 = 'two';
    console.log(n1*n2)
</script>

输出为NaN,即Not a Num
image

JavaScript中的流程控制语句

  • if
  • switch
  • while
  • do while
  • for

if语句

定义鸡为20,如果大于15则大吉大利今晚吃鸡

<script type="text/javascript">
    var ji = 20;
    if (ji >=20) {
        console.log("大吉大利,今晚吃鸡!")
    }
</script>

image

if...else

<script type="text/javascript">
    var ji = 15;
    if (ji >=20) {
        console.log("大吉大利,今晚吃鸡!")
    } else{
        console.log("很遗憾,今晚不能吃鸡!")
    }
</script>

image

if...else if

<script type="text/javascript">
    var mathScore = 140;
    var totalScore = 500;
    if (mathScore >= 138 && totalScore >= 680) {
        console.log("恭喜你被清华大学录取!")
    } else if( totalScore >= 700 || mathScore >= 139){
        console.log("恭喜你被复旦大学录取!")
    }else {
        console.log("很抱歉!")
    }
</script>

image

switch

switch和case一起用,case表示的是一个条件,满足这个条件就会走进来,遇到break就会跳出

<script type="text/javascript">
    var gameScore = "best";
    switch (gameScore){
        case "best":
            console.log('大吉大利今晚吃鸡!')
            break;
        case "better":
            console.log("你是最优秀的!")
            break;
        default:
            break;
    }
</script>

image

while

while循环有3个条件:

  1. 初始化循环变量
  2. 循环判断条件
  3. 更新循环变量
<script type="text/javascript">
    var n = 1;
    while (n<=100){
        console.log(n)
        n++;
    }
</script>

image

练习:打印1-100之间3的倍数

<script type="text/javascript">
    var n = 1;
    while (n<=100){
        if (n%3===0) {
            console.log(n)
        }
        n++
    }
</script>

image

do...while

do...while和while不一样,do...while不管符不符合条件,至少会运行一次

<script type="text/javascript">
    var n = 3;
    do{
        console.log(n)
        n++
    }while (n<10){
        
    }
</script>

image

for循环

打印1-100之间9的倍数

<script type="text/javascript">
    for (var n=1;n<=100;n++) {
        if (n%9==0) {
            console.log(n)
        }
    }
</script>

image

计算1-100的和

<script type="text/javascript">
    var sum=0;
    for (var n=1;n<=100;n++) {
        sum+=n
    }
    console.log(sum)
</script>

image

数组的创建和使用

在Python中,能存放数据的有列表,用[]表示,但是在JavaScript中,[]被当做为数组,所谓的数组看以看成是一个容器,用来存放东西的容器。

数组创建的两种方式:

  • 字面量方式创建
  • 使用构造函数的方式创建

字面量方式创建

所谓字面量的方式,是我们最经常用的,这种方法简单直观

//因为Array是一个对象,那么这个对象就有自己的方法和属性
var arr = ['red','yellow','black']

//创建一个空数组
var arr2 = []

使用构造方法创建数组

<script type="text/javascript">
    var arr1 = new Array();//创建的是空数组
    
    //万事万物皆对象,没有对象new一个,此时的Array可以看成是一个类
    var colors = new Array('red','blue','yellow');
    console.log(colors)
    
</script>

数组的基本操作

数组的赋值

<script type="text/javascript">
    //1.创建一个空的数组
    var colors = new Array();
    
    //2.为数组赋值
    colors[0] = "red";
    colors[1] = "black";
    colors[2] = "white";
    
    //3.打印数据
    console.log(colors)
    
</script>

image

通过下标获取元素的值

<script type="text/javascript">
    //1.创建一个空的数组
    var colors = new Array();
    
    //2.为数组赋值
    colors[0] = "red";
    colors[1] = "black";
    colors[2] = "white";
    
    //3. 通过下标获取数组的值
    console.log(colors[0])
    console.log(colors[2])
    
</script>

image

获取数组的长度

<script type="text/javascript">
    //1.创建一个空的数组
    var colors = new Array();
    
    //2.为数组赋值
    colors[0] = "red";
    colors[1] = "black";
    colors[2] = "white";

    //3.获取数组的长度
    console.log(colors.length)
    
</script>

image

遍历数组

<script type="text/javascript">
    //1.创建一个空的数组
    var colors = new Array();
    
    //2.为数组赋值
    colors[0] = "red";
    colors[1] = "black";
    colors[2] = "white";

    //3.遍历数组
    for (var count=0;count<=colors.length;count++) {
        console.log(colors[count])
    }
    
</script>

这里在后面有个undefined,是因为我们在设置循环条件的时候设置成了小于等于数据的长度,但是数组的第一个元素是从0开始的,所以才会有undefined
image

数组的常用方法

concat():数组的合并

<script type="text/javascript">
    //1.首先创建两个数组
    var n1 = ['北京','上海','深圳']
    var n2 = ['固始','信阳']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    console.log(newN)
</script>

image

toString():将数组转换成为字符串

<script type="text/javascript">
    //1.首先创建两个数组
    var n1 = ['北京','上海','深圳']
    var n2 = ['固始','信阳']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    console.log(newNum)
</script>

image

join():将数组里的字符串按照指定的字符连接起来

<script type="text/javascript">
    //1.首先创建两个数组
    var n1 = ['北京','上海','深圳']
    var n2 = ['固始','信阳']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    console.log(newN.join('__'))
</script>

image

indexOf():通过内容查找下标,正向查找

<script type="text/javascript">
    //1.首先创建两个数组
    var n1 = ['北京','上海','深圳']
    var n2 = ['固始','信阳']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join('__'))
    
    //5.通过内容查找下标
    console.log(newN.indexOf("固始"))
</script>

image

lastindexOf():反向查找

<script type="text/javascript">
    //1.首先创建两个数组
    var n1 = ['北京','上海','深圳']
    var n2 = ['固始','信阳']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join('__'))
    
    //5.通过内容查找下标
    //console.log(newN.indexOf("固始"))
    
    //6.lastIndexOf()
    console.log(newN.lastIndexOf("固始"))
</script>

我们可以看到这个值依然是3,因为不管你正向还是反向,顺序是不会变的
image

sort():数组的排序

<script type="text/javascript">
    //1.首先创建两个数组
    var n1 = ['北京','上海','深圳']
    var n2 = ['固始','信阳']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join('__'))
    
    //5.通过内容查找下标
    //console.log(newN.indexOf("固始"))
    
    //6.lastIndexOf()
    //console.log(newN.lastIndexOf("固始"))
    
    //7.sort():对数组排序
    var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
    console.log(names.sort())
</script>

这样是按照26个字母进行排序的,如果首字母相同,那么就比较第二个字母,以此类推
image

reverse():反转数组

<script type="text/javascript">
    //1.首先创建两个数组
    var n1 = ['北京','上海','深圳']
    var n2 = ['固始','信阳']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join('__'))
    
    //5.通过内容查找下标
    //console.log(newN.indexOf("固始"))
    
    //6.lastIndexOf()
    //console.log(newN.lastIndexOf("固始"))
    
    //7.sort():对数组排序
    var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
    //console.log(names.sort())
    
    //8.reverse()反转数组
    console.log(names.reverse())
</script>

仅仅是对数组的反转,并不会排序
image

shift():移除掉数组中的第一个元素,返回的是移除掉元素的值

<script type="text/javascript">
    //1.首先创建两个数组
    var n1 = ['北京','上海','深圳']
    var n2 = ['固始','信阳']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join('__'))
    
    //5.通过内容查找下标
    //console.log(newN.indexOf("固始"))
    
    //6.lastIndexOf()
    //console.log(newN.lastIndexOf("固始"))
    
    //7.sort():对数组排序
    var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
    //console.log(names.sort())
    
    //8.reverse()反转数组
    console.log(names.reverse())
    
    //9.移除元素和添加元素
    var shiftNames = names.shift();
    console.log(shiftNames)
</script>

image

unshift():向数组的第一个元素插入一个或者多个值,并返回新的长度

<script type="text/javascript">
    //1.首先创建两个数组
    var n1 = ['北京','上海','深圳']
    var n2 = ['固始','信阳']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join('__'))
    
    //5.通过内容查找下标
    //console.log(newN.indexOf("固始"))
    
    //6.lastIndexOf()
    //console.log(newN.lastIndexOf("固始"))
    
    //7.sort():对数组排序
    var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
    //console.log(names.sort())
    
    //8.reverse()反转数组
    console.log(names.reverse())
    
    //9.移除元素和添加元素
    //var shiftNames = names.shift();
    //console.log(shiftNames)
    
    var unShiftNames = names.unshift("liming","王鹏飞")
    console.log(unShiftNames)
</script>

image

push():向数组的尾部添加一个或者多个值,并返回数组的长度

<script type="text/javascript">
    //1.首先创建两个数组
    var n1 = ['北京','上海','深圳']
    var n2 = ['固始','信阳']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join('__'))
    
    //5.通过内容查找下标
    //console.log(newN.indexOf("固始"))
    
    //6.lastIndexOf()
    //console.log(newN.lastIndexOf("固始"))
    
    //7.sort():对数组排序
    var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
    //console.log(names.sort())
    
    //8.reverse()反转数组
    console.log(names.reverse())
    
    //9.移除元素和添加元素
    //var shiftNames = names.shift();
    //console.log(shiftNames)
    
    var unShiftNames = names.unshift("liming","王鹏飞")
    //console.log(unShiftNames)
    
    //10.push():在数组的尾部添加一个或多个值,返回的是数组的长度
    var pushNames = names.push("lihaiming","languansheng")
    console.log(pushNames)
</script>

image

pop():删除数组尾部的一个元素,并返回这个元素的值

<script type="text/javascript">
    //1.首先创建两个数组
    var n1 = ['北京','上海','深圳']
    var n2 = ['固始','信阳']
    
    //2.concat():两个数组的合并
    var newN = n1.concat(n2)
    //console.log(newN)

    //3.将数组转换成字符串
    var num = [98,54,66,100,0]
    var newNum = num.toString()
    //console.log(newNum)
    
    //4.join()
    //console.log(newN.join('__'))
    
    //5.通过内容查找下标
    //console.log(newN.indexOf("固始"))
    
    //6.lastIndexOf()
    //console.log(newN.lastIndexOf("固始"))
    
    //7.sort():对数组排序
    var names = ["lipeng","jiaduobao","wanglaoqi","zhangsan"]
    //console.log(names.sort())
    
    //8.reverse()反转数组
    console.log(names.reverse())
    
    //9.移除元素和添加元素
    //var shiftNames = names.shift();
    //console.log(shiftNames)
    
    var unShiftNames = names.unshift("liming","王鹏飞")
    //console.log(unShiftNames)
    
    //10.push():在数组的尾部添加一个或多个值,返回的是数组的长度
    var pushNames = names.push("lihaiming","languansheng")
    //console.log(pushNames)
    
    //11.pop():删除数组的最后一个元素,并且返回删除的元素值
    var popNames = names.pop();
    console.log(popNames)
</script>

image

对字符串进行反转

<script type="text/javascript">
    var str = "hello Javascript!"
    console.log(str.split("").reverse().join(""))
</script>

image

函数的使用

字面量方式创建

<script type="text/javascript">
    //1.字面量方式的创建
    function add(){
        alert("add函数被调用了!")
    }
    add()
</script>

不管在什么语言中,定义了函数那么就需要有调用,在JavaScript是这样的:
image

定义函数时需要携带参数

<script type="text/javascript">
    //1.字面量方式的创建
    function add(){
        alert("add函数被调用了!")
    }
    //add()
    
    //第二种方式:定义函数时携带参数
    function add2(a,b){
        console.log(a*b)
    }
    add2(4,5)
</script>

image

定义函数值需要有返回值

<script type="text/javascript">
    //1.字面量方式的创建
    function add(){
        alert("add函数被调用了!")
    }
    //add()
    
    //第二种方式:定义函数时携带参数
    function add2(a,b){
        console.log(a*b)
    }
    //add2(4,5)
    
    //第三种方式:定义函数需要有返回值
    function add3(a,b){
        return a*b
    }
    var a = add3(5,9)
    console.log(a)
</script>

image

Object_构造函数

对象的创建有以下几种方式:

  • 字面量方式创建
  • 使用Object()创建对象
  • 使用构造函数方式创建对象

字面量方式创建

在JavaScript中,对象的属性是用key:value的方式存储的

<script type="text/javascript">
    var stu = {
        name:"(*^_^*)亚飞",
        age:22,
        fav:"鸡汤",
    }
    console.log(stu)
</script>

推荐使用这种字面量方式创建,这种方式简单直观
image

如果想要设置name属性的值,那么我们需要用点语法,也就是在python中的get方法和set方法

<script type="text/javascript">
    var stu = {
        name:"(*^_^*)亚飞",
        age:22,
        fav:"鸡汤",
    }
    console.log(stu)
    
    stu.name = "li"
    console.log(stu)
</script>

image

使用Object()创建对象

使用Object构造函数 特点: 首字母要大写 想要创建对象就需要自己new一个

<script type="text/javascript">
    var Stu = new Object();
    Stu.name = "小明";
    console.log(Stu)
</script>

image

使用构造函数方式创建对象

<script type="text/javascript">
    var Student = function(){
        this.name = "海明";
        this.age = 22;
        this.fav = function(){
            alert('旅游')
        }
    }
    
    //创建对象
    var stu1 = new Student();
    console.log(stu1)
</script>

使用构造函数创建对象,有以下三点:

  • 函数名首字母大写
  • 构造函数不需要return
  • 为对象添加成员变量:this.name = 'guansheng';

image

但是使用构造函数方式创建对象有一个弊端:每new一次对象,里面的成员变量和方法都是一样的,所以我们在调用的时候不知道调用的是哪个

当然,到最后我们推荐的是构造函数方式

<script type="text/javascript">
    function Animal(){
        this.name = "jingjing";
        this.age = 21;
    }
    Animal.prototype.shownames1 = function(){
        alert('调用了shownames1方法!')
    }
    Animal.prototype.shownames2 = function(){
        alert('调用了showname2方法!')
    }
    
    var a = new Animal();
    a.shownames1()
</script>

image

String_Number

String字符串对象,那么这是一个对象就会有自己的方法

obj.length获取字符串的长度

<script type="text/javascript">
    var str = "hello,world!"
    
    console.log(str.length)
</script>

image

toUpperCase(obj)把小写变大写

<script type="text/javascript">
    var str = "hello,world!"
    
    console.log(str.toUpperCase())
</script>

image

toLowerCase()把大写变成小写

    <script type="text/javascript">
        var str = "hello,world!"
        
        var bigStr = str.toUpperCase();
        
        console.log(bigStr.toLowerCase())
    </script>

image

obj.split("",n)以xx进行切割,并返回数组的最大长度为m

    <script type="text/javascript">
        var str = "hello,world!"
        
        console.log(str.split(" "))
    </script>

image

obj.sunstring(n,m)左开右闭的方式获取str的n到m元素的值

    <script type="text/javascript">
        var str = "hello,world!"
        
        console.log(str.substring(2,5))
    </script>

image

Number类型

obj.toString()将number装换成字符串类型

    <script type="text/javascript">
        var num = 123.4567
        
        var num2String = num.toString();
        console.log(num2String)
        console.log(typeof num2String)
    </script>

image

toFixed(n)四舍五入,最大长度为n

    <script type="text/javascript">
        var num = 123.4567
        
        console.log(num.toFixed(2))
    </script>

image

Date对象的使用

    <script type="text/javascript">
        var myDate = new Date();
        
        //1.获取今天是第几号
        console.log(myDate.getDate())
        
        //2.获取当天的日期和时间
        console.log(Date())
        
        //3.获取今天是星期几 0代表周日 6代表周六
        console.log(myDate.getDay())
        
        //4.获取现在是几时
        console.log(myDate.getHours())
        
        //5.获取一年中的几个月  0代表1月  11代表12月
        console.log(myDate.getMonth()+1)
    </script>

image

Date对象的小练习

在桌面显示当前时间:

    <script type="text/javascript">
        function getCurrentTime(){
            //1.创建一个时间对象
            var date = new Date();
            
            //2.获取当前时间
            var timeInfo = date.getFullYear()+"年"+num(date.getMonth()+1)+"月"+num(date.getDate())+"日 "+ num(date.getHours())+":"+num(date.getMinutes())+":"+num(date.getSeconds());
            
            //3.获取span1这个元素
            var oSpan = document.getElementById('span1');
            
            //4.将时间写到span标签中
            oSpan.innerHTML = timeInfo.fontcolor('red');
        }
        getCurrentTime()
        
        //5.设置定时器
        setInterval("getCurrentTime()",1000)
        
        //我们发现:秒钟走到59后 就变成了0  而不是00
         function num(n){
            if (n<10) {
                return "0"+n
            } else{
                return n
            }
         }
    </script>

image

Math对象的使用

Math对象用于执行数学任务

    <script type="text/javascript">
        
        //1.ceil() 天花板函数 向上取整  大于等于1,并且最接近的整数
        var reg1 = Math.ceil(1.12131)
        console.log(reg1)
        
        //2.floor() 地板函数  向下取整  小于等于1,并且最接近的整数
        var reg2 = Math.floor(1.12131)
        console.log(reg2)
        
        //3.最大值与最小值
        var reg3 = Math.max(4,5)
        console.log(reg3)
        
        var reg4 = Math.min(1,9)
        console.log(reg4)
        
        //4.取随机数  这个是0-1之间的随机数
        var reg5 = Math.random()
        console.log(reg5)
        
        //获取100-200之间的随机数
        var reg6 = 100+Math.random()*100
        console.log(reg6)
    </script>

image

JavaScript案例

模态框案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
            }
            #box{
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,.3);
            }
            #content{
                width: 400px;
                height: 200px;
                line-height: 200px;
                background-color: white;
                position: relative;
                top: 150px;
                margin: auto;
                text-align: center;
                color: red;
            }
            #span1{
                position: absolute;
                top: 0px;
                right: 0px;
                background-color: red;
                color: white;
                width: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
            }
        </style>
    </head>
    <button id="btn">点我</button>
    <body>
    </body>
    <script type="text/javascript">
        var myBtn = document.getElementById('btn');
        
        var myDiv = document.createElement('div');
        var myP = document.createElement('p');
        var mySpan = document.createElement('span')
        
        myDiv.id = 'box';
        myP.id = 'content';
        mySpan.id = "span1";
        
        myP.innerHTML = "成功弹出模态框";
        mySpan.innerHTML = "x";
        
        myDiv.appendChild(myP);
        myP.appendChild(mySpan);
        
        myBtn.onclick = function(){
            //console.log(myBtn.parentnode)
            myBtn.parentNode.insertBefore(myDiv,myBtn)
        }
        mySpan.onclick = function(){
            myDiv.parentNode.removeChild(myDiv)
        }
    </script>
</html>

image
image

点一点有惊喜

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                width: 200px;
                height: 200px;
                background-color: red;
                text-align: center;
                line-height: 200px;
                margin: 20px auto;
                color: white;
                font-size: 22px;
                font-weight: blod;
            }
        </style>
    </head>
    <body>
        <div class="box">
            点击有惊喜
        </div>
    </body>
    <script type="text/javascript">
        //getElementsByClassName获取的是所有符合条件的元素,用数组保存的
        var myBox = document.getElementsByClassName("box")[0];
        
        var a = 0;
        myBox.onclick = function(){
            a++;
            if (a%4===1) {
                this.style.background = "green";
                this.innerText = "逗你玩呢";
            } else if(a%4===2){
                this.style.background = "blue";
                this.innerText = "再点一次";
            } else if(a%4===3){
                this.style.background = "transparent";
                this.innerText = "";
            } else{
                this.style.background = 'red';
                this.innerText = "点击有惊喜"
            }
        }
    </script>
</html>

image
image
image
image
image

简易留言框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="box">
            
        </div>
        <textarea id='msg'></textarea>
        <input type="button" id="btn" value="提交" />
        <button onclick="sum()">统计</button>
    </body>
    <script type="text/javascript">
        
        var ul = document.createElement('ul')
        var box =  document.getElementById('box');
        box.appendChild(ul)
        
        var msg = document.getElementById('msg');
        var btn = document.getElementById('btn');
        
        var count=0;
        btn.onclick = function(){
            var li = document.createElement('li');
            li.innerHTML = msg.value + "<span>&nbsp;&nbsp;&nbsp;&nbsp;X</span>";
            
            var lis = document.getElementsByTagName('li');
            
            if (lis.length==0) {
                ul.appendChild(li);
                count++;
            } else{
                ul.insertBefore(li,lis[0]);
                count++;
            }
            msg.value = "";
            
            var spans = document.getElementsByTagName('span');
            for (var i=0;i<spans.length;i++) {
                spans[i].onclick = function(){
                    ul.removeChild(this.parentNode)
                    count--;
                }
            }

        }
        function sum(){
            alert("一共有"+count+"条留言")
        }
    </script>
</html>

image

选项卡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
                text-decoration: none;
            }
            #tab{
                width: 480px;
                margin: 20px auto;
                border: 1px solid red;
            }
            ul li{
                float: left;
                width: 160px;
                height: 60px;
                text-align: center;
                line-height: 60px;
                background-color: #CCCCCC;
            }
            ul li a{
                color: #000000;
            }
            li.active{
                background-color: #FFFFFF;
            }
            p{
                height: 200px;
                display: none;
            }
            p.active{
                display: block;
                height: 200px;
                text-align: center;
                line-height: 200px;
                background-color: #FFFFFF;
            }
        </style>
    </head>
    <body>
        <div id="tab">
            <ul>
                <li class="active"><a href="">我的商城</a></li>
                <li><a href="">我的收藏</a></li>
                <li><a href="">我的订单</a></li>
            </ul>
            <p class="active">商城展示</p>
            <p>收藏展示</p>
            <p>订单展示</p>
        </div>
    </body>
    <script type="text/javascript">
        var tabli = document.getElementsByTagName('li')
        var tabContent = document.getElementsByTagName('p')
        
        for (var i=0;i<tabli.length;i++) {
            tabli[i].index = i;
            tabli[i].onclick = function(){
                for (var j=0;j<tabli.length;j++) {
                    tabli[j].className = '';
                    tabContent[j].className = '';
                }
                this.className = 'active';
                console.log(this.index)
                tabContent[this.index].className = 'active';
            }
        }
    </script>
</html>

image
image
image

仿淘宝搜索框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>仿淘宝搜索框</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            input{
                outline: none;
                display: block;
                width: 390px;
                height: 40px;
                margin-top: 20px;
                font-size: 20px;
                border: 2px solid red;
                border-radius: 5px;
            }
            label{
                position: absolute;
                top: 32px;
                left: 10px;
                font-size: 20px;
                color: gray;
            }
        </style>
    </head>
    <body>
        <div id="search">
            <input type="text" name="" id="text" value="" />
            <label for="text" id="msg">泰然城</label>
        </div>
    </body>
    <script type="text/javascript">
        var txt = document.getElementById('text');
        var msg = document.getElementById('msg');
        
        txt.oninput = function(){
            if (txt.value == '') {
                msg.style.display = 'block'
            } else{
                msg.style.display = 'none'
            }
        }
    </script>
</html>

匀速移动案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>匀速移动</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                top: 50px;
                left: 0px;
            }
        </style>
    </head>
    <body>
        <button id="btn">点我</button>
        <div id="box">
            
        </div>
    </body>
    <script type="text/javascript">
        var btn = document.getElementById('btn');
        var box = document.getElementById('box');
        
        var count = 0;
        var timer = null;
        
        //当点击按钮时
        btn.onclick = function(){
            setInterval(function(){
                count++;
                if (count >1000) {
                    clearInterval(timer)
                    box.style.display = 'none'
                } else{
                    box.style.left = count +'px'
                }
                
            },1)
            
        }
    </script>
</html>

5秒自动关闭广告

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
                list-style: none;
            }
            img{
                position: fixed;
            }
            #left{
                left: 0px;
            }
            #right{
                right: 0px;
            }
            ul li{
                font-size: 26px;
            }
        </style>
    </head>
    <body>
        <img src="../JS_dom/1.gif" id="left"/>
        <img src="../JS_dom/1.gif" id="right"/>
        <ul>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
            <li>屠龙宝刀 点击就送</li>
        </ul>
    </body>
    <script type="text/javascript">
        var left = document.getElementById('left')
        var right = document.getElementById('right')
        var timer = null;
        timer = setTimeout(function(){
            left.style.display = 'none'
            right.style.display = 'none'
        },5000)
    </script>
</html>

小米轮播图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>小米滚动框</title>
        <style type="text/css">
            *{padding: 0;margin: 0;}
            .wrap{
                width: 512px;
                height: 400px;
                border: 3px solid #808080;
                position: relative;
                overflow: hidden;
                margin: 100px auto;
            }
            .wrap span{
                width: 100%;
                height: 200px;
                position: absolute;     
            }
            .up{
                top: 0;
            }
            .down{
                bottom: 0;
            }
            img{
                position: absolute;
                top: 0;
                left: 0;        
            }
        </style>
    </head>
    <body>
        <div id="box" class="wrap">
            <img src="../JS_dom/mi.png" id="xiaomi"/>
            <span id="picUp" class="up"></span>
            <span id="picDown" class="down"></span>
        </div>
    </body>
    <script type="text/javascript">
        var up = document.getElementById('picUp');
        var down = document.getElementById('picDown');
        
        var img = document.getElementById('xiaomi');
        
        var count = 0;
        var timer = null;
        //鼠标移入的时候吧
        up.onmouseover = function(){
            
            //不管怎样 上来先清定时器
            clearInterval(timer);
            timer = setInterval(function(){
                count-=3;
                count >= -1070 ? img.style.top = count + 'px': clearInterval(timer);  
                
            },30)
        }
        down.onmouseover = function(){
            clearInterval(timer)
            
            timer = setInterval(function(){
                count += 1;
                count < 0 ? img.style.top = count + 'px': clearInterval(timer);
            })
        }
    </script>
</html>

轮播图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>无缝轮播</title>
        <style type="text/css">
            *{padding: 0;margin: 0;}
            ul{list-style: none;}
            .box{
                width: 600px;
                height: 200px;
                margin: 50px auto;
                overflow: hidden;
                position: relative;

            }
            ul li{
                float: left;
            }
            .box ul{
                width: 400%;
                position: absolute;
                top: 0;
                left: 0;
                
            }
        </style>
    </head>
    <body>
        <div class="box">
            <ul>
                <li><img src="../JS_dom/image/01.jpg"/></li>
                <li><img src="../JS_dom/image/02.jpg"/></li>
                <li><img src="../JS_dom/image/03.jpg"/></li>
                <li><img src="../JS_dom/image/04.jpg"/></li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        var box = document.getElementsByClassName('box')[0];
        console.log(box)
        var ul = box.children[0];
        
        var num = 0;
        function autoPlay(){
            num--;
            num <= -600 ? num=0 : num ;
            ul.style.left = num +'px';
        }
        
        //鼠标移动上去
        box.onmouseover = function(){
            clearInterval(timer)
        }
        //鼠标拿开的时候
        box.onmouseout = function(){
            timer = setInterval(autoPlay,30)
        }
    </script>
</html>

JavaScript的BOM知识点

浏览器对象模型(BOM)

IE 3.0 和 Netscape Navigator 3.0 提供了一种特性 - BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作。使用 BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的操作。

BOM输出

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        //DOM输出系列
        
        //1.alert() 弹框输出
        
        //2.console.log() 用于浏览器调试
        console.log('111')
        
        //3.prompt() 获取用户输入
        var pro = prompt('请输入你的名字:');
        console.log(pro)
        
        //prompt(value,defaultValue) 自动输入defaultValue
        var pro1 = prompt('请输入你的学校:','城关中学');
        console.log(pro1)
        
        //4.confirm() 弹框 如果选择确定则返回true,如果选择取消则返回false
        var con = confirm('是否要关闭?')
        console.log(con)
    </script>
</html>

open_close方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button onclick="window.open('https://www.baidu.com')">打开百度首页</button>
        <button>小米官网</button>
        <button>关闭当前页面</button>
        <button id="new">打开一个空白页</button>
    </body>
    <script type="text/javascript">
        //open和close方法
        //1.open()  打开方法
        var btn = document.getElementsByTagName('button')[1];
        console.log(close)
        
        btn.onclick = function(){
            open("https://www.mi.com")
        }
        
        var close1 = document.getElementsByTagName('button')[2];
        
        close1.onclick = function(){
            if (confirm('是否关闭? ')) {
                console.log(111)
                close();
            }
        }
        
        //打开一个空白页
        var openNew = document.getElementById('new');
        openNew.onclick = function(){
            open('about:blank','_self')
        }
    </script>
</html>

BOM的其他元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        //1.获取浏览器的信息 返回浏览器的用户设备信息
        console.log(window.navigator.userAgent)
        
        //2.windows.location用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
//      console.log(window.location)
        
        //这个方法使用的比较多

        //window.location.href = 'https://www.baidu.com';
        
        //3.全局刷新 window.location.reload()  尽量少用
        //window.location.reload()
    </script>
</html>

client系列

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #box{
                width: 200px;
                height: 200px;
                border: 5px solid red;
                padding: 10px;
                
            }
        </style>
    </head>
    <body>
        <div id="box">
            
        </div>
    </body>
    <script type="text/javascript">
        var box = document.getElementById('box')
        
        console.log(box.clientTop)
        console.log(box.clientLeft)
        console.log(box.clientHeight)
        console.log(box.clientWidth)
    </script>
</html>

屏幕的可视区域

所谓的屏幕克是区域,就是当你首次打开浏览器 能看见的区域。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        //
        window.onload = function(){
            console.log(document.documentElement.clientWidth)
            console.log(document.documentElement.clientHeight)
        }
    </script>
</html>

我们也可以对屏幕的大小进行监听,当屏幕或宽度改变,那么我们的值也跟着改变

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        //
        window.onload = function(){
            console.log(document.documentElement.clientWidth)
            console.log(document.documentElement.clientHeight)
            
            window.onresize = function(){
                console.log(document.documentElement.clientWidth)
                console.log(document.documentElement.clientHeight)
            }
        }
    </script>
</html>

offset系列

没有设置盒子定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #wrap{
                
            }
            #box{
                width: 200px;
                height: 200px;
                border: 1px solid red;
                padding: 10px;
                margin: 10px;
            }
            
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="box">
                
            </div>
        </div>
    </body>
    <script type="text/javascript">
        
        var box = document.getElementById('box');
        
        
        console.log(box.offsetTop)
        console.log(box.offsetLeft)
        console.log(box.offsetWidth)
        console.log(box.offsetHeight)
        
    </script>
</html>

如果设置了父相子觉,那么

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #wrap{
                position: relative;
                width: 400px;
                height: 400px;
                border: 1px solid black;
            }
            #box{
                position: absolute;
                top: 20px;
                left: 20px;
                width: 200px;
                height: 200px;
                border: 1px solid red;
                padding: 10px;
                margin: 10px;
            }
            
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="box">
                
            </div>
        </div>
    </body>
    <script type="text/javascript">
        
        var box = document.getElementById('box');
        
        
        console.log(box.offsetTop)
        console.log(box.offsetLeft)
        console.log(box.offsetWidth)
        console.log(box.offsetHeight)

        
    </script>
</html>

image

--结束END--

本文标题: JavaScript

本文链接: https://www.lsjlt.com/news/179926.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 【转】eval()函数(javascript) - [javaScript]
    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明http://bywind.yourblog.org/logs/227398.htmleval()函数JavaScript有许多小窍门来使编程更加容易。其中之一就是eval()...
    99+
    2023-06-03
  • JavaScript
    目录 JavaScript JavaScript介绍 JavaScript是什么? JavaScript历史背景介绍 ...
    99+
    2023-01-30
    JavaScript
  • JavaScript基础入门--JavaScript简介
    一、简单好学,富有表现力 —— JavaScript简介1.1 JavaScript的用途JavaScript用来制作web页面交互效果,提升用户体验。 简单列出几个JavaScript能够制作的...
    99+
    2022-10-18
    javascript简介 javascript零基础入门 javascript历史
  • 【JavaScript】JavaScript基础详解(文末送书)
    👉博__主👈:米码收割机 👉技__能👈:C++/Python语言 👉公众号👈:测试开发自动化...
    99+
    2023-10-26
    javascript 开发语言 ecmascript
  • JavaScript详解
    目录  一、什么是JavaScript? 二、JavaScript的引入方式  三、JavaScript的基础语法 3.1 书写语法 3.2 输出语句  3.3 变量 3.4 数据类型 3.5 运算符 3.6 流程控制语句  3.7 函数 ...
    99+
    2023-10-09
    javascript 前端 java 正则表达式
  • JavaScript ,Python,j
      常见的内部排序算法有:插入排序、希尔排序、选择排序、冒泡排序、归并排序、快速排序、堆排序、基数排序等。用一张图概括:选择排序  选择排序是一种简单直观的排序算法,无论什么数据进去都是O(n2) 的时间复杂度。所以用到它的时候,数据规模越...
    99+
    2023-01-31
    JavaScript Python
  • javascript 出错
    JavaScript出错:常见错误及解决方法在前端开发中,JavaScript是一门非常常见的语言,能够为网页带来丰富的交互效果,提高用户的体验。然而,在JavaScript的开发过程中,出现错误是不可避免的。这篇文章将会探讨一些常见的Ja...
    99+
    2023-05-14
  • javascript注释@
    JavaScript是一门常用的编程语言,它可以用来创建动态网页效果和复杂的交互式应用程序。在编写JavaScript代码时,注释是一个非常重要的元素,可以帮助程序员提高代码的可读性和可维护性。本文将介绍JavaScript注释的用法和最佳...
    99+
    2023-05-21
  • 设置javascript
    如何设置JavaScript以提升网站性能和用户体验JavaScript是一种广泛使用的编程语言,它能为网站提供丰富的交互和功能。但是,如果不正确使用或设置JavaScript,会导致网站性能下降,并影响用户体验。因此,本文将介绍如何设置J...
    99+
    2023-05-22
  • Javascript Study Memo
    Javascript basic concept.....[@more@]Instance property: property defined in constructor:function Circle(radius) {this.ra...
    99+
    2023-06-03
  • javascript压缩
    Ajax除了自己要写js代码外,同样也免不了要使用其它第三方js库。当你在为提高了用户体验,做出了很绚丽的效果而欣喜的时候,是否想过优化一下JS的效率,比如微软的live,其中的js做了压缩处理。JS的速度分为两种,下载速度和执行速度。今天...
    99+
    2023-06-03
  • JavaScript 简介
    JavaScript 是世界上最流行的脚本语言。 JavaScript 是属于 web 的语言,它适用于 PC、笔记本电脑、平板电脑和移动电话。 JavaScript 被设计为向 HTML 页面增加交互性。 许多 HTML 开发者都不是程序...
    99+
    2023-06-03
  • Javascript Game (转)
    Javascript Game (转)[@more@]js FALCON...
    99+
    2023-06-03
  • JavaScript Day12 BOM
    BOM ​ 虽然 ECMAScript 把浏览器对象模型(BOM,Browser Object Model)描述为JavaScript 的核心,但实际上 BOM 是使用 JavaScript 开发 W...
    99+
    2023-09-07
    javascript 前端 基础详解 es6 前端框架
  • JavaScript函数介绍:5分钟了解JavaScript
    什么是函数把一段相对独立的具有特定功能的代码块封装起来,形成一个独立实体,就是函数,起个名字(函数名),在后续开发中可以反复调用。函数的作用就是封装一段代码,将来可以重复使用。推荐了解黑马程序员web前端课程。为什么要使用函数为了解决代码的...
    99+
    2023-06-03
  • javascript let报错
    JavaScript是目前世界上最流行的编程语言之一,它的使用范围非常广泛,如Web前端开发、服务器端开发、移动应用开发等。在JavaScript中,let是一个关键字,用于声明一个块级作用域的变量。但是,我们有时候会遇到使用let时出现的...
    99+
    2023-05-17
  • base64转pdf javascript
    Base64是一种编码方式,通常用于将二进制数据转换成文本格式,以便可以在网络上进行传输。而PDF(Portable Document Format,便携式文档格式)是一种用于呈现、交换文档的格式。在JavaScript编程中,我们有时需要...
    99+
    2023-05-17
  • javascript 修改top
    JavaScript是一种很棒的编程语言,可用于网站和应用程序的开发。其中一个非常有用的功能是修改网页元素的位置。比如我们可以用JavaScript修改元素的top属性,从而改变它的位置。top是一个CSS属性,用于设置元素相对于父元素的垂...
    99+
    2023-05-17
  • es6 javascript 区别
    ES6 JavaScript与传统JavaScript的区别随着Web技术的不断发展和完善,JavaScript已经成为了Web开发中必不可少的一部分。而在JavaScript的标准化方面,ECMAScript已成为了JavaScript的...
    99+
    2023-05-17
  • javascript byte 转int
    在Javascript编程中,Byte类型的数据是一种常见的数据类型。在处理Byte类型的数据时,有时需要将其转换为Int类型数据来进行一些计算或者业务逻辑的处理。本篇文章将介绍如何使用Javascript将Byte类型的数据转换为Int类...
    99+
    2023-05-22
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作