Js基础知识总结

Chen__sir__

已于 2022-11-04 10:55:14 修改

阅读量954

点赞数 3

分类专栏：前端文章标签： javascript 开发语言 ecmascript

于 2022-06-23 16:49:07 首次发布

本文链接：https://blog.csdn.net/Chen__sir__/article/details/125430325

版权

本文主要介绍了JavaScript的基础知识，包括输出、调试、事件、循环、表单验证、Map和Set、变量作用域、数据类型、BOM和DOM操作。详细讨论了变量提升、函数提升、正则表达式、本地存储及原型链等核心概念，提供了大量的实践示例和链接资源，适合初学者巩固基础。

摘要由CSDN通过智能技术生成

一、JavaScript基础

输入代码前use strick,使用严格检查模式,放在首行

１.输出

js没有任何打印或或者输出的函数

js显示数据的四种方式

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

操作HTML元素,可以使用document.getElementByid(“id”) 方法

2.调试

利用浏览器f12,在sources中调试,点击代码断点,刷新页面后可debug

3.事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发
onkeyup	键盘输入内容时发生
onkeydown	用户按下键盘按键触发
onload	浏览器已完成页面的加载

4.循环

1.for

和java一样,利用数组的下标输出数组的值.

2.forEach

列出数组的每个元素,function中参数(item,index)下标对应的值和下标

 <script>
        let arr = ['nick','freddy','mike','james'];
        arr.forEach(function(item,index){
   
            console.log(item);
            console.log(index);
        });
    </script>
  //结果:
    nick
	 0
	freddy
 	 1
    mike
 	 2
 	james
 	 3

利用forEach将数组中的所有值乘以特定的数字

<body>
    <p>点击按钮将数组中的所有值乘以特定数字</p>
    <p>乘以<input type="number" id="multiply" value="10"></p>
    <button οnclick="numbers.forEach(myFunction)">点我</button>
    <p>计算后的值: <span id="demo"></span></p>

    <script>
        let numbers = [65, 44, 12, 4];
        function myFunction(item, index, arr) {
            arr[index] = item * document.getElementById("multiply").value;
            demo.innerHTML = numbers;
        }
    </script>
</body>

在这里插入图片描述

3.for in

相较于for循环，for in的功能会更加强大一些，使用范围也会更广，不但可以循环遍历数组，还可以循环遍历对象

4.for of

循环遍历出数组的内容,键值对两个全部输出

5.js表单

表单验证

下面的代码用来判断表单字段(fname)是否存在,也就是input表单中是否有内容,如果不存在则弹出警告

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
   
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
   
        alert("需要输入名字。");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

验证js输入的数字

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<h1>JavaScript 验证输入</h1>

<p>请输入 1 到 10 之间的数字：</p>

<input id="numb">

<button type="button" onclick="myFunction()">提交</button>

<p id="demo"></p>

<script>
function myFunction() {
   
    var x, text;

    // 获取 id="numb" 的值
    x = document.getElementById("numb").value;

    // 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
   
        text = "输入错误";
    } else {
   
        text = "输入正确";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

HTML表单自动验证

required属性会自动判断表单内是否有内容,如果没内容会弹出提示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="demo_form.php" method="post">
  <input type="text" name="fname" required="required">
  <input type="submit" value="提交">
</form>
<p>点击提交按钮，如果输入框是空的，浏览器会提示错误信息。</p>
</body>
</html>

在这里插入图片描述

详细可看:https://www.runoob.com/html/html5-form-attributes.html

在这里插入图片描述

6.Map和Set

Map:

Es6 新增
//学生的成绩,学生的名字
//let names = ["tom","jack","haha"];
//let scores = [100,90,80]; 这样过于麻烦
下面用map键值对操作更方便
let map = new Map([['tom',100],['jack',90],['haha',80]]);
let name = map.get('tom');//通过key获得value 输出100
//添加方法
map.set('admin',1234);//添加一对新的