首页 > > 网页制作 > Javascript >

JavaScript基础篇

2019-04-20 08:55:20来源：博客园阅读 ()

javascript基础篇详情

2019-04-19

简介

定义

　　javascript是一门动态弱类型的解释型编程语言，增强页面动态效果，实现页面与用户之间的实时动态的交互。

　　javascript是由三部分组成：ECMAScript、DOM、BOM

ECMAScript由ECMA-262定义，提供核心语言功能（ECMA是欧洲计算机制造商协会）
DOM(Document Object Model)文档对象模型，提供访问和操作网页内容的方法和接口
BOM(Browser Object Model)浏览器对象模型，提供与浏览器交互的方法和接口

注释

JavaScript中代码注释：

单行 //
多行 /* */

变量

可以把变量当成是存储信息的“容器”
与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）
变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）
在 JavaScript 中创建变量通常称为"声明"变量。var carname;
变量声明之后，该变量是空的（它没有值）。如需向变量赋值，请使用等号：var carname="came"

对象

JavaScript 对象是属性和方法的容器。

function函数事件例子

<!DOCTYPE html>
<html>    
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
    alert("Welcome " + name + ", the " + job);
}
</script>

</body>
</html>

View Code

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>
        <script>
            
            function change(){
                var x=document.getElementById("class");
                x.innerHTML="谢谢";
            }
        </script>

        <div onclick="change(this)" id="class">您好</div>

    </body>

</html>

View Code

onload和onload事件

打开页面时：onload
刷新页面时：onbeforeunload-->onunload
关闭网页时：onbeforeunload-->onunload-->onload

Dom

document.write() 可用于直接向 HTML 输出流写内容

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        
    </head>

    <body>
        <div class="box">
            <h1 class="h-class" id="h-id">学如逆水行舟，不进则退</h1>
            <h1 class="h-class">心思平原走马，易放难收</h1>
        </div>
        <script type="text/javascript">
            // 通过标签名获取 dom节点
            var h = document.getElementsByTagName("h1");

            console.log(h[0].innerText);

            // 通过类名获取Dom节点
            h = document.getElementsByClassName("h-class");
            console.log(h[1].innerText);

            // 通过id名获取元素
            h = document.getElementById("h-id");
            console.log(h.innerText);
            
            
            // 通过选择器获取元素 返回：1个
            var h = document.querySelector(".box .h-class");
            console.log(h.innerText);
            // 通过选择器获取元素 返回：所有
            var h = document.querySelectorAll(".box .h-class");
            console.log(h[1].innerText);
            
        </script>
    </body>

</html>

获取元素

节点添加

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <ol id="books">
            <li>《探清水河》</li>
            <li>《毓贞》</li>
            <li>《乾坤带》</li>
            <li>《探海水河》</li>
            <li>《白蛇传》</li>
        </ol>
        <input type="text" name="bookName" id="bookName" value="" /><button onclick="addBook()">添加</button>
        修改<input type="number" name="bookNo2" id="bookNo2" value="1" /> 
        <input type="text" name="bookName2" id="bookName2" value="" /><button onclick="editBook()">修改</button>
        <!--
            1. 输入书名 点击按钮添加图书
            2. 输入序号，点击按钮删除指定图书
            3. 输如序号，输入新的书名，点击按钮修改书名
        -->
        <script type="text/javascript">
            var books = document.querySelector("#books");
            var children = books.children;
            var bookNameInput = document.querySelector("#bookName");
            var bookNo2Input = document.querySelector("#bookNo2");
            var bookName2Input = document.querySelector("#bookName2");
            
            
            // 添加一本书
            function addBook(){
                var bookName = bookNameInput.value;
                if(bookName==""){
                    alert("书名不能为空！");
                }else{
                    var newLi = document.createElement("li");
                    newLi.innerText = "《"+bookName+"》";
                    books.appendChild(newLi);
                    bookNameInput.value = "";
                }
            }
            
            // 删除一本书
            
            // 修改一本书
            function editBook(){
                var bookName = bookName2Input.value;
                var bookNo = bookNo2Input.value;
                if(bookNo<1||bookNo>children.length){
                    alert("序号越界");
                }else if(bookName==""){
                    alert("书名不能为空！");
                }else{
                    children[bookNo-1].innerText = "《"+bookName+"》";
                    bookName2Input.value = "";
                }
            }
            
            
            
        </script>
    </body>
</html>