JavaScript学习笔记

最新推荐文章于 2024-09-20 11:38:47 发布

栖陆@.

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量411

点赞数 1

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/qq_61879501/article/details/123056612

版权

JS输出

外部的JS

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

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

JS显示数据

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

JS语法

JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值

【注】：当您向变量分配文本值时，应该用双引号或单引号包围这个值。

当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。

常见的HTML事件

字符串属性

constructor：返回创建字符串属性的函数
length：返回字符串的长度
prototyep：允许您向对象添加属性和方法

字符串方法

正则表达式

语法

var patt = /runoob/i

/runoob/是一个正则表达式，runoob是一个正则表达式主体（用于检索），i是一个修饰符（搜索不区分大小写）

使用方法（search,replace）

search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

<p>搜索字符串 "runoob", 并显示匹配的起始位置：</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
    var str = "Visit Runoob!"; 
    var n = str.search(/Runoob/i);	/*可以换为search(Runoob)*/
    document.getElementById("demo").innerHTML = n;
}
</script>

replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

<p>替换 "microsoft" 为 "Runoob" :</p>
<button onclick="myFunction()">点我</button>
<p id="demo">Visit Microsoft!</p>
<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace(/microsoft/i,"Runoob");
    document.getElementById("demo").innerHTML = txt;
}

验证API

JavaScript闭包（计数）

<script>
var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
function myFunction(){
    document.getElementById("demo").innerHTML = add();
}
</script>

补充：

使用this.innerHTML时代码将修改自身元素内容。

学习代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JV2</title>
    </head>
    <body>
        <p>点击按钮检测年龄。</p>
        年龄：<input id="age" value="18" />
        <p>是否达到投票年龄？</p>
        <button onclick="myFunction()">点击按钮</button>
        <p id="demo"></p>
        <script>
            function myFunction()
            {
                var age,voteable;
                age=document.getElementById("age").value;
                voteable=(age<18)?"年龄太小":"年龄已达到";
                document.getElementById("demo").innerHTML=voteable;
            }
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JV2</title>
    </head>
    <body>
        <p>如果时间早于20:00，会获得问候“Good day”。</p>
        <button onclick="myFunction()">点击按钮</button>
        <p id="demo"></p>
        <script>
            function myFunction()
            {
                var x="";
                var time=new Date().getHours();
                if(time<20){
                    x="Good day";
                } 
                document.getElementById("demo").innerHTML=x;
            }
        </script>
    </body>
</html>

HTML表单自动验证，如果表单字段为空，required属性会组织表单提交。