3.JavaScript学习笔记

最新推荐文章于 2024-10-01 22:12:42 发布

fx-potter

最新推荐文章于 2024-10-01 22:12:42 发布

阅读量185

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_39264084/article/details/108518640

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

3.JavaScript

3.JavaScript

一般在中写函数，在中当事件发生时调用该函数

<head>
    <script>
        function myfunction(){}
    </script>
    
    <!--外部引用：<script src="myScript.js"></script>-->
</head>

3.1 基本语法

3.1.1 输出

JavaScript没有任何打印和输出函数

输出数据：

window.alert()弹出警告框

<script>
    window.alert("这是一个警告框，确定要继续吗？");
</script>

document.write()将内容写到HTML文档

<script>
    function myFunction(){
        document.write(Date());
    }
</script>
<body>
    <p>显示时间</p>
    <button onclick="myFunction()">点我</button>
</body>

innerHTML写入到HTML元素

<script>
    function myInner(){
        document.getElementById("insert").innerHTML+="这是添加的innerHTMl内容"
    }
</script>
<body>
    <p id="insert" onclick="myInner()">在此处添加：</p>
</body>

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

<body>
    <p>这是一个向浏览器控制台的写入</p>
    <script>
        a=5; b=6; c=a+b;
        console.log(c);
    </script>
</body>

3.1.2 变量、数组、对象、函数及作用域

var来定义变量、//单行注释，/**/多行注释

<script>
    var x = 5 + 6;
	var lastName = "Potter";       //字符串
	var cars = ["Saa","Voo","BMW"];//数组
	var cars = new Array("Saa","Voo","BMW");
    var cars = new Array();
    cars[0] = "Saa";
    var person = {firstName:"John",lastName:"Potter"，
                 fullName:function(){
                     return this.firstName + " " + this.lastName
                 }//对象方法
    };//对象(键值对的容器)
    person.lastName; person["lastName"];//访问对象属性
    person.fullName();
    
</script>

作用域：是可访问变量的集合，函数内(var声明的)的为局部变量，函数外的为全局变量(函数内未用var声明的为全局变量)。
函数参数：只在函数内起作用，是局部变量
在HTML中，全局变量是window对象，所有变量都属于window对象(访问：window.全局变量名)
变量生命周期：局部变量在函数执行完销毁，全局变量在页面关闭后销毁

3.1.4 字符串、运算符、条件语句、循环

基本与java基础相同

注意：

JavaScript标签与break一起使用

outerloop:
for (var i = 0; i < 10; i++)
{
    innerloop:
    for (var j = 0; j < 10; j++)
    {
        if (j > 3)
        {
            break;
        }
        if (i == 2)
        {
            break innerloop;
        }
        if (i == 4)
        {
            break outerloop;
        }
        document.write("i=" + i + " j=" + j + "");
    }
}

typeof 返回javascript变量的额数据类型，constructor返回javascript变量的构造方法

typeof "John"                 // 返回 string 
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object

对象是JavaScript Array或JavaScript Data时，就无法通过typeof判断类型

"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function () {}.constructor         // 返回函数 Function(){ [native code] }j

使用constructor查看对象是否为数组

function isArray(myArray){
    return myArray.constructor.toString().indexOf("Array") > -1;
}

3.2 事件

事件：是发生在HTML元素上的事情；

事件触发时JavaScript可以执行一些代码；

触发事件：可以是浏览器行为，也可以是用户行为：如下

页面加载、关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的非法性

3.3 正则表达式

3.3.1 定义

是由一个字符序列形成的搜索模式，可用于所有文本搜索和文本替换

3.3.2 语法：/主体/修饰符(可选)

常用于两个字符串方法：search()、replace()

search()：检索与正则表达式匹配的子字符串，并返回子串的起始位置
replace()：替换一个与正则表达式匹配的子串

<script>
    function mySearch(){
        var str = "Visit Runoob!";
        var n = str.search(/Runoob/i);
        document.getElementById("demo1").innerHTML = n;
    }
    function myReplace(){
        var str = "Visit Runoob!";
        var txt = str.replace(/microsoft/i,"Runoob");
        document.getElementById("demo2").innerHTML = txt;
    }
</script>
<body>
    <button onclick="mySearch()">search()点我</button>
    <p id="demo1">Visit Runoob</p>
    <button onclick="myReplace()">replace()点我</button>
    <p id="demo2">Visit Microsoft</p>
</body>

正则表达式修饰符

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lbSvIopy-1599728865844)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1599574496691.png)]$

正则表达式模式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PEacoaja-1599728865846)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1599574608895.png)]$

[^abc]：匹配除了[…]中字符(即abc)的所有字符

[a-z]：表示一个区间，匹配所有的小写字母

[\w]：匹配字母、数字、下划线等价于[A-Za-z0-9_]

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Onn5QMe-1599728865848)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1599574887240.png)]$

\d：匹配一个数字，等价于[0-9]

{n}：匹配确定的n次

{n,}：匹配至少n次

{n,m}：匹配至少n次，至多m次

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m0FCTxfr-1599728865852)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1599628848177.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PUkkFYQn-1599728865854)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1599579599915.png)]$

new RegExp()：正则表达式对象的两个方法：

test()：检测一个字符串是否匹配某个模式，如果string中有匹配的文本，返回true，否则返回false
exec()：检索字符串中的正则表达式匹配，返回一个数组，存放匹配的结果，未匹配到返回null
注意：/^[…]$/.test(str)、/^[…]$/.exec(str)，当str与[…]的模式完全匹配时才是true，不只是包含一个子串而已

<script>
    var patt1 = new RegExp("e");
    document.write(patt1.test("The best things in life are free"))//结果：true
    document.write(patt1.exec("The best things in life are free"))//结果：e
</script>

<script>
    //JS判断输入字符串是否为数字、字母、下划线
    function isValid1(str){return /^\w+$/.test(str);}
    //JS判断输入字符串是否全为字母
    function isValid2(str){return /^[a-zA-z]+$/.test(str);}
    //JS判断输入字符串是否全为数字
    function isValid3(str){return /^\d+$/.test(str);}
 
    var str1="123ab_",str2="123ab_$#";
    var str3="aaa",str4="aaa123";
    var str5="123456",str6="12345a";
    document.write(isValidn(strn));
</script>

//正则表达式表单验证
/*是否带有小数*/
function    isDecimal(strValue )  {  
   var  objRegExp= /^\d+\.\d+$/;
   return  objRegExp.test(strValue);  
}  

/*校验是否中文名称组成 */
function ischina(str) {
    var reg=/^[\u4E00-\u9FA5]{2,4}$/;   /*定义验证表达式*/
    return reg.test(str);     /*进行验证*/
}

/*校验是否全由8位数字组成 */
function isStudentNo(str) {
    var reg=/^[0-9]{8}$/;   /*定义验证表达式*/
    return reg.test(str);     /*进行验证*/
}

/*校验电话码格式 */
function isTelCode(str) {
    var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
    return reg.test(str);
}

/*校验邮件地址是否合法 */
function IsEmail(str) {
    var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
    return reg.test(str);
}

3.4 JavaScript 验证 API

checkValidity()：input元素合法返回true，否则返回false

validationMessage：浏览器错误提示信息

<script>
    function myFunction(){
        var inpObj=document.getElementById("id1");
        if(inpObjl.checkValidity()==false){
            document.getElementById("demo").innerHTML=inpObj.validationMessage;
        }
        else{
            document.getElementById("demo").innerHTML="输入正确"；
        }
    }
</script>
<body>
    <input id="id1" type="number" min="100" max="300" required>
    <button onclick="myFunction()">验证</button>
    <p id="demo"></p>
</body>

3.5 JavaScript JSON

JavaScript Object Notation

是用于存储、传输数据的格式(JSON格式仅仅是一个文本)，常用于服务器向网页传输数据

JSON语法：

JSON格式化后为JavaScript对象(JSON格式在语法上与创建JavaScript对象是相同的，JavaScript程序很容易的将JSON数据转换为JavaScript对象)

数据为：键值对(都在双引号中)，数据间逗号隔开
大括号保存对象，方括号保存数组

//json对象
{"name":"Runoob","url":"www.runoob.com"};
//等价于JavaScript中的{name:"Runoob",url:"www.runoob.com"};

//json数组(数组可以包含多个对象)
"sites":[
    {"name":"Runoob","url":"www.runoob.com"},
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}];

JSON字符串转换为JavaScript对象

通常从服务器读取JSON数据，并在网页中显示

首先：创建JavaScript字符串，字符串为JSON格式的数据
然后：使用JavaScript内置函数JSON.parse()将字符串转为JavaScript对象

var text = '{"sites":[' + 
    '{"name":"Runoob","url":"www.runoob.com"},' + 
    '{"name":"Google", "url":"www.google.com"},' + 
    '{"name":"Taobao", "url":"www.taobao.com"}]}'
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name+" "+obj.sites[1].url;