zoukankan      html  css  js  c++  java
  • 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) 
        
        

    //未完待续

  • 相关阅读:
    在LinuxMint 17 MATE中安装NVIDIA显卡驱动
    如何在VeryCD中下载资源
    创建多个Dialog时,namespace冲突问题的解决 -- 基于QT 5.2
    Qt 5.2中编译加载MySQL数据库驱动问题的总结
    Python入门 -- 001
    Qt 入门 ---- 布局管理
    Qt 入门 ---- 如何在程序窗口显示图片?
    Redis 教程笔记
    Python pip 报错
    Python手动安装 package
  • 原文地址:https://www.cnblogs.com/singledigit/p/5938939.html
Copyright © 2011-2022 走看看