JS基础

最新推荐文章于 2022-11-02 12:49:00 发布

rainyRs

最新推荐文章于 2022-11-02 12:49:00 发布

阅读量404

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/rainyRs/article/details/73331181

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JS简介

JavaScript主要用来向HTML页面添加交互行为，是一种解释性脚本语言。可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。具有跨平台特性，在绝大数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

常见用途：
1. 嵌入动态文本于HTML页面；
2. 对浏览器事件做出响应；
3. 读写HTML元素；
4. 在数据提交到服务器之前进行数据验证；
5. 检测访客的浏览信息；
6. 控制cookies，包括创建和修改等；
7. 基于Node.js技术进行服务器端编程。

组成：
1. ECMAScript，描述了该语言的语法和基本对象；
2. DOM（文档对象模型），描述处理网页内容的方法和接口。
3. BOM（浏览器对象模型），描述与浏览器进行交互的方法和接口。

JS数据类型

JS对象

JavaScript 中的所有事物都是对象。JavaScript 提供多个内建对象，比如 String、Date、Array 等等。创建新对象有两种不同方法：
1. 定义并创建对象的实例；
2. 使用对象构造器（函数）；

创建直接的实例：

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

//或
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

使用对象构造器:

function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
}

//一旦您有了对象构造器，就可以创建新的对象实例，就像这样：
var myFather=new person("Bill","Gates",56,"blue");
var myMother=new person("Steve","Jobs",48,"green");

说明：JavaScript 基于 prototype，而不是基于类的。

JS流程语句

这里写图片描述

throw 语句允许我们创建自定义错误：

<!DOCTYPE html>
<html>
    <body>

    <script>
        function myFunction()
        {
            try
            { 
                var x=document.getElementById("demo").value;
                if(x=="")    throw "值为空";
                if(isNaN(x)) throw "不是数字";
                if(x>10)     throw "太大";
                if(x<5)      throw "太小";
            } catch(err) {
                var y=document.getElementById("mess");
                y.innerHTML="错误：" + err + "。";
            }
        }
    </script>

    <h1>我的第一个 JavaScript 程序</h1>
    <p>请输入 5 到 10 之间的数字：</p>
    <input id="demo" type="text">
    <button type="button" onclick="myFunction()">测试输入值</button>
    <p id="mess"></p>

    </body>
</html>

JS表单验证

检查用户是否已填写表单中的必填（或必选）项目：

<html>

    <head>
        <script type="text/javascript">
            function validate_required(txt, msg) {
                with(txt) {
                    if(value == null || value == "") {
                        alert(msg);
                        return false;
                    } else {
                        return true;
                    }
                }
            }

            function validate_form(txt) {
                with(txt) {
                    if(validate_required(email, "Input should not be null!") == false) {
                        email.focus();
                        return false;
                    } else {
                        return true;
                    }
                }
            }
        </script>
    </head>

    <body>

        <form action="http://www.w3school.com.cn/b.asp" onsubmit="return validate_form(this)" method="POST">
            Email:
            <input type="text" name="email" size="30">
            <input type="submit" name="submit" value="Submit">
      </form>

    </body>
</html>

E-mail 验证：
输入的数据必须包含@符号和点号(.)，同时，@不可以是邮件地址的首字符，并且@之后需有至少一个点号。

<html>
<head>
<script type="text/javascript">

function validate_email(field,alerttxt)
{
    with (field){
        apos = value.indexOf("@");
        dotpos = value.lastIndexOf(".");
    if (apos < 1 || dotpos - apos < 2){
        alert(alerttxt);
        return false;
    } else {return true}
  }
}

function validate_form(thisform)
{
with (thisform)
  {
  if (validate_email(email,"Not a valid e-mail address!")==false)
    {email.focus();return false}
  }
}
</script>
</head>

<body>
<form action="http://www.w3school.com.cn/b.asp" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

with语句：用于设置代码在特定对象中的作用域。详情参见: http://www.w3school.com.cn/js/pro_js_statements_with.asp

JS DOM操作

DOM 定义了访问 HTML 和 XML 文档的标准，DOM 标准被分为 3 个不同的部分：
1. 核心 DOM - 针对任何结构化文档的标准模型
2. XML DOM - 针对 XML 文档的标准模型
3. HTML DOM - 针对 HTML 文档的标准模型
这里写图片描述

DOM Event

简单示例：

<html>
    <body>
        <script>
            function show_prompt(){
                var name = prompt("This is a prompt box!", "CiCi")
                if(name==""){
                    alert("invalid input!")             
                } else if(name!=null) { 
                    document.write("Hello," + name + "! How are things?")
                }
            }
        </script>
        <input type="button" value="show prompt box" onclick="show_prompt()">
    </body> 
</html>