JS基础

来源：互联网发布：微课录屏软件怎么念编辑：程序博客网时间：2024/06/14 07:19

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>

更多信息参见:
http://www.w3school.com.cn/js/js_htmldom_events.asp
http://www.w3school.com.cn/jsref/dom_obj_event.asp

JS Window对象

BOM（Browser Object Model）浏览器对象模型。使JavaScript有能力与浏览器“对话”。所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

参考手册：http://www.w3school.com.cn/jsref/dom_obj_window.asp

JS Window对象

阅读全文

0 0