JavaScript 基础入门_javascript入门-CSDN博客

本文链接：https://blog.csdn.net/YUELEI118/article/details/124357034

JavaScript视频
 Ajax视频
学习笔记

JavaScript

JavaScript是一门脚本语言

脚本语言和非脚本语言的区别：
程序的目标文件可以用记事本打开的就是脚本语言，JAVA的目标程序是Class文件，用记事本打不开

包含三大块

DOM编程：

DOM是指对HTML中的节点进行操作。例如：div span .class #id
对网页的内容进行增删改的过程

BOM编程

对浏览器的操作，例如：后退，刷新，地址栏等

ECMAScript

JavaScript的核心语法

总结：DOM和BOM的关系

BOM的顶层对象是：window
DOM的顶层对象是：document
BOM包含DOM

1. 在HTML中引入JavaScript

在HTML的任何位置都可以使用

<Script>
	在Script标签中包裹的内容可以在HTML的任意位置使用
</Script>

引入外部JavaScript文件

<Script src="文件地址"></Script>

HTML页面的组件触发动作时执行

2. JavaScript的语法

JavaScript是一种弱类型语言

2.1 声明变量`var`

声明变量使用关键字：var

一个变量的数据类型是由等号右侧的值来决定的。
变量的类型会随着赋值的不同而改变

var a = 123;  // a 是number类型
a = "abc"; 		//现在 a 就是String类型

2.2 数据类型

数据类型：

原始类型：undefined boolean number string null
引用类型：object

undefined类型

var a; //没有赋值的变量是undefined类型
var b = undefined;//将变量b赋值为undefined，也是undefined类型

number类型及相关的函数

number类型包含以下3部分：

数字：无论整数、小数、正数、负数······。
NaN ：不是一个数字。当数字与某一数据类型的值进行数学运算，程序认为数字参与的运算应该得出一个数字，但是得出的不是一个数字，结果就是number类型的结果NaN。例如：1 + undefined
特殊情况：数字 + 字符串 ，当+号两边有一边是字符串，会当作字符串拼接。
Infinity：无穷大。当除数为0时，结果为Infinity。

判断是不是数字isNaN(变量名);

作用：判断是不是数字，结果为true就不是数字。
isNaN是is not a number的缩写，不是类型中的那个NaN

示例

    var a = 123;
    var b = "abc";
    alert(isNaN(a)); //false 是数字
    alert(isNaN(b)); //true 不是数字

取整、向上取整、字符串转换为数字

    alert(parseInt(3.14)); //3 取整，小数部分直接切掉
    alert(Math.ceil(3.14)); //4 向上取整，只要有小数部分，全部进位
    alert(parseFloat("3.2") + 1); //4.2 字符串转换为数字

Boolean类型及相关函数

将其他数据类型转换为Boolean类型：Boolean(值);

    alert(Boolean(1)) //true
    alert(Boolean(0)) //false
    alert(Boolean("")) //false
    alert(Boolean("a")) //true
    alert(Boolean(null)) //false
    alert(Boolean(undefined)) //false
    alert(Boolean(NaN)) //false
    alert(Boolean(Infinity)) //true

在必需Boolean类型的语句中，如果不是Boolean类型会自动调用Boolean(值);函数

    var username = "jack"
    if (username) //if的判断条件必须为Boolean类型，程序会自动调用Boolean()方法转换为Boolean类型
        alert("欢迎你："+ username);
    else
        alert("用户名不能为空")
//输出：欢迎你：jack

    var username = ""
    if (username) //if的判断条件必须为Boolean类型，程序会自动调用Boolean()方法转换为Boolean类型
        alert("欢迎你："+ username);
    else
        alert("用户名不能为空")
//输出：用户名不能为空

String字符串类型及相关函数

创建字符串变量

var s1 = 'string';
var s2 = "string";
var s3 = new String('string');

alert(typeof s1);//'string'
alert(typeof s2);//'string'
alert(typeof s3);//'object'

总结：

单引号和双引号都可以用于标识字符串
创建字符串类的对象也可以创建字符串，类型为object

字符串相关的函数

var s = "abcdefghe";
alert(s.substring(2,4));//'cd' 截取字符串，从下标2截取到4
alert(s.substr(2,4));//'cdef' 截取字符串，从下标2开始截取4个字符
alert(s.indexOf('e'));// 4 e字符第一次出现的位置
alert(s.lastIndexOf("e")); // 8 返回e最后出现的位置
alert(s.charAt(4)); //'e' 索引为4的字符
alert(s.split('d'));//'abc','efghe' 切隔字符串，返回字符串数组
alert(s.toUpperCase());//'ABEDEFGHE' 返回大写字符
alert(s.replace('e','$'));//'abcd$fghe' 将第一个符合条件的字符串替换
alert(s.replaceAll('e','$'));//'abcd$fgh$' 将符合条件的所有字符串替换
alert(s.trim());// 去除字符串s的前后空格

Object 类及`prototype`属性

定义类，创建类对象

	//类的第一种定义方式
    function fun1(a, b) {
        alert(a + b) ;
    }
  	//类的第二种定义方式
    fun2 = function (a, b) {
        alert(a + b) ;
    }
    var obj1 = new fun1(1,2);//3 通过new关键字创建对象，fun1是类
    fun1(1,2); // 3 直接调用，fun1是函数
    var obj2 = new fun2(3,4);// 7

总结：

类与函数的定义方式相同。
类与函数只能从使用的方式来区分。只要使用new关键字，那就是类。如果直接调用，则是函数。所以一个方法体，既可以是方法也可以是类。

定义类的属性与构造方法

    function student(name, age, gender) {
        this.name = name;
        this.age = age;
        this.gender = gender;
    }
    //类的定义与构造函数是一体，类名就是构造函数的方法名
    var s = new student('jack', 16, true);//带参构造
    alert(s.name);
    var s1 = new student('zhangsan',30);//带参构造
    alert(s1.name)
    var s2 = new student();// 无参构造
    s2.age = 16
    alert(s2.age);

总结：

类中的属性由this.属性名直接定义。
不需要自定义构造方法，并且同时具有无参和有参的构造方法。

定义类的方法

    function student(name, age, gender) {
        this.name = name;
        this.age = age;
        this.gender = gender;
        //在类中通过this关键字，定义方法。
        this.getName = function(){
            return this.name;
        }
    }

    var s = new student('jack', 16, true);
    alert(s.getName());
    //通过prototype关键字给类添加方法
    //第一种方法
    function getAge(){
        return this.age;
    }
    student.prototype.getAge = getAge
    alert(s.getAge());
    //第二种方法
    student.prototype.getGender = function (){
        return this.gender;
    }
    alert(s.getGender())

总结：

在类中定义。
通过类的prototype属性动态的给类扩展方法。共有两种方式。

prototype属性扩展类方法的应用示例：
作用：给原生的Array类增加max方法，返回Array数组中最大的元素

    function array_max( ){
        var i, max = this[0];
        for (i = 1; i < this.length; i++)
        {
            if (max < this[i])
                max = this[i];
        }
        return max;
    }
    Array.prototype.max = array_max;
    var x = new Array(1, 2, 3, 4, 5, 6);
    var y = x.max( );
    alert(y);

2.3 判断数据类型的运算符 `typeof`

使用方法：typeof + 变量名
typeof的运算结果是以下6个字符串之一

“undefined”
“number”
“string”
“boolean”
“object”
“function”

//判断a的类型
var a = 123; alert(typeof a);  // "number"
var a = "abc";alert(typeof a);  // "String"
var a = true;alert(typeof a);   // "boolean"
var a ; alert(typeof a);        // "undefined"
var a = null; alert(typeof a);  // "object"
function fun1() {}
alert(typeof fun1);// "function"

	var a = 123；
    if (typeof a == "number") {
        alert("a是number类型");    //a是number类型
    }
    typeof NaN; //	"number"

2.4 函数`function()`

函数与方法的区别：
函数：单独存在，直接使用
方法：存在于类中，使用时必须由类的实例化对象或者类名来间接的调用

函数的声明方式：

第一种：

    function fun1(a, b) {
        return a + b;
    }

第二种

    fun2 = function (a, b) {
        return a + b;
    }

参数与返回值

形参前面不需要规定数据类型，也不需要返回值类型

示例：

    function fun1(a, b) {
        return a + b;
    }

    alert(fun1(1,2)); // 3  返回了1+2的和
    
    alert(fun1("abc","def")) // abcdef   返回字符串拼接，在JavaScript中+也可以用作字符串拼接
    
    alert(fun1(1));		// NaN	 
    //NaN表示不是一个数字。实参1被形参a接收，b没有传参，是undefined类型，一个数字和一个undefined类型结合，结果就是NaN
    
    alert(fun1(1,"abc")); // 1abc
    //当 "+" 的两边有一边为字符串，那么这个+就被默认用来做字符串拼接

    
    alert(fun1("X"))	//Xundefined  
    //实参"X"被形参a接收，b没有传参，是undefined类型，一个字符串类型和一个undefined类型进行了字符串拼接，结果就是NaN
    
    alert(fun1(null));  // NaN  null和undefined类型结合就是NaN
    
    alert(fun1)			// function fun1(a, b) {
      					  	return a + b;
   						   }
   	//直接把整个函数作为字符串输出
	alert(fun1(true,false)) //1 返回的是number类型
	
	//还有其他组合方式未发掘

由以上的结果可以得出：

在使用函数时传参一定注意传入实参的数据类型是否正确，因为无论你传与不传，传的全与不全，类型对与不对，函数都会被调用。
返回值类型不可控，所以在使用返回值时最好对其进行typeof类型判断

2.5 全部变量和局部变量

全局变量声明在函数体外，局部变量声明在函数体内。
全局变量在浏览器关闭前会一直存在于内存中，占用系统资源，尽量避免使用全局变量

特殊情况：在函数体内没有使用var关键字声明的变量是全局变量

2.6 控制语句

条件控制
if
swith
循环
while
do…while…
for
循环控制
break
continue
JavaScript特有的
for…in…
with

示例

var s = [true,123,"123",3.14,null,undefined,NaN,Infinity]
for (const sKey in s) {
    alert(s[sKey])
}

2.7 内置类

Date()类

        var nowTime = new Date();//获取当前时间。
		var year = nowTime.getFullYear();// 年
        var month = nowTime.getMonth() + 1; // 月  0-11
        var day = nowTime.getDate(); // 日
        var week = nowTime.getDay();// 星期 0-6

3. DOM

文档对象模型，是一种与浏览器、平台、语言的接口，使得你可以访问页面其他的标准组件。

3.1 常用事件

焦点事件
blur 失去焦点
focus 获得焦点
鼠标点击事件
click 鼠标单击
dblclick 鼠标双击
mousedown 鼠标按下
mouseup 鼠标弹起
鼠标移动事件
mouseover 鼠标经过
mousemove 鼠标移动
mouseout 鼠标离开
键盘事件
keydown 键盘按下
keyup 键盘弹起
表单事件
reset 表单重置
submit 表单提交
组件选择或内容改变
change 下拉列表选中项改变，或文本框内容改变且失去焦点
select 文本被选中
页面
load 页面加载完毕

3.2 标签与事件绑定

第一种：标签中绑定动作的事件
第二种：通过id绑定函数
第三种：通过id绑定匿名函数（建议使用）

<button onclick="show()">标签内注册的点击事件</button>
<button id="buttonClick1">通过id绑定函数</button>
<button id="buttonClick2">通过id绑定匿名函数</button>

<script>
    function show() {
        alert("标签内注册的点击事件");
    }

    function show1() {
        alert('通过id绑定函数')
    }

    document.getElementById('buttonClick1').onclick = show1;//注意这种方式函数不能加括号

    document.getElementById('buttonClick2').onclick = function () {
        alert('通过id绑定匿名函数')
    }
</script>

3.3 页面加载事件 onload

错误的顺序

<script>
    document.getElementById('buttonClick').onclick = function () {
        alert('代码的执行顺序')
    }
</script>
<button id="buttonClick">执行顺序</button>

原因：当代码按顺序执行到document.getElementById('buttonClick')时，由于button 组件还没有注册，所以无法通过id来获取组件，执行时报错Cannot set properties of null (setting 'onclick')。

默认使用的标准写法

<script>
    window.onload = function () {
        document.getElementById('buttonClick').onclick = function () {
            alert('代码的执行顺序')
        }
    }
</script>
<button id="buttonClick">执行顺序</button>

总结：将需要绑定事件的代码全部放入window.onload事件中，以保证代码的执行顺序不会出错

3.4 键盘事件

键盘按下后浏览器调用键盘按下事件的绑定函数，传入参数
通过传入参数的key、code等属性可获得按键的值

<script>
    window.onload = function (){
        document.getElementById('text').onkeydown = function (event) {
            if (event.key == 'Enter')alert('回车');
        }
    }
</script>
<input type="text" id="text"/>

3.5 void

void已知的唯一用法：

<a href="javascript:void(0)" onclick="window.alert('void(0)用在哪儿，不知道')">
    点击后不跳转，继续保持超链接的状态
</a>

3.6 innerText innerHTML

在这里插入图片描述

<script>
    window.onload = function () {
        var s = "<p style=\"color:red;\">这是div中的测试代码</p>";
        document.getElementById("divId1").innerText = s;
        document.getElementById("divId2").innerHTML = s;
    }

</script>
<p style="color:red;">这是div中的测试代码</p>
</br>
<div class="divClass" id="divId1"></div>
</br>
<div class="divClass" id="divId2"></div>

总结：

两个属性都是给标签增加内容
innerText属性：以纯文本的方式设置内容
innerHTML属性：会将文本的内容当作Html的代码执行

3.7 正则表达式

常用的正则表达式

元字符

代码	说明
.	匹配除换行符以外的任意字符
\w	匹配字母或数字或下划线或汉字
\s	匹配任意的空白符
\d	匹配数字
\b	匹配单词的开始或结束
^	匹配字符串的开始
$	匹配字符串的结束

重复次数

代码/语法	说明
*	重复零次或更多次
+	重复一次或更多次
?	重复零次或一次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次

反义
有时需要查找不属于某个能简单定义的字符类的字符。比如想查找除了数字以外，其它任意字符都行的情况，这时需要用到反义：

代码/语法	说明
\W	匹配任意不是字母，数字，下划线，汉字的字符
\S	匹配任意不是空白符的字符
\D	匹配任意非数字的字符
\B	匹配不是单词开头或结束的位置
[^x]	匹配除了x以外的任意字符
[^aeiou]	匹配除了aeiou这几个字母以外的任意字符

创建正则表达式对象
在正则表达式两边加“/”，千万不要加" "

	var regExp = /正则表达式/;

用正则表达式验证字符串
作用：用test()方法，验证字符串emailAddress 是否符合 email的正则表达式

	var emailAddress = "zhangsan@qq.com";
	//注意正则表达式的写法，没有引号
    var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    var ok = emailRegExp .test(emailAddress );
    //如果ok为true则符合，为false则不符合

3.8 复选框

在这里插入图片描述
click事件，checked属性值为true被选中。

<script>
    /*
    *   复选框的全选与取消全选的联动
    */

    window.onload = function () {
        var allCheck = document.getElementById('allchk');
        //通过getElementsByName方法获得name属性为aihao的checkbox数组
        var checks = document.getElementsByName("aihao");
        //通过全选按钮让子复选框全选或取消全选
        allCheck.onclick=function () {
            //遍历checkbox数组，复选框组 是否被选中与 全选复选框 的值一致
            for (const checksKey in checks) {
                checks[checksKey].checked=this.checked;
            }
        }
        //复选框组 的全选或不选 决定 全选复选框 的值

        // 通过for循环给复选框组的每个复选框绑定点击事件
        for (const checksKey in checks) {
            checks[checksKey].onclick = function () {
                //计数器，统计复选框组中有几个被选中
                var checkCount = 0;
                for (const check in checks) {
                    if (checks[check].checked)checkCount++;
                }
                
                /*
                //如果 复选框组 全被选中，则 全选复选框也是被选中状态
                if (checks.length === checkCount)allCheck.checked = true;
                else allCheck.checked = false;
                */
                //上面if判断语句可简化。IDEA系统自动简化。
                allCheck.checked = (checks.length === checkCount);
            }
        }
    }
</script>
<form>
    <input type="checkbox" id="allchk"/>全选/取消全选
    <input type="checkbox" name="aihao" id="smoke"/>抽烟
    <input type="checkbox" name="aihao" id="drink"/>喝酒
    <input type="checkbox" name="aihao" id="hand"/>烫头
</form>

3.9 下拉列表框

触发change事件：

<script>
    window.onload=function () {
        document.getElementById('selectList').onchange=function () {
            alert(this.value);
        }
    }
</script>
    <select id="selectList">
        <option >-请选择-</option>
        <option value="01">山西</option>
        <option value="02">山东</option>
        <option value="03">河南</option>
        <option value="04">河北</option>
    </select>

4 BOM

4.1 窗口的打开与关闭

window.open("url",'方式')

默认在新窗口打开url

window.close();

关闭当前页面，与点击浏览器的关闭当前页面的效果一样。

    <input type="button" value="打开新窗口" onclick="window.open('https://www.baidu.com');"/>
    <input type="button" value="在当前窗口打开" onclick="window.open('https://www.baidu.com','_self');"/>
    <input type="button" value="在父窗口打开" onclick="window.open('https://www.baidu.com','_parent');"/>
    <input type="button" value="在顶层窗口打开" onclick="window.open('https://www.baidu.com','_top');"/>
    <input type="button" value="在新窗口打开同路径下的html网页" onclick="window.open('typeof.html');"/>
    <input type="button" value="关闭当前窗口" onclick="window.close();"/>

4.2 确认框 confirm

window.confirm("确认删除数据吗？")；

确认框会弹出让用户重新确定的选择弹窗，返回值为Boolean

<script>
    function del(){
        if (window.confirm("确认删除数据吗？")){
            alert('正在删除数据');
        }else{
			alert('取消');
		}
    }
</script>
<input type="button" value="删除数据" onclick="del()"/>

4.3 定时器 Interval

v = window.setInterval('方法()',间隔时间);

返回整数v，v是这个定时器的编号，每执行一次生成一个新的编号v

window.clearInterval(v);

停止编号为v的定时器。

<script>
        function divShow(){
            var nowTime = new Date();//获得当前时间，每次都需要获取一次
            document.getElementById('show').innerHTML = nowTime.toLocaleString();
        }
        window.onload=function (){
            document.getElementById('showTime').onclick=function () {
            //变量v没有使用var关键字声明，目的让v成为全局变量，方便关闭定时器时使用
                v = window.setInterval('divShow()',100);//定时执行函数
            }
            document.getElementById('stopTime').onclick=function () {
                window.clearInterval(v);
            }
        }
</script>
</br>
<input type="button" id='showTime' value="显示时间"/>
<input type="button" id='stopTime' value="停止时间"/>
<div id="show"></div>

4.4 后退 history

和点击浏览器的后退和前进的效果时一样的。

window.history.back()与window.history.go(-1)都是后退

    <input type="button" value="后退" onclick="window.history.back()"/>
    <input type="button" value="后退" onclick="window.history.go(-1)"/>
    <input type="button" value="前进" onclick="window.history.go(1)"/>

4.5 向后端发送请求

向服务器发送请求

	document.location.href = " 请求路径 ";
	document.location = " 请求路径 ";
	windows.location.href = " 请求路径 ";
	windows.location = " 请求路径 ";

5. JS实现的小功能

全屏，按下F11的效果

<input type="button" onclick="fullScreen()" value="全屏"/>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    //实现全屏
    function fullScreen() {
        // documentElement 属性以一个元素对象返回一个文档的文档元素
        var el = document.documentElement;
        el.requestFullscreen||el.mozRequestFullScreen||el.webkitRequestFullscreen||el.msRequestFullScreen?
            el.requestFullscreen()||el.mozRequestFullScreen()|| el.webkitRequestFullscreen()||el.msRequestFullscreen():null;
    }

</script>

验证输入的是否为身份证号码

<input type="text" id="idCardNum"/>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    var regAge1 = /^([1-6][1-9]|50)\d{4}(19|20|21|22)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
    var regAge2 = /^[0-9]{0,17}$/;
    $("#idCardNum").bind(' input propertychange ', function (e) {
        var idNum = $("#idCardNum").val();
        if (!regAge1.test(idNum) && !regAge2.test(idNum)) {
            alert("输入的身份证号码有误")
        }
    });
</script>

HTML 基本标签

html5

<!doctype html>

img 图片

<img src="图片地址" width="宽度" title="鼠标在图片上悬停显示的文字" alt="图片走丢了">

a 超链接

target属性
可赋值：
_blank :新窗口（默认）
_self: 当前窗口打开
_parent:父窗口
_top:顶层窗口

<a href="网址" target="_blank">可点击的图片、文字</a>

ol ul li 有序、无序列表

type属性标签前序号的样式

有序列表

 <ol type="i">
        <li>水果
            <ol type="A">
                <li>苹果</li>
                <li>西瓜</li>
            </ol>
        </li>
</ol>

form 表单

form 表单
action属性是表单提交的服务器地址，method属性为发送方式

 <form action="http://localhost:63342/" method="get">

表单提交按钮
没有name属性，value的值为按钮上显示的文字

<input type="submit" value="登录">

文本框

        <input type="text" name="username"/>

密码输入框

<input type="password" name ="userpwd"/>

单选组合按钮
相同的name值为一组，组内单项选择。checked：默认选中，提交时提交value值。

			<input type="radio" name="gender" value="1" checked/>男
            <input type="radio" name="gender" value="0"/>女

复选框
相同name为一组，checked：默认选中

			<input type="checkbox" name="interest" value="smoke" checked/>抽烟
            <input type="checkbox" name="interest" value="drink"/>喝酒
            <input type="checkbox" name="interest" value="hair"/>烫头

下拉选择框
selected：默认选中

			<select name="edu">
                <option value="xx" selected>小学</option>
                <option value="zx">中学</option>
                <option value="dx">大学</option>
            </select>

选择框

属性：multiple：可以多选，size：同时显示条数

        <select multiple="multiple" size="3">
            <option>小学</option>
            <option>初中</option>
            <option>高中</option>
            <option>大专</option>
            <option>本科</option>
            <option>研究生</option>
            <option>博士</option>
        </select>

文本域
属性：rows：行数，cols：列数

<textarea name="self" rows="3" cols="20"></textarea>

file控件

<input type="file" name="dir"/>

隐藏控件
作用：提交时会随着随着数据一起提交到服务器，但是在网页上不显示。

<input type="hidden" name="hidden" value="123"/>

清空表单

<input type="reset" value="清空">

只读属性 readonly
禁用属性 disable
只读属性：内容是只读的，不能修改，但是可以提交
禁用属性：内容不可修改，也不能提交

        <input type="text" name="hidden" value="只读属性" readonly />
        <input type="text" name="hidden" value="禁用属性" disabled/>