HTML JavaScripts

时间 2019-11-10

原文原文链接

JavaScript

JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，因此在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器能够解释并作出相应的处理。

一、JavaScript代码存在形式javascript

方式一
    <script type"text/javascript" src="js文件"></script>
方式二
    <script type"text/javascript">
        js代码内容
    <script>

二、JavaScript代码存在的位置html

Html的head中
Html的body代码底部（推荐）
因为Html代码是从上到下执行，若是Head中的js代码耗时严重，就会致使用户长时间没法看到页面，若是放置在body代码块底部，那么即便js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

如： 
<script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>
<script>
    alert('123');
</script>

三、变量java

全局变量
局部变量 （尽可能使用局部变量 避免出错）
JavaScript中变量的声明是一个很是容易出错的点，局部变量必须是一个var开头，则默认表示全局变量
局部变量：   var name = "chen"
全局变量:   age = 18
var a1='chen',a2='zhang',a3=1 多行声明变量

四、注释web

单行注释 //
多行注释 /*   */

五、基本数据类型编程

数字数组

两种方式
    var age = 18;
    var age = Number("18")；
将一个字符串转换为数字类型
    Number('123');
    parseInt（'123'）;
    n2='123';
    a=parseInt(n2); # 必须赋值给变量才会生效，不会直接将原变量的类型进行改变
    转换为float类型
    parsefloat('18.9');
调试js
    console.log(age);
    age 类型 console.log(age,typeof age);
    或者在html F12中的Console里也能够直接进行测试和调试

字符串浏览器

var age = '18';
var name = String("chen");
var age_str = String(18);
经常使用方法
obj.trim()过滤空格
obj.charAt(index) 获取下标对应的字符串
obj.substring(start,end)返回位于String对象中指定位置的子字符串
obj.indexOf(char)返回字符串索引位置
obj.length 字符串长度

数组app

num = [11,22,33]
    num.unshift("aa") 前插入
    num.push（'bb''） 后插入 追加
    num.splice(1,0,'bbb')指定插入(中间的0必需要加，只有为0的时候才会帮你去插入)
    li.splice(1,3) 删除索引位置后的三个元素 （obj.splice(index,count)         数组指定位置后count个字符）
    li.slice(0,2) 切片
    num.pop() 删除最后一个值，并获取
    num.shift() 删除第一个值
    num.concat(n) 数组合并
        n=['a','b']
    num.rerverse（）  翻转
    num.join('-') 字符串格式化

字典（js中的字典是数组伪造出来的“数组(字典)）框架

dic = {'k1':'v1'}

序列化编程语言

s=JSON.stringify(dic)
     JSON.parse(s)

布尔

Boolean(1) true
    Boolean(0) false

undefined

undefined表示未定义值

null

null是一个特殊值

六、条件语句

for 循环
        数组
            var li = [11,22,33,44];
            for(var index in li){
                console.log(index,li[index]);
                }
            for (var i=0;i<li.length;i++){
                console.log(i,li[i])；
            }
        字典
            var dic = {"k1":11,"k2":22}
            for (var key in dic){
                console.log(key)；
            }

        while 循环
            while (li.length<10){
                console.log("小于10")
                li.push("aa")
                console.log(li)
                continue

            }
        switch 循环
            switch (li){
                case li.length <5:
                    console.log("小于5");
                    break;
                case li.length < 8:
                    console.log("小于8");
                    break;
                default:
                    console.log("大于8")
            }
        try 异常检错
            try{
                li.sasasasasas(2)
            }
                catch (e){
                    console.log("异常")
                }
                finally {
                    console.log("完成")
                }

七、函数

function func1(arg){
            console.log(arg);
            return "aaa";
        };
        var ret = fun1("123");
        console.log(ret)

        匿名函数
        var f = function(arg){
            console.log(arg);
        }
        f(1234)

        自执行函数
            ()();
            (function(arg){
                console.log("111",arg)
                })("chen");

    10 类（函数模拟类）
        function fun1(name,age){
            this.Name = name;
            this.Age = age;
            this.fun2 = function(arg){
                return this.Name + arg;
            }
        }
        var obj = new fun1("chen","18");
        console.log(obj.Name);
        console.log(obj.Age);
        var ret = obj.fun2("66666")
        console.log(ret);

Dom

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，能够改变文档的内容和呈现方式。咱们最为关心的是，DOM把网页和脚本以及其余的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

注：通常说的JS让页面动起来泛指JavaScript和Dom
一、选择器

document.getElementByid('id');
document.getElementsByname('name');
document.getElementsByTagName('tagname');
document.getElementsByClassName('c1');

二、操做内容

obj.innerText   获取文本内容
obj.innerText = 'hello' 设置文本内容
obj.innerHtml   获取html内容
obj.innerHtml = <h1>hello</h1>

var nid = document.getElementByid('myid') 获取用户id的值的信息
nid.innerText="change_id"</script> 修改信息

特殊的：
    input系列
    textarea标签
    select标签
    对于上述的特殊的标签能够用value属性修改标签的value值

三、建立标签

需求点击添加添加文本框

添加

方式一：
    <div  id="container">       
    </div>
    <a href="http://www.baidu.com" onclick="return AddElement()">添加</a>

    var nid = document.getElementById("container");
    var tag = "<input type='text'/>";
    nid.innerHTML = tag;
    return false
    注意:若是，建立按钮有href属性，又有onclick属性，则先触发onclick属性，在触发href属性，若不想触发href，则删除或者函数返回false

上述添加只能添加一次，就失效了，由于它是替换了div里的元素

方式二：
    <div  id="container">       
    </div>
    <a href="http://www.baidu.com" onclick="return AddElement()">添加</a>
    function AddElement(){
    var createObj = document.createElement("a")
    createObj.href = "http://www.baidu.com";
    createObj.innerText = "百度"
    var nid = document.getElementById("container");
    nid.appendChild(createObj);}
    return false
实例二：（替换样式）
    function bb(){
        nid = document.getElementById("aa")
        nid.style.color = "blue"
        nid.style.fontSize = "160px"}

四、标签属性

function aa(){
var nid = document.getElementById('container')
console.log(nid.id)
console.log(nid.className)
console.log(nid.style.fontSize='88px')

}

五、提交表单

document.geElementById('form').submit()
---------
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <form id="aa" action="https://www.sogou.com/web" method="get">
        <input name="query" type="text"/>
        <input type="submit"  value="提交">
        <!--另外一种方式-->
        <div onclick="mysubmit()">提交</div>
    
    </form>
    <script>
        function mysubmit(){
            document.getElementById("aa").submit();
        }
    </script>
    </body>
    </html>

六、事件

属性	此事件发生在什么时候...
onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素得到焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或者一副图像加载完成。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素已开。
onmouseover	鼠标移动到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被从新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。

特殊的：

window.onload = function(){}
    //jQuery：$(document).ready(function(){})
    //onload是全部DOM元素建立、图片加载完毕后才触发的。而ready则是DOM元素建立完毕后触发的，不等图片加载完毕。图片尚未渲染，就能够进行事件的执行。

特殊参数：this,event
七、其余功能

console.log()
//用于显示一个带有指定消息和 OK 及取消按钮的警告框
alert() 
//用于显示一个带有指定消息和 OK 及取消按钮的对话框
confirm()
 
// URL和刷新
location.href
location.href = "url"  window.location.reload()
 
// 定时器
/*setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的参数。*/
setInterval("alert()",2000);   
//clearInterval() 方法可取消由 setInterval() 设置的 timeout。clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
clearInterval(obj)
//超时时间
setTimeout();   
clearTimeout(obj)

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' >
    <title>欢迎blue shit莅临指导&nbsp;&nbsp;</title>
    <script type='text/javascript'>
        function Go(){
            var content = document.title;
            var firstChar = content.charAt(0)
            var sub = content.substring(1,content.length)
            document.title = sub + firstChar;
        }
        setInterval('Go()',1000);
    </script>
</head>
<body>    
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    
    <style>
        .gray{
            color:gray;
        }
        .black{
            color:black;
        }
    </style>
    <script type="text/javascript">
        function Enter(){
           var id= document.getElementById("tip")
           id.className = 'black';
           if(id.value=='请输入关键字'||id.value.trim()==''){
                id.value = ''
           }
        }
        function Leave(){
            var id= document.getElementById("tip")
            var val = id.value;
            if(val.length==0||id.value.trim()==''){
                id.value = '请输入关键字'
                id.className = 'gray';
            }else{
                id.className = 'black';
            }
        }
    </script>
</head>
<body>
    <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();'  onblur='Leave();'/>
</body>
</html>

搜索框