JS基础学习(一)

首先感谢 http://www.w3school.com.cn/js/index.asp

学js真的很方便,&下面的内容其实是我自己做的一个备忘


第一节    大致了解
一    js基本介绍
    1.轻量级脚本语言
    2.可插入html,插入后可使用浏览器执行
二     js输出
    document.write("中间写你要输出的东西");//在加载完全部文字后,再次使用它,会覆盖之前的内容
    alert("弹出框,输入你要弹出的东西");
三    js对事件作出反应
    <button type = "button" onclick = "alert('欢迎!')">点击这里</button>
    (创建一个点击这里的按钮,点击后弹出对话框“欢迎”)
四    改变HTML内容(包括文字图片等)
    <p id="demo">
        JavaScript 能改变 HTML 元素的内容。
    </p>

    x=document.getElementById("demo");  // 找到元素
    x.innerHTML="Hello JavaScript!";    // 改变内容
五     其他杂七杂八
    1.js中,用分号表示语句的结束是可选的
    2.大小学敏感
    3.无视多余的空格
    4.可以换行,用“”   
        eg. document.write("Hello 
            World!");————————————————————true
            document.write 
            ("Hello World!");————————————false
            
    5.单行注释            //
    6.多行注释            /*     */
    
第二节 怎么写一个hello world
一    js的使用
    <html>
        <head>//通常把函数放在head里面
            <script>
                //中间写你的js代码
            </script>
        </head>
        <body>
            <script>
                //中间写你的js代码
            </script>
        </body>
    </html>

第三节     基础语法
一 变量的声明与类型
    1.所有的变量声明都是
        var w;//未经赋值,是空的
        var a = 123;
        var b = "4560";
        var c = "15", d = 16;//可以一行赋值多个
        
        var c = "15", //可以分行赋值
        d = 16;
    2.注意事项
        必须字母或者$ _开头
        大小写敏感
        (最好)在代码开始处,对所需要的变量进行声明
    3.类型
        js是动态类型,相同的变量可以用作不同的类型
        js中,所有变量都是对象
        
        1.字符串
            var a = "123";
        2.数字
            var a = 12;
            var a = 12.01;
            var a = 12e15;
            var a = 12e-15;
        3.布尔
            var a = true;
            var a = false;
        4.数组
            var a = new Array();
            a[0] = "1";
            a[1] = "2";
            
            var a = new Array("1", "2");
            var a = ["1", "2"];
        5.对象
            //声明
            //1
            var person = 
            {
                firstName    :    "ABC",
                lastName    :    "DEF",
                id            :    "45789"
            };
            //2
            var person = new Object();
            person.firstName = "ABC";
            person.lastName = "DEF";
            person.id = “456780”;
            
            //使用
            var targetName = person.lastName;
            var targetName = person["lastName"];
        6.Null
            可以用Null清空变量
            a = null;
        7.Undefined
            表示不含有值
            
        声明新变量时,可使用new表明类型
            var carname=new String;
            var x=      new Number;
            var y=      new Boolean;
            var cars=   new Array;
            var person= new Object;
二     Js的对象
    技术中,所有的变量都是对象
    js中,对象是拥有属性和方法的数据
    
    1.访问对象的属性的语法是
    targetObject.propertyName
    //对象名.属性名
    2.访问对象的方法的语法
    //对象名.方法名(参数);
    
    注意,与C#不同,js的方法名常常首字母小写

三     函数
    function 函数名(变量一, 变量二 。。。。)
    {
        //要执行的代码
        
        //有返回值就直接return
    }
    
    eg.
        function add(num1, num2)
        {
            var c = num1 + num2;//他是局部变量,函数运行完就会删除
            return c;
            //你也可以直接return;
        }
    
        &
        
        var a = add(2,3);
        a最终等于的是5,而不是add函数
        
    函数外面声明的变量全是全局变量,即所有位置都能够访问
    全局变量在页面关闭后删除
    将一个值赋给未生明的变量,他将是全局变量,即使他在函数里面
四     运算符,比较符,与或非
    //这个没什么好说的,与C#相同
    
    
五     判断语句if
    if (time<10)
    {
        x="Good morning";
    }
    else if (time<20)
    {
        x="Good day";
    }
    else
    {
        x="Good evening";
    }
    //除了elseif中间加了空格,其余与C#完全相同
六    选择语句
    //与C#完全相同
    
七    循环
    //所有循环的注意事项
    //不要死循环!!!
    
    //for 中的三个部分都输可选的
    for(var i = 0; i < 100; i++)
    {
        document.write("hahaha" + i);
    }
    
    for (var i=0,len=cars.length; i<len; i++)
    {
        document.write(cars[i] + "<br>");
    }
    
    //遍历对象中的所有属性
    for(a in person)
    {
        txt = txt + person[x];
    }
    
    //下面两个与C#中的一样
    while (i<5)
    {
        x=x + "The number is " + i + "<br>";
        i++;
    }
    
    do
    {
        x=x + "The number is " + i + "<br>";
        i++;
    }
    while (i<5);
    
    
    break;//除了C#中的用法,还可以用在有标签的引用中
    eg.
        cars=["BMW","Volvo","Saab","Ford"];
        list://这个是标签,进行标记,个人理解,类似于C#里面的 #region
        {
            document.write(cars[0] + "<br>");
            document.write(cars[1] + "<br>");
            document.write(cars[2] + "<br>");
            break list;
            document.write(cars[3] + "<br>");
            document.write(cars[4] + "<br>");
            document.write(cars[5] + "<br>");
        }
    
    continue;//同C#

八     异常处理
    try
    {
        var x=document.getElementById("demo").value;
        //下面是定义错误类型
        if(x=="")    throw "empty";
        if(isNaN(x)) throw "not a number";
        if(x>10)     throw "too high";
        if(x<5)      throw "too low";
    }
    catch(err)
    {
        var y=document.getElementById("mess");
        y.innerHTML="Error: " + err + ".";
    }
    
第四节    稍微高级一点的应用
一     JS HTML DOM(js,html文本对象模型)
    1.JS功能
        1.能够改变页面中所有的HTML元素
        2.------------------------属性
        3.--------------------CSS样式
        4.--------------------事件作出反应
    
    2.查找HTML元素
        1.通过Id查找
            var x = document.getElementById("id名字");
            //如果没有找到,则x = null
        2.通过标签查找
            var x = document.getElementById("Id名字");
            var y=x.getElementsByTagName("p");//查找<p>标签内容
            //y是数组,通过数组来确定使用第几个标签中的值
    3.改变html中的内容
        document.getElementById("p1").innerHTML = "New text!";
        //获取到内容                  (属性)显示在html中的东西
    4.改变html中的属性
        document.getElementById("image").src="landscape.jpg";
        //更换图片资源
    5.改变html中的样式
        document.getElementById("p2").style.color="blue";
        //style 是关键词
    6.隐藏html中的内容
        document.getElementById('p1').style.visibility='hidden'(或者visible);
    7.事件
        onclick//点击
        onmouseover //鼠标放上
        onmouseout //鼠标离开
        onfocus //鼠标选中(点击)
        onchange //内容改变
        onload    //加载页面开始
        onunload  //退出页面时
        
        //定义按钮时,直接定义店家事件
        <button onclick="displayDate()">点击这里</button>
        //给按钮加上Id,在其他地方获取然后添加事件属性
        document.getElementById("myBtn").onclick=function(){displayDate()};
    
    8.节点
        
        var para=document.createElement("p");//创建元素<p>
        var node=document.createTextNode("这是新段落。");//创建要添加的文本
        para.appendChild(node);//将文本添加带你创建的元素中
        var element=document.getElementById("div1");//找到一个已有的节点
        element.appendChild(para);//将你创建的元素添加到已有的标签中
    
        var parent=document.getElementById("div1");
        var child=document.getElementById("p1");
        parent.removeChild(child);//从一个父节点中移除一个子元素
        
        var child=document.getElementById("p1");
        child.parentNode.removeChild(child);//从当前所在的父节点中删除自己

第五节     对象    
    所有数据类型都是对象
一    构造器
    function person(firstname,lastname,age,eyecolor)
    {
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
    }
    
    var a = new person("123", "123", 15, "red");
    
    js,面向对象语言,但不使用类
    不会创建类,也不通过类来创建对象
    js基于属性,而不是基于类的
    
二     数字
    1.js数字均为64位
    2.整数最多15位,小数最多17位
    3.前缀位0,八进制;前缀位0x,十六进制
三     字符串,数组,Data,Boolean,Math
    这些用到现查
    没有什么特殊的
四     RegExp正则
    用于规定在文本中检索的内容。
    var patt1=new RegExp("检索目标");//检索目标
    patt1.test("The best things in life are free");//检查字符串中的指定值,返回true、false 
    patt1.exec("The best things in life are free");//一样是检索,不过返回的是被查找的值,没有书null
    patt1.compile("d");//改变检索目标
    
    var patt1=new RegExp("e","g");//第二个参数,表示要查找目标所有的关键词
    do
    {
        result=patt1.exec("The best things in life are free");
        document.write(result);
    }
    while (result!=null) 
    
    

//未完待续

原文地址:https://www.cnblogs.com/singledigit/p/5938939.html