第四天 Javascript基础教程

Javascript是一种弱类型脚本语言，弱类型就是声明的时候不用定义变量的类型，脚本语言就是一行一行执行，和C、Java这种编译后执行的语言区分开来。Javascript支持面向对象，除了在浏览器中看到它实现动态页面以外，还有很多应用程序也使用它进行扩展。

---

Js的引入

有两种方式在html文件种引入Js脚本：

• 直接写在html文件中，用script标签扩起来

  <script type="text/javascript">
      //这里写代码
  </script>

注意：这里的type可以不写，浏览器默认解析为js。

• 外部引用（推荐）

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

注意：<script>标签可以放在<head>或<body>标签内的任意的地方，这与css的引入不同，css外联样式和外部样式只能写在<head>中。

---

Js输出

<script type="text/javascript">
    alert("哈哈");//警告框提示
    document.write("<h1>嘿嘿</h1>");//写入文档
    console.log(1+90);//控制台打印，Chrome按f12调出控制台
</script>

Js变量

var i;
i = 1;
console.log("i=" + i);
//typeof判断数据类型
console.log(typeof i);
//变量未赋值时类型为undefined
//变量可以重复声明，但不推荐这样做
//变量可以被赋不同类型的值，但同样不推荐这样做

parseInt:

console.info(parseInt("0x20"));
//parseInt  转成int
//parseFloat 转成float
//可传入整形数、浮点数、十六进制等，以及它们的字符串形式
//Js中"123"==123是成立的
//"212abd3"这种会只转到遇到的第一个字母前为止，结果是212
//"dsa"这种形式会返回NaN，not a number
//parseFloat传入十六进制的字符串形式"0x21"会只读到0为止

isNaN:

console.info(isNaN("123"));//是数字返回false，不是数字返回true
//isNaN = not is a number

Js语法

条件判断：

//if语句
var condition;
if(condition) {
    //do something
} else if(condition) {
    //do something
} else {
    //do something
}
//注意：undefined和NaN也被判断为false

//switch语句
var avalue = 1;
switch(avalue) {
    case 1:
    //do something
    break;
    case 2:
    //do something
    break;
    default:
    //do something
}

//三目运算符
var i = condition ? 1 : 0; //condition成立i为1，不成立i为0

循环语句：

//while循环
var condition;
while(condition){
    //do something
}

//for循环
for(var i = 1;i<3;i++){ 
    //do something                  
}

//for-each循环
var a=[1,2,3,4];
for(var j in a){
    console.log(a[j]);
}//注意这个j是下标，不是值，与java不同

练习-九九乘法表：

自己写，别看我的…

for(var i = 1; i < 10; i++) {
    for(var j = 1; j <= i; j++) {
        document.write(i + "x" + j + "=" + i * j + " ");
    }
    document.write("<br/>");
}

---

Js函数

function getSum(num1,num2){
    var res = num1+num2;
    console.log(res);
    return res;
}
//无需返回值类型声明
//无返回值时return可以不写

---

Js事件：

单击事件:onclick

<input type="button" value="点击" onclick="getSum(100,200)"/>

表单提交事件:onsubmit （返回false时不提交表单，记得加return）
内容改变事件:onchange （内容改变且输入框失去焦点时触发）

<form action="index.html" onsubmit="return check()">
    用户名：<input id="username" type="text" name="username" placeholder="长度不超过6位" onchange="showContent()"/>
    <input type="submit" value="提交" />
</form>

function check() {
    var username = document.getElementById("username").value;
    //根据id属性获取标签的value属性的值
    if(username.length>6) {
        alert("不能超过6位");
        return false;//提交失败页面不跳转
    } else {
        alert("提交成功");
        return true;//提交成功页面跳转
        }
}

function showContent(){
    var username = document.getElementById("username").value;
    alert(username);
}

Js文档操作

var nametag = document.getElementById("username");
//获取id属性为username的标签
nametag.value;
//得到这个标签value属性的值
nametag.innerHtml;
//得到这个标签扩起来的html
nametag.innerText;
//得到这个标签扩起来的纯文本
//可以给它们赋值来更改文档中的值

---

作业-Js表单验证：

做一个下面这样的表单，输入错误有醒目红色文字提示，点击注册后输入不正确不能提交。

输入错误提示：

本喵写的，可能不是很好，建议先不要看，自己写了再对照：

<h3>用户注册</h3>
        <form action="succ.html" onsubmit="return checksubmit()">
            <label>用&nbsp;&nbsp;户&nbsp;&nbsp;名：</label><input type="text" id="username" name="username" placeholder="4-6位之间" onfocusout="checkname()" /><br>
            <label>设置密码：</label><input type="password" id="userpass" name="userpass" placeholder="只能输入数字" onfocusout="checkpass()" /><br>
            <label>确认密码：</label><input type="password" id="userpassagain" name="userpassagain" placeholder="和密码相同" onfocusout="checkpassagain()" /><br>
            <label>手&nbsp;&nbsp;机&nbsp;&nbsp;号：</label><input type="tel" id="phone" name="phone" placeholder="只能输入数字" onfocusout="checkphone()" /><br>
            <input type="submit" value="立即注册" /><label id="p1"></label>
        </form>
        <script type="text/javascript">
            function checknull(name,id) {
                if(document.getElementById(id).value == "") {
                    document.getElementById("p1").innerText = name+"不能为空";
                    return false;
                } else {
                    document.getElementById("p1").innerText = "";
                    return true;
                }
            }

            function checkname() {
                var name = document.getElementById("username").value;
                if(!checknull("用户名","username")){
                    return false;
                }
                if(name.length < 4 || name.length > 6) {
                    document.getElementById("p1").innerText = "用户名长度是4到6位";
                    return false;
                } else {
                    document.getElementById("p1").innerText = "";
                    return true;
                }
            }
            function checkpass(){
                var pass = document.getElementById("userpass").value;
                if(!checknull("密码","userpass")){
                    return false;
                }
                if(isNaN(pass)) {
                    document.getElementById("p1").innerText = "密码只能输入数字";
                    return false;
                } else {
                    document.getElementById("p1").innerText = "";
                    return true;
                }
            }
            function checkphone() {
                var phone = document.getElementById("phone").value;
                if(!checknull("手机号","phone")){
                    return false;
                }
                if(isNaN(phone)) {
                    document.getElementById("p1").innerText = "手机号只能输入数字";
                    return false;
                } else {
                    document.getElementById("p1").innerText = "";
                    return true;
                }
            }

            function checkpassagain() {
                var pass = document.getElementById("userpass").value;
                var passagain = document.getElementById("userpassagain").value;
                if(!checknull("确认密码","userpassagain")){
                    return false;
                }
                if(pass != passagain) {
                    document.getElementById("p1").innerText = "两次密码输入不一致";
                    return false;
                } else {
                    document.getElementById("p1").innerText = "";
                    return true;
                }
            }

            function checksubmit() {
                if(checkname() && checkpass() && checkpassagain() && checkphone()) {
                    return true;
                }
                return false;
            }
        </script>