JavaScript学习笔记2

请你喝杯Java
111 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情

三、JavaScript基本语法

1、JavaScript代码嵌入方式

①HTML文档内

  • JavaScript代码要写在script标签内
  • script标签可以写在文档内的任意位置
  • 为了能够方便查询或操作HTML标签（元素）script标签可以写在body标签后面

可以参考简化版的HelloWorld

<!-- 在HBuilderX中，script标签通过打字“sc”两个字母就可以直接完整生成 -->
<script type="text/javascript">
	
	// 下面是同样实现HelloWorld功能的简化版代码
	document.getElementById("helloBtn").onclick = function() {
		alert("Hello simple");
	};
	
</script>

②引入外部JavaScript文档

在script标签内通过src属性指定外部xxx.js文件的路径即可。但是要注意以下两点：

  • 引用外部JavaScript文件的script标签里面不能写JavaScript代码
  • 先引入，再使用
  • script标签不能写成单标签 在这里插入图片描述

引入方式如下：

<body>
</body>

<!-- 使用script标签的src属性引用外部JavaScript文件，和Java中的import语句类似 -->
<!-- 引用外部JavaScript文件的script标签里面不能写JavaScript代码 -->
<!-- 引用外部JavaScript文件的script标签不能改成单标签 -->
<!-- 外部JavaScript文件一定要先引入再使用 -->
<script src="/pro02-JavaScript/scripts/outter.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
	
	// 调用外部JavaScript文件中声明的方法
	showMessage();
</script>

2、声明和使用变量

①JavaScript数据类型

  • 基本数据类型

    • 数值型：JavaScript不区分整数、小数

    • 字符串：JavaScript不区分字符、字符串；单引号、双引号意思一样。

    • 布尔型：true、false

      在JavaScript中，其他类型和布尔类型的自动转换。

      true：非零的数值，非空字符串，非空对象

      false：零，空字符串，null，undefined

      例如："false"放在if判断中

      // "false"是一个非空字符串，直接放在if判断中会被当作『真』处理
if("false"){
	alert("true");
}else{
	alert("false");
}

  • 引用类型

    • 所有new出来的对象
    • 用[]声明的数组
    • 用{}声明的对象

②变量

  • 关键字：var

  • 数据类型：JavaScript变量可以接收任意类型的数据

  • 标识符：严格区分大小写

  • 变量使用规则

    • 如果使用了一个没有声明的变量，那么会在运行时报错

      Uncaught ReferenceError: b is not defined

    • 如果声明一个变量没有初始化，那么这个变量的值就是undefined

3、函数

①内置函数

内置函数：系统已经声明好了可以直接使用的函数。

[1]弹出警告框
alert("警告框内容");
[2]弹出确认框

用户点击『确定』返回true，点击『取消』返回false

var result = confirm("老板，你真的不加个钟吗？");
if(result) {
	console.log("老板点了确定，表示要加钟");
}else{
	console.log("老板点了确定，表示不加钟");
}
[3]在控制台打印日志
console.log("日志内容");

在这里插入图片描述

②声明函数

写法1：

function sum(a, b) {
    return a+b;
}

写法2：

var total = function() {
    return a+b;
};

写法2可以这样解读：声明一个函数，相当于创建了一个『函数对象』，将这个对象的『引用』赋值给变量total。最后加的分号不是给函数声明加的，而是给整体的赋值语句加的分号。

③调用函数

JavaScript中函数本身就是一种对象，函数名就是这个 『对象』的『引用』。而调用函数的格式是：函数引用()。

function sum(a, b) {
    return a+b;
}

var result = sum(2, 3);
console.log("result="+result);

或：

var total = function() {
    return a+b;
}

var totalResult = total(3,6);
console.log("totalResult="+totalResult);

4、对象

JavaScript中没有『类』的概念，对于系统内置的对象可以直接创建使用。

①使用new关键字创建对象

// 创建对象
var obj01 = new Object();

// 给对象设置属性和属性值
obj01.stuName = "tom";
obj01.stuAge = 20;
obj01.stuSubject = "java";

// 在控制台输出对象
console.log(obj01);

②使用{}创建对象

// 创建对象
var obj02 = {
    "soldierName":"john",
    "soldierAge":35,
    "soldierWeapon":"gun"
};

// 在控制台输出对象
console.log(obj02);

③给对象设置函数属性

// 创建对象
var obj01 = new Object();

// 给对象设置属性和属性值
obj01.stuName = "tom";
obj01.stuAge = 20;
obj01.stuSubject = "java";

obj01.study = function() {
	console.log(this.stuName + " is studying");
};

// 在控制台输出对象
console.log(obj01);
// 调用函数
obj01.study();

或：

// 创建对象
var obj02 = {
	"soldierName":"john",
	"soldierAge":35,
	"soldierWeapon":"gun",
	"soldierShoot":function(){
		console.log(this.soldierName + " is using " + this.soldierWeapon);
	}
};

// 在控制台输出对象
console.log(obj02);
// 调用函数
obj02.soldierShoot();

④this关键字

this关键字只有两种情况：

  • 在函数外面：this关键字指向window对象（代表当前浏览器窗口）
  • 在函数里面：this关键字指向调用函数的对象
// 直接打印this
console.log(this);

// 函数中的this
// 1.声明函数
function getName() {
	console.log(this.name);
}

// 2.创建对象
var obj01 = {
	"name":"tom",
	"getName":getName
};
var obj02 = {
	"name":"jerry",
	"getName":getName
};

// 3.调用函数
obj01.getName();
obj02.getName();
avatar
文章
阅读
粉丝