JavaScript

最新推荐文章于 2024-12-22 11:04:29 发布

原创最新推荐文章于 2024-12-22 11:04:29 发布 · 189 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了JavaScript的基础概念，包括其作为客户端脚本语言的角色、与HTML和CSS的关系，以及如何在网页中使用JavaScript实现动态效果。文章还提供了内部式、外部式及内联式的JavaScript示例，并展示了如何定义和使用JavaScript对象。

什么是JavaScript？
JavaScript是一种客户端脚本语言（轻量级编程语言）
JavaScript通常被直接嵌入HTML页面，有浏览器解释执行
JavaScript是一种解释性语言（代码不进行预编译）
弱类型和基于对象。
JavaScript的三个核心:ECMAScript基本语法、DOM、BOM
前端Web技术的组成：HTML、CSS、JavaScropt

HTML是一种标记语言，又来结构化网页内容并赋予定义，例如定义段落、标题或嵌入图片、视频。
CSS是一种样式规则语言，将样式应用于HTML内容，例如颜色、背景、字体、布局等。
JavaScript 是一种脚本语言，可以用来创建动态更新内容，控制多媒体，制作图片动画效果。

JavaScript使用方法

内部JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
    <script>
        /*内部式嵌入*/
        var str="富贵险中求";
        console.log(str);
    </script>
</head>
<body>
    <h1>JavaScript语言的使用</h1>
    
</body>
</html>

外部式JavaScript

<script type = "text/javascript" src = "my.js"></script>

内联式JavaScript处理器
将js代码写入html代码中，如在html标签的时间中或超链接里。

<button onclick="alert('Hello World')">Hello World</button>

JavaScript输出方式：

<script>
window.alert("Hello World")//弹出警示框
document.write("页面输出的方式")//方法将内容写到html文档中
document.getElementById("did").innerHTML="div层中的输出"; //写入到HTML元素
console.log("输出到控制台")//写入到浏览器的控制台
</script>

undefined 和null的区别

typeof undefined 	//undefined
typeof null 		//object
null === undefined  //false (首先比较两边数据类型是否相等，再比较数值）
null == undefined 	//true

对象定义和使用

原始方式

<script>
        var person = new Object（）;
        person.name = "张三";
        person.age = 15;
        person.say=function(){
            console.log("name: "+this.name+"age: "+this.age);
        }
        person.say();
    </script>

工厂方式

  <script>
        function createObject(name,age){
            var person = new Object();
            person.name = name;
            person.age = age;
            person.say = function(){
                console.log("name:"+name+" age:"+age);
            }
            return person;
        }
        var p1 = createObject("张三",14);
        console.log(p1.name);
        console.log(p1.age);

        var p2 = createObject("李四",15);
        console.log(p2.name);
        console.log(p2.age);

    </script>

使用自定义构造函数创建对象

 <script>
        function Person(name,age){
            this.name = name;
            this.age = age;
            this.say = function(){
                console.log(name+":"+age);
            }

        }
        var p1 = new Person("张三",14);
        var p2 = new Person("李四",15);
        p1.say();
        p2.say();

    </script>

直接创建自定义对象

  <script>
        var person ={name:"张三", age:14,say:function(){
            console.log(this.name+":"+this.age);
        }};
        console.log(person.name);
        console.log(person.age);
        person.say();
    </script>