前端简单入门第六讲 认识JavaScript

7 篇文章 1 订阅
25 篇文章 2 订阅

JavaScript概述

什么是JavaScript?

简单一句话,JavaScript是运行在浏览器端的脚本语言。可参考W3School上对于JavaScript的简单描述:
这里写图片描述

JavaScript的历史

JavaScript的历史可简单了解一下,同样也可参考W3School对其的描述:
这里写图片描述

JavaScript的组成

可参考W3School对其的描述:
这里写图片描述
我也简单写一下:

  • ECMAScript:JavaScript 的核心,ECMAScript描述了该语言的语法和基本对象。
  • DOM:DOM(Document Object Model,文档对象模型)是HTML和XML的应用程序接口(API)。DOM将把整个页面规划成由节点层级构成的文档。HTML或XML页面的每个部分都是一个节点的衍生物。
  • BOM:BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作。

JavaScript的用途

简单一句话,JavaScript将使页面更加丰富,使页面动起来!!!

JavaScript的基本语法

区分大小写

与Java一样,变量、函数名、运算符以及其他一切东西都是区分大小写的。比如:变量test与变量TEST是不同的。

变量是弱类型的

与Java不同,JavaScript是一个弱变量类型语言。与Java和C不同,JavaScript中的变量无特定的类型,定义变量时只用var运算符,可以将它初始化为任意值。因此,可以随时改变变量所存数据的类型(尽量避免这样做)。例如:

var color = "red";
var num = 25;
var visible = true;

每行结尾的分号可有可无

Java、C都要求每行代码以分号(;)结束才符合语法。JavaScript则允许开发者自行决定是否以分号结束一行代码。如果没有分号,JavaScript就把这行代码的结尾看做该语句的结尾(与Visual Basic和VBScript相似),前提是这样没有破坏代码的语义。最好的代码编写习惯是总加入分号,因为没有分号,有些浏览器就不能正确运行,不过根据ECMAScript标准,下面两行代码都是正确的:

var test1 = "red"
var test2 = "blue";

注释

注释与Java、C语言的注释相同。JavaScript借用了这些语言的注释语法。有两种类型的注释:

  • 单行注释以双斜杠开头(//);
  • 多行注释以单斜杠和星号开头(/*),以星号和单斜杠结尾(*/)。

例如:

//this is a single-line comment

/*this is a multi-
line comment*/

括号表示代码块

从Java中借鉴的另一个概念是代码块。代码块表示一系列应该按顺序执行的语句,这些语句被封装在左括号({)和右括号(})之间。例如:

if (test1 == "red") {
    test1 = "blue";
    alert(test1);
}

命名变量

变量名需要遵守两条简单的规则:

  • 第一个字符必须是字母、下划线(_)或美元符号($);
  • 余下的字符可以是下划线、美元符号或任何字母或数字字符。

下面的变量都是合法的:

var test;
var $test;
var $1;
var _$te$t2;

JavaScript的数据类型

JavaScript将数据类型分成两类:

  • 原始类型(primitive type)
    • Undefined:未定义类型
    • Boolean:布尔类型
    • Number:数字类型
    • String:字符或字符串类型
    • Null:空
  • 引用类型
    对象类型,对象类型默认值是null。

关于JavaScript的数据类型,我觉得我就理解一点皮毛,读者如想进一步探究,可参考其他学习资料,我也愿意和大家讨论。

JavaScript的运算符

JavaScript中的运算符与Java中基本一致!只不过JavaScript有一个===全等于的运算符比较特殊,全等于是类型和值都一致的情况下才为true,而==只要值相等就可以了。

JavaScript的语句

JavaScript的语句与Java的语句一致!

JavaScript通常开发的步骤

JavaScript通常都由一个事件触发,继而触发一个函数,所以我们要定义一个函数,获得操作对象的控制权以及修改要操作的对象的属性或值。
JavaScript函数语法:

function 函数名称() {
	这里是要执行的代码
}

JavaScript还有一种匿名函数,其语法为:

window.onload = function(){ // 事件 = 函数(匿名函数)

}

事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行了。JavaScript的常见事件可参考W3School对其的记载:
这里写图片描述

JavaScript的引入方式

JavaScript的引入方式通常有两种方式:

  1. 页面内直接编写JavaScript代码,JavaScript代码需要使用<script></script>包括;
  2. 将JavaScript的代码编写到一个xxx.js的文件中,然后在HTML文档中引入该xxx.js文件即可。

JavaScript的输出

alert()直接弹框

在这里插入图片描述

document.write()向页面输出

在这里插入图片描述

console.log()向浏览器控制台输出

在这里插入图片描述

使用元素的innerHTML属性向页面输出

在这里插入图片描述

  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:白松林 返回首页

打赏

李阿昀

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值