第一阶段 3、javascript

一、基础的JavaScript

JavaScript没有任何打印或者输出的函数

JavaScript显示数据方式:

  • window.alert():弹出警告窗
  • document.write():将内容写到HTML文档中
  • innerHTML:写入到HTML元素
  • console.log():写入到浏览器控制台

1、window.alert()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>window.alert()方法</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p>段落</p>
        <script>
            window.alert(5+6)
        </script>
    </body>
</html>
2、document.write()
<!DOCTYPE html>
<html>
    <head>
        <title>document.write:操作HTML元素</title>
    </head>
    <body>
       <h1>一级标题</h1>
       <p>段落</p>
       <script>
           document.write(Date())
       </script>
    </body>
</html>
3、innerHTML:写入到HTML元素
<!DOCTYPE html>
<html>
    <head>
        <title>inner:写入到HTML元素</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p id="demo">会改变的内容</p>
        <script>
            document.getElementById("demo").innerHTML="改变之后的文字"
        </script> 
    </body>
</html>
4、console.log():写到控制台
(常常在程序调试的时候使用)
<!DOCTYPE html>
<html>
    <head>
        <title>console.log():写到控制台</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p>段落</p>
        <script>
            a = 5;
            b = 6;
            c = a + b;
            console.log(c)
        </script>
    </body>
</html>
二、变量和字面量
字面量:在编程语言中,一般固定值成为字面量。如,3.14,....,
变量:变量用于存储数据值
总结:变量是一个名称,字面量是一个值。
三、tips
1、javascript的注释:单行//,多行/* */。
2、javascript对大小写敏感
3、JavaScript语句向浏览器发出的命令,语句的作用是告诉浏览器该做什么。
4、JavaScript会自动忽视多余的空格。
5、换行问题(还没解决),将“你好”变成
“你
好”
四、JavaScript数据类型
数组:数组三种声明方式
1、var cars = new Array();
  cars[0] = "Saab";
  cars[1] = "Volvo";
  cars[2] = "BMW" ;
2、var cars = new Array("Saab",'Volvo',"BMW");
3、var cars = ["Saab","Volvo”,"BMW"]
五、JavaScript对象
1、var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};
对象的两种寻址方式:
name=person.lastname;
name=person["lastname"];
2、对象的属性
  • javascript对象是变量的容器
  • JavaScript对象是属性变量的容器
  • javascript对象是属性和方法的容器

3、对象的方法

对象的方法定义了一个函数,并作为对象的属性存储

<!DOCTYPE html>
<html>
    <head>
        <title>javascript对象</title>
    </head>
    <body>
        <p id="demo1"></p>
        <p id="demo2"></p>
        <script>
            var person = {
                firstName:"John",
                lastName:"Dan",
                id : 5566,
                fullName:function(){
                    return this.firstName + " " + this.lastName
                }
            };
            document.getElementById("demo1").innerHTML = "不加括号:" + person.fullName;
            document.getElementById("demo2").innerHTML = "加括号:" + person.fullName();
        </script>
    </body>
</html>
通常:fullName()是作为对象的一个方法,fullName是作为一个属性
demo1输出:function(){ return this.firstName + " " + this.lastName }
demo2输出:John Dan
六、JavaScript函数 
1、
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>javascript函数</title>
        <script>
            function myFunction(){
                alert("h");
            }
        </script>
    </head>
    <body>
        <script>
            function myFunction(){
                alert("h");
            }
        </script>
        <button onclick="myFunction()">点击</button>
    </body>
</html>
JavaScript对大小写敏感,关键词function必须是小写的,并且必须以与函数名相同的大小写来调用函数
2、带有参数的函数
function myFunction(var1,var2){}
调用:<button onclick = "myFunction("Harry","Wizz")">点击</button>
3、带有返回值的函数
function myFunction(a,b){
return a*b
}
调用:document.getElementById("demo").innerHTML = myFunction(3,4);
4、JavaScript中的变量
局部JavaScript变量:在函数内部声明(var)的变量,只能在函数内部访问它()该变量的作用域是局部的,函数运行结束,变量就会删除
全局变量:在函数外声明的变量,作用域整个程序
七、JavaScript事件
<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        
        <button onclick="getElementById('demo1').innerHTML = Date()">时间1</button>
        <p id="demo1"></p>

        <button onclick="this.innerHTML=Date()">时间2</button>

        <button onclick="disPlay()">点击</button>
        <p id="demo2"></p>
        
        <script>
        function disPlay(){
            return document.getElementById("demo2").innerHTML = Date();
        }
        </script>

    </body>
</html>
HTML事件是发生在HTML元素上的事情,当在HTML页面中使用JavaScript时,JavaScript可以触发这些事件。
八、JavaScript中的循环
1、break和continue:
break用于调出循环,整个循环结束
continue用于错过这轮循环,比如i= 3 时continue,则i= 4 的循环还是可以循环。
2、JavaScript标签
可以对JavaScript语句进行标记(类似汇编语言?)
九、JavaScript类型转换
利用typeof操作符来查看变量的数据类型
1、转换成字符串的两种方法
  String(x)和x.toString()
2、一元运算符+
  一元运算符可用于将变量转换成数字
  var x = "5";//x是字符串
  var y = + x;//y是数字
  如果变量不能转换为数字,他仍是一个数字类型,但内容为null
  var x = "John";
  var y = + x;//y为null
十、JavaScript表单验证
  表单验证:判断表单字段值是否存在,如果不存在就弹出信息,阻止表单提交;
 
原文地址:https://www.cnblogs.com/gujunjie-study-time/p/13841792.html