[js]javascript基础--通过看书笔记

数据类型

• 定义变量

var pi = 3.14;
var name = "Mao Tai";
var answer = "Yes I am";
console.log(pi,name+answer); 或者
console.log(pi,name,answer);


var x = 1;
var y = 2;
console.log(x+y);

• 定义字符串

txt = "yifei";
console.log(txt.length);
txt.length = 100;
console.log(txt.length);
console.log(txt.indexOf('f'));
console.log(txt.replace("i","e"));
console.log(txt.search("fei"));

• 定义数组

yeah = ['xinchou',1992,1994]
console.log(yeah.length)

• 定义对象

var p = {
    "name": 'tutu',
    "age": 22,
    "job": "ceo"
};

改变值

document.write("hello world");

document.getElementById("app").innerHTML="hello ma!"



<button onclick="myfun()">button</button>
<script>
    function myfun() {
        document.write("hello world");
    }
</script>

获取input的值和普通元素值

<p id="app">hello p</p>
<input type="text" name="user" id="app2" value="rongshu">
<script>
    app = document.getElementById("app");
    app2 = document.getElementById("app2");
    console.log(app.innerHTML);
    console.log(app2.value);
</script>

例子1 - 表单验证

<form action="" method="post">
    <p>name: <input type="text" id="name"> <span id="name_err"></span></p>
    <p>age: <input type="text" id="age"> <span id="age_err"></span></p>
    <p>
        <button type="button" onclick="myfun()">submit</button>
    </p>
</form>
<script>
    function myfun() {
        name = document.getElementById("name").value;
        age = document.getElementById("age").value;
        if (name == "") {
            document.getElementById("name_err").innerHTML = "请输入正确的姓名";
        }

        if (age == "" || isNaN(age)) {
            document.getElementById("age_err").innerHTML = "请输入正确的年龄";
        }
    }
</script>

例子2-隔行换色

<table border="1">
    <tr>
        <td>ip</td>
        <td>port</td>
        <td>cpu</td>
        <td>mem</td>
        <td>disk</td>
    </tr>
    <tr>
        <td>192.168.1.1</td>
        <td>22</td>
        <td>0.2</td>
        <td>1g</td>
        <td>500g</td>
    </tr>
    <tr>
        <td>192.168.1.2</td>
        <td>22</td>
        <td>0.2</td>
        <td>1g</td>
        <td>200g</td>
    </tr>
    <tr>
        <td>192.168.1.3</td>
        <td>22</td>
        <td>0.3</td>
        <td>2g</td>
        <td>100g</td>
    </tr>
</table>

<script>
    tr = document.getElementsByTagName("tr");
    for (var i = 0; i < tr.length; i++) {
        if (i % 2 == 0) {
            tr[i].style.backgroundColor = "#eee";
        }
        tr[i].onmouseover = function () {
            this.className = "current";
        };
        tr[i].onmouseout = function () {
            this.className = "";
        };
    }
</script>