JS基础&案例

最新推荐文章于 2023-04-04 21:46:32 发布

布谷～dwb

最新推荐文章于 2023-04-04 21:46:32 发布

阅读量6.6k

点赞数 2

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_44331253/article/details/123293143

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JS基础

什么是JS

JS，全称JavaScript，是一种直译式脚本语言，是一种动态类型、弱类型、基于对象的脚本语言，内置支持类型。
JS语言和Java语言对比：

对比	Java	JS
运行环境	JVM虚拟机	JS引擎，是浏览器的一部分
是否跨平台运行	跨平台	跨平台
语言类型	强类型语言	弱类型，动态类型语言
是否需要编译	需要编译，是编译型语言	不需要编译，是解释型语言
是否区分大小写	区分大小写	区分大小写

JS的作用

具体来说，有两部分作用：

JS代码可以操作浏览器(BOM)：进行网址跳转、历史记录切换、浏览器弹窗等等
JS代码可以操作网页(DOM)：操作HTML的标签、标签的属性、样式、文本等等

注意：JS的是在浏览器内存中运行时操作，并不会修改网页源码，所以刷新页面后网页会还原

JS的组成

ECMAScript(核心)：是JS的基本语法规范
BOM：Browser Object Model，浏览器对象模型，提供了与浏览器进行交互的方法
DOM：Document Object Model，文档对象模型，提供了操作网页的方法

JS引入

内部js(内嵌式)
外部js(外联式)

内部JS
在html里增加<script>标签，把js代码写在标签体里

<script>
//在这里写js代码
</script>

外部JS
把js代码写在单独的js文件中，js文件后缀名是.js
在HTML里使用<script>标签引入外部js文件

<script src="js文件的路径"></script>

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js引入方式-外部js</title>
    <!--引入外部的my.js文件-->
    <script src="../js/my.js"></script>
</head>
<body>

</body>
</html>

可能在外部引入时出现问题，请看下面文章
外部引入js不生效的问题
还有一种解决方案，就是将引入文件的代码写到body中的最后面

常用的一些方法

弹出警告框

alert();

控制台输出

console.log();

向页面输出(支持标签的)

document.write();

变量

JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。定义变量需要用关键字 'var’或者let
int i = 10; var i = 10; 或者 i = 10;
String a = “哈哈”; let str = “哈哈”; 或者 str = “哈哈”; 或者 str = “哈哈”
…

注意:
1.var或者可以省略不写,建议保留
2.最后一个分号可以省略,建议保留
3.同时定义多个变量可以用","隔开，公用一个‘var’关键字. var c = 45,d=‘qwe’,f=‘68’;

数据类型

五种原始数据类型

数据类型	描述	示例
number	数值类型	1, 2, 3, 3.14
boolean	布尔类型	true, false
string	字符串类型	“hello”, ‘hello’
object	对象类型	new Date(), null
undefined	未定义类型	var a;

typeof操作符

作用：用来判断变量是什么类型
写法：typeof(变量名) 或 typeof 变量名

null与undefined的区别：
null: 对象类型，已经知道了数据类型，但对象为空。
undefined：未定义的类型，并不知道是什么数据类型。

字符串转换成数字类型
全局函数(方法)，就是可以在JS中任何的地方直接使用的函数，不用导入对象。不属于任何一个对象
转换函数

算数运算

var x = 2;
var y = "3";
console.log(x*y)//6，隐式转换* /都可以。 +是字符串链接 -无法转换

===全等
== 比较数值, === 比较数值和类型

var i = 2;
var j = "2";
alert(i==j); // ==比较的仅仅是数值, true
alert(i===j); // ===比较的是数值和类型.false

函数

js的函数的作用:为了封装代码，在要使用这些代码的地方直接调用函数
js的函数的声明方式:
1. 普通函数(命名函数)
2. 匿名函数

普通函数: function 函数名(参数名,参数名…){函数体}，函数没有返回值类型，没有参数类型

定义普通函数

function 函数名(形参列表){
   函数体
  [return 返回值;]
}

调用普通函数

var result = 函数名(实参列表);

示例

<script>
    function total(a,b,c) {
        console.log("arguments数组中的数据:"+arguments.length)
        console.log(a+","+b+","+c)
        return a+b+c
    }

    //调用函数
    //var num = total(1,2,3);
    //console.log(num)

</script>

js的函数还有俩特点:1. 函数声明时候的参数个数和函数调用时候传入的参数个数，可以不一致;因为函数内部有一个arguments数组，用于存放传入的参数
js的函数是没有重载的，同名函数后面的会覆盖前面的

<script>
    function total(a,b) {
        return a+b
    }

    var num = total(1,2,3);
    console.log(num);

</script>

匿名函数

匿名函数，也叫回调函数，类似于Java里的函数式接口里的方法

function(形参列表){
   函数体
  [return 返回值;]
}

JS事件

事件介绍

HTML 事件是发生在 HTML 元素上的“事情”，是浏览器或用户做的某些事情
事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

常见事件

属性	此事件发生在何时…
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onchange	域的内容被改变。
onblur	元素失去焦点。
onfocus	元素获得焦点。
onload	一张页面或一幅图像完成加载。
onsubmit	确认按钮被点击；表单被提交。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按住。
onkeyup	某个键盘按键被松开。
onmousedown	鼠标按钮被按下。
onmouseup	鼠标按键被松开。
onmouseout	鼠标从某元素移开。
omouseover	鼠标移到某元素之上。
onmousemove	鼠标被移动。

事件绑定

普通函数方式

说白了设置标签的属性

<标签 属性="js代码，调用函数"></标签>

匿名函数方式

<script>
   标签对象.事件属性 = function(){
       //执行一段代码
  }
</script>

事件使用

重要的事件

点击事件
需求: 没点击一次按钮弹出hello…

<input type="button" value="按钮" onclick="fn1()">

<input type="button" value="另一个按钮" id="btn">

<script>
       //当点击的时候要调用的函数
       function fn1() {
       alert("我被点击了...")
  }

//给另外一个按钮，绑定点击事件:
//1.先根据id获取标签
let btn = document.getElementById("btn");
//2. 设置btn的onclick属性(绑定事件)
//绑定命名函数
//btn.onclick = fn1

//绑定匿名函数
btn.onclick = function () {
   console.log("点击了另外一个按钮")
}
</script>

JS的常见的事件介绍:
1. onclick
2. ondblclick
3. onmouseover
4. onmouseout
5. onfocus 获取焦点
6. onblur 失去焦点

JS的BOM

Browser Object Model ,浏览器对象模型. 为了便于对浏览器的操作，JavaScript封装了对浏览器中各个对象，使得开发者可以方便的操作浏览器中的各个对象。

BOM里面的五个对象

window: 窗体对象

方法	作用
alert()	显示带有一段消息和一个确认按钮的警告框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框
prompt	弹出输入框
setInterval(‘函数名()’,time)	按照指定的周期（以毫秒计）来调用函数或计算表达式
setTimeout(‘函数名()’,time)	在指定的毫秒数后调用函数或计算表达式
clearInterval()	取消由 setInterval() 设置的 Interval()。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。

警告框

window.alert("hello")

确认框

let flag = confirm("你确定要删除吗?");
      console.log(flag)

输入框

let age = prompt("请输入你的年龄");

if (parseInt(age) >= 18) {
   alert("可以访问")
}else {
   alert("请大一点了再访问")
}

定时器，就是隔一段事件执行一个任务

setTimeout(),只执行一次的定时器,其实也就相当于一个延时器
第一个参数是要执行的匿名函数，第二个参数是执行时间

setTimeout(function () {
          document.write("hello world")
      },3000)

setInterval(),循环执行的定时器
第一个参数是要执行的匿名函数，第二个参数是间隔时间，该方法的返回值是这个定时器id

let i = 0
var id = setInterval(function () {
   i ++
   document.write("你好世界<br/>")

   //我们还有一个方法，clearInterval(定时器的id)清除定时器
   if (i == 5) {
       clearInterval(id)
  }
},2000);

navigator:浏览器导航对象

属性	作用
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息

screen:屏幕对象

方法	作用
width	返回显示器屏幕的分辨率宽度
height	返回显示屏幕的分辨率高度

history:历史对象

方法	作用
back()	加载 history 列表中的前一个 URL
forword()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面

location:当前路径信息

属性	作用
host	设置或返回主机名和当前 URL 的端口号
href	设置或返回完整的 URL
port	设置或返回当前 URL 的端口号

location.href; 获得路径
location.href = "http://www.baidu.com";设置路径,跳转到百度页面

JS的DOM

什么是dom

DOM：Document Object Model，文档对象模型。是js提供的，用来访问网页里所有内容的(标签,属性,标签的内容)

什么是dom树
当网页被加载时，浏览器会创建页面的DOM对象。DOM对象模型是一棵树形结构：网页里所有的标签、属性、文本都会转换成节点对象，按照层级结构组织成一棵树形结构。
整个网页封装成的对象叫document
标签封装成的对象叫Element
属性封装成的对象叫Attribute
文本封装成的对象叫Text
dom树

一切皆节点, 一切皆对象

操作标签

获取标签

方法	描述	返回值
document.getElementById(id)	根据id获取标签	Element对象
document.getElementsByName(name)	根据标签name获取一批标签	Element类数组
document.getElementsByTagName(tagName)	根据标签名称获取一批标签	Element类数组
document.getElementsByClassName(className)	根据类名获取一批标签	Element类数组

操作标签

方法	描述	返回值
document.createElement(tagName)	创建标签	Element对象
parentElement.appendChild(sonElement)	插入标签
element.remove()	删除标签

获得标签
document.getElementById("id”) 根据id获得
document.getElementsByTagName(“标签名”) 根据标签名获得
document.getElementsByClassName(“类名”) 根据类名获得
操作节点(标签,文本)
document.createElement(tagName) 创建标签 Element对象
document.createTextNode(“文本”) 创建文本节点
parentElement.appendChild(sonElement) 插入标签
element.remove() 删除标签

操作标签体

语法

获取标签体内容：标签对象.innerHTML
设置标签体内容：标签对象.innerHTML = “新的HTML代码”;
innerHTML是覆盖式设置，原本的标签体内容会被覆盖掉；
支持标签的可以插入标签, 设置的html代码会生效

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>操作标签体</title>
</head>
<body>
<input type="button" value="获取d1的标签体内容" onclick="getHtml()">
<input type="button" value="设置d1的标签体内容" onclick="setHtml()">
<div id="d1">
qq
   <p>ww</p>
</div>

<script>
   var d1 = document.getElementById("d1");
   function getHtml() {
       var html = d1.innerHTML;
       alert(html);
  }

   function setHtml() {
       d1.innerHTML = "<h1>ee</h1>";
  }
</script>
</body>
</html>

小结
获得标签的内容 (一并获得标签)
标签对象.innerHTML;

设置标签的内容(①会把前面的内容覆盖 ②支持标签的)
标签对象,innerHTML = “html字符串”;

操作属性

每个标签Element对象提供了操作属性的方法

方法名	描述	参数
getAttribute(attrName)	获取属性值	属性名称
setAttribute(attrName, attrValue)	设置属性值	属性名称, 属性值
removeAttribute(attrName) 了解即可	删除属性	属性名称

getAttribute(attrName) 获取属性值
setAttribute(attrName, attrValue) 设置属性值
removeAttribute(attrName) 删除属性

案例

目标:按住显示密码按钮的时候，就显示密码框中的密码; 按键松开的时候，就隐藏密码

<body>
    <input type="password" id="pwd">
    <input type="button" value="显示密码" onmousedown="showPassword()" onmouseup="hidePassword()">
    <script
        //1. 给按钮绑定onmousedown事件
        function showPassword() {
            //让密码框的密码显示: 修改密码框的type属性为text
            document.getElementById("pwd").setAttribute("type","text")
        }

        //2. 给按钮绑定onmouseup事件
        function hidePassword() {
            //就是设置密码框的type为password
            document.getElementById("pwd").setAttribute("type","password")

            //getAttribute(属性名)，根据属性名获取属性值
            var type = document.getElementById("pwd").getAttribute("type");
            console.log(type)
        }
    </script>
</body>

案例轮播图

<body>
    <div>
        <img src="../img/banner_1.jpg" id="tu" width="500px" height="130px">
    </div>
    <script>
        var srcList = ["../img/banner_1.jpg","../img/banner_2.jpg","../img/banner_3.jpg"]
        var i = 0
        //实现轮播图，每隔三秒钟切换一张图片
        //1. 怎么每隔三秒钟执行一个任务(定时器)
        setInterval(function () {
            //每执行一次定时任务i ++
            i ++
            //考虑i如果为3，则让i重新设置为0
            if (i == 3) {
                i = 0
            }
            //2. 怎么切换图片: 设置img标签的src属性
            document.getElementById("tu").setAttribute("src",srcList[i])
        },3000)

    </script>
</body>

下拉框二级联动
在注册页面添加籍贯,左边是省份的下拉列表,右边是城市的下拉列表.右边的select根据左边的改变而更新数据

<body>
    <select id="provinceSelect">
        <option value="0">请选择省份</option>
        <option value="1">广东省</option>
        <option value="2">湖南省</option>
        <option value="3">湖北省</option>
    </select>
    <select id="citySelect">
        <option>请选择城市</option>
    </select>

    <script>
        //准备数据
        var cities = [
            [],
            ["广州","深圳","惠州","东莞"],
            ["长沙","岳阳","常德","衡阳"],
            ["武汉","黄冈","宜昌","荆州"]
        ]

        //2. 给省份的下拉框绑定onchange事件
        var provinceSelect = document.getElementById("provinceSelect");

        provinceSelect.onchange = function () {
            //2.1 获取当前选择的省份的所有城市
            var value = provinceSelect.value;
            //当前省份的城市数组
            var items = cities[value];

            //2.2 遍历出每一个城市
            //遍历添加之前，先清除城市下拉框中的所有option，innerHTML覆盖前面的内容
            document.getElementById("citySelect").innerHTML = "<option>请选择城市</option>"
                    var s = "";
                    for(var i = 0;i <items.length;i++){
                        s += "<option>"+items[i]+"</option>";
                    }
			console.log(s);
			document.getElementById("citySelect").innerHTML += s;
	            // for (var i = 0; i < items.length; i++) {
	            //     //每一个城市
	            //     var cityName = items[i];
	            //     //创建option
	            //     var optionElement = document.createElement("option");
	            //     //将城市名设置到option标签体中
	            //     optionElement.innerHTML = cityName
	            //     //将option标签添加到城市下拉框中
	            //     document.getElementById("citySelect").appendChild(optionElement)
	            // }
        }
    </script>
</body>

布谷～dwb

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
JS基础&案例

目录JS基础JS的作用JS的组成JS引入常用的一些方法变量数据类型算数运算函数JS事件事件介绍常见事件事件绑定普通函数方式匿名函数方式事件使用JS的BOMBOM里面的五个对象window: 窗体对象navigator:浏览器导航对象screen:屏幕对象history:历史对象location:当前路径信息JS的DOM操作标签获取标签操作标签操作标签体JS基础什么是JSJS，全称JavaScript，是一种直译式脚本语言，是一种动态类型、弱类型、基于对象的脚本语言，内置支持类型。JS语言和Java
复制链接

扫一扫