什么是js和js的基本语法

Posted 2020-08-23

时间：2016年12月15日

先讲讲基础语法；

大部分是来操作表单；

js动态效果和数据交互（ajax？）

js也有自己的API

js大部分的DOM操作都是针对input的。

案例学习，对注册页面的简单校验，对于空值或者错误的值先弹框，后面再学习在页面上写数据。

 

js是一种脚本语言，轻量级的，可插入到html页面中运行的语言，和java半毛钱的关系都没有。

js有三大块内容：

ECMAScript java的基础语法

BOM 浏览器对象模型

DOM 文档对象模型

以后jquery用的也很多，但是先对javascript的基础语法要很了解。

js可以使页面动起来，提高交互性。

所有的类型都用var来代替，就像java里面的Object。

<script type="text/javascript">
    console.log("hello, world!");
</script>

在html的head中加入js的标签

在js中如果有一行报错，那么后面的语句都不会运行了。

 

js变量定义

js运算符

var a = "a";

console.log(a-2); // 打印NaN

console.log("3"-2);    // 打印的是1

console("3"+0+2);     // 打印出来的是5

 

js数组可以存任意类型的数据。

表达式的真假判断：

js数组也有length属性

js数组遍历：for(i in arr) { }

i是arr的索引，从0到arr.length()-1。

 

js方法

声明：function test() { } 这就是js的方法。

function fun(obj) { } 在这里obj相当于形参了，尼玛var都不要了。

<input type=text onblur="show(this)" /> this指代的是这个input，原来如此。

<input type="text" value="xx" class="xx是大神！" id="input" name="Newtow\‘s name" onblur="show(this.value)" onclick="show(this.name)"  onbeforecopy="show(this.id)" onbeforecut="show(this.class)" />

传参数一般都是this，然后方法里面对对象进行操作。呵呵，这样还挺好玩的，以前不懂啊，被js坑惨了。

感觉js可以把html当成七巧板一样来操作，实际上我都从来没有玩过七巧板。

class面中不能包括感叹号么？

 

js是区分大小写的；

js是弱变量类型的语言，若类型不等于没有类型；

js的分号可有可无；

js的注释和java的注释一样；

js变量的声明的都是var，可以在var后面跟一个或者多个变量；

js基本数据类型和引用数据类型，原始类型只有5个：undefined，boolean，number，String，null；

===(全等于)表示值相等而且类型也一样的时候才是相等的，==只要值是一致的就相等。

js通常的开发步骤：一般都是由事件触发，而且都是触发一个函数，因此我们需要定义一个函数，获得需要控制的对象的控制权，然后操纵那个对象。

了解js中常用的事件

js的引入方式:

1、直接在页面内编写

<script></script>

2、将js编写到js文件中，然后引入到页面中

在网页中使用js有两种方式:

第一种：直接在页面内的<Script> </Script>标签中写入；

第二种：从外部引入js:

<Script src=>

</Script>

栗子：js完成页面表单的简单验证

<form action=action?action=heheda method=post onsubmit=return checkForm();>

</form>

Document对象有很多实用的方法：

getElementById()

getElementByName()

getElementByTagName()

js的正则表达式有两种：

第一种是用字符串来进行验证，String

第二种是用正则表达式对象来验证，RegExp

两个都可以去匹配正则，一个是String里面的match方法，另一个是RegExp中的test方法。

学会如何对js打断点

如果是checkbox的话，可以在onsubmit事件里面可以把checkbox里面的值拼成一个字符串，然后一起送到后台。

js也是面向对象的语言，底层是面向对象的；有机会的话可以多找一些js的数。

一个数组往后台传的话，传的是这个数组的地址值，因此还是把checkbox的值拼成一个串。

function checkForm() {
    var clearInfo = document.getElementsByClassName("check");
    var i = 0;
    for(i=0; i<clearInfo.length; i++) {
        clearInfo[i].textContent = "";
    }
    var username = document.getElementById("username").value;
    var hu = document.getElementById("userid");
    if(username == "") {
        hu.textContent="用户名为空！";
        return false;
    }
    var passwd = document.getElementById("password").value;
    var passwdid = document.getElementById("passwdid");
    if(passwd == "") {
       
        passwdid.textContent = "密码为空!";
        return false;
    }
    var repasswd = document.getElementById("repassword").value;
    var repasswdid = document.getElementById("repasswdid");
    if(repasswd != passwd) {
       
        repasswdid.textContent = "两次输入的密码不一致!";
        return false;
    }
    var email = document.getElementById("getEmail").value;
    var checkemail = document.getElementById("emailid");
    if(!/^([a-zA-z0-9_-])[email protected]([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(email)) {
       
        checkemail.textContent = "email的格式不符合要求！";
        return false;
       
    }
    var c1 = document.getElementById("c1").checked;
    var c2 = document.getElementById("c2").checked;
    var c3 = document.getElementById("c3").checked;
    var c4 = document.getElementById("c4").checked;
    //alert(c1 + "#" + c2 + "#" + c3 + "#" + c4);
    if(c1 == false && c2 == false && c3 == false && c4 == false) {
        var check = document.getElementById("checkid");
        //alert(c1 + "#" + c2 + "#" + c3 + "#" + c4);
        check.textContent = "请至少选择一项！";
        return false
    }
    jiguan = document.getElementById("jiguan").selected;
    //alert(jiguan);
    if(jiguan == true) {
        var jiguanid = document.getElementById("jiguanid");
        jiguanid.textContent="请选择籍贯！"
        return false;
    }
}

在js中有些对象的属性和对象之间还隔着一个对象的，比如div里面有style属性，style下面又有属性height和weigth，不能通过div来直接操作其height，而是要通过：div.style.height这样来操作。

另外在函数通常都是直接传入对象，然后在函数中对获取或者操作对象的各种属性，而不是仅仅传入对象的属性，感觉到了一点面向对象呢！

---

js实现图片的滚动效果

体验js让页面动起来的效果。

用到了js中DOM的window对象。

window对象的定时功能：

setInterval()，每隔多少毫秒去执行一个表达式，会一直执行；

setTimeout()，只会执行一次，但是可以通过调用自己来一直执行。

setInterval("change()",5000);   在双引号里面的代码会当成js代码来执行。

setTimeout("change()",5000); 定时器实际用的比较少。

写在<body>的onload()事件中，方法是改变图片src属性的值，也可以写成匿名函数。

html以及js以及css的加载顺序

写在里面和写在外面的区别，写在函数外面变量会引用到尚未加载的内容。

定时弹出广告

要用到css的display属性

两个定时都想有的话就放在一个onload里面。

<script src="js/check.js"></script>
<script>
    var time;
    window.onload = function () {
        time = window.setInterval("show()", 10);
    };
    function show() {
        var adDiv = document.getElementById("adDiv");
        adDiv.style.display = "block";
        window.clearInterval(time);
        time = window.setInterval("hide()",10);
    }
    function hide() {
        var adDiv = document.getElementById("adDiv");
        adDiv.style.display="none";
        window.clearInterval(time);
        time = window.setInterval("show()",10);
    }
</script>

bom和dom对象的介绍

bom对象有：

1. Window

2. Navigator

3. Screen

4. History

5. Location

dom对象有：

1. Document

2. Element

3. Attribute

4. Event

js中bom中的5个对象：

1. window：代表的浏览器的窗口，上层的对象

window的confirm()方法也挺有用的。

可根据返回的true或者false来操作。

介绍了window对象

location可以实现一个页面跳转的效果，有一个href方法来跳转页面，location.href

location.reload()在刷新的时候可以用到；

history主要记住的是go方法，history.go；

对于checkbox或者option这种注意选项的勾选属性是true或者false，而不是checked或者其他的。

在访问tomcat服务器的页面的时候一定要保证tomcat开启并且项目丢在tomcat里面了。