第四天 Javascript基础教程_定义一个列表，每一个列表都是一个超链接，并且要求去除列表项符号以及超链接下划线设置超链接文本为粉红色-优快云博客

本文介绍了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>