要么改变世界,要么适应世界

JavaScript语法一

2020-03-09 09:08:00
103
目录

前言

JavaScript 是一种脚本,一门编程语言,它可以在网页上实现复杂的功能,网页展现给你的不再是简单的静态信息,而是实时的内容更新,交互式的地图,2D/3D 动画,滚动播放的视频等等。构建web前端,JavaScript 怎能缺席。它是标准 Web 技术蛋糕的第三层,其中 HTML CSS 我们已经在前面有了初步学习。

使用方法

前面学习CSS中,我们知道CSS的使用方法有三种:元素内嵌、文档内嵌、导入外部。这里的JavaScript也有类似的方法:元素内嵌、文档内嵌、导入外部:

  • 元素内嵌

    <input type="button" value="这是一个按钮" onclick="alert('你好')">
    
  • 文档内嵌

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script>
            alert("hello world");
        </script>
    </head>
    
  • 导入外部

    //新建一个test.js
    alert("test");
    //在HTML文件中的head标签下引入
    <script src="test.js"></script>
    

输出内容

可以用alert()函数或者document.write(),这前者是弹出式,后者直接在网页中显示,还可以配合标签来使用

<script>
    var title = "这是一级标题";
    document.write("<h1>"+title+"</h1>");
</script>

还有用console.log()在控制台控制输出,一般用于程序员调试。

输入内容

获取用户输入,我们在HTML的表单中已经学习过,如果用JavaScript也可以实现,prompt()方法用于显示一个带有提示信息,并且用户可以输入的对话框。

prompt(text,defaultText);
参数 描述
text 可选。要在对话框中显示的提示信息(纯文本)
defaultText 可选。默认的输入文本。

<script>
	var inPut = prompt("请输入你的内容","");
	alert("您输出的是\n"+inPut);
</script>

对象

JavaScript跟其他面向对象语言一样,有对象的属性,关于详细的面向对象,这里有着详细的介绍

  • 使用对象字面量创建对象

    var student = {
        ID: 11111111,
        name: "学生名字",
        age: 18,
        sayHello: function () {
            console.log("hello world");
        }
    };
    /* 两种方法引用对象属性 */
    alert(student.ID);
    alert(student["ID"]);
    
  • 使用new object()方式创建

    var student = new Object(); //创建了一个空对象
    student.ID = 123;
    student.name = "学生姓名";
    student.age = 18;
    student.sayHello = function () {
    	console.log("hello world");
    };
    
  • 利用构造函数方式创建

    function Creatstudent(s_ID,s_name,s_age){ //构造函数名一般首字母大写
        this.ID = s_ID;
        this.name = s_name;
        this.age = s_age;
        this.sayHello = function(){
            console.log("hello");
        }
        // 没有返回值
    }
    var student = new Creatstudent(12345,"学生姓名",18);
    
    

遍历对象的内容

有的时候我们想获取对象的全部属性,我们可以用对象+“.”+属性名来获取,这种方法对于属性少的对象来说固然奏效,但是假如我的对象有一千个、一万个属性呢?(当然了这只是一个假设,我们自定义的对象一般不会有这么多的属性吧)上面的方法估计就有些吃力了吧!因此我们需要换一种方式来遍历。

var key;
for(key in student){
    console.log(key+":"); //循环一次 得到的是属性名
    // console.log(student.key); 不得使用该方法 因此该方法返回的是undefined
    console.log(student[key]);
}

内置对象

  • JavaScript中对象分为三种:自定义对象、内置对象、浏览器对象。

  • 前面两种对象属于ECMAScript,第三个是JavaScript独有的

  • 内置对象是官方定义,供开发人员使用的对象,它能帮助开发者快速开发,而不必要在意背后的工作原理(当然了喜欢钻研也可以)。

  • JavaScript提供了大量的内置对象,如Math、Date、Array、String等。

  • 为了了解如何使用内置对象,我们需要去官网查阅官方文档,例如,根据官方文档,我们可以知道获取时间的方法是

    function showTime() {
        nowtime = new Date();
        year = nowtime.getFullYear();
        month = nowtime.getMonth() + 1;
        date = nowtime.getDate();
        console.log(year + "年" + month + "月" + date + "日" + nowtime.toLocaleTimeString());
    }
    // 更新时间间隔
    setInterval("showTime()", 1000); 
    
    
历史评论
开始评论