JavaScript教程带你快速入门

Posted 2021-09-19 OIqng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript教程带你快速入门相关的知识，希望对你有一定的参考价值。

javascript 简介

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。

JavaScript 是基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript 用法

html 中的脚本必须位于标签之间。

脚本可被放置在 HTML 页面的和部分中。

<script>标签

<script>
alert("我的第一个 JavaScript");
</script>

<body> 中的 JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        alert("我的第一个 JavaScript");
    </script>
</body>
</html>

JavaScript 函数和事件

上面代码中的 JavaScript 语句，会在页面加载时执行。如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数，如：用户点击按钮时执行代码。

<head> 中的 JavaScript 函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function myFunction() {
            alert("我的第一个 JavaScript函数");
        }
    </script>
</head>
<body>
    <button type="button" onclick="myFunction()">按钮</button>
</body>
</html>

点击按钮时调用JavaScript函数如下图

<body> 中的 JavaScript 函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button type="button" onclick="myFunction()">按钮</button>
    <script>
        function myFunction() {
            alert("我的第一个 JavaScript函数");
        }
    </script>
</body>
</html>

效果一样如下图

外部的 JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="firstScript.js"></script>
</head>
<body>
    <button type="button" onclick="myFunction()">按钮</button>
</body>
</html>

firstScript.js代码如下

function myFunction(){
    alert("我的第一个 JavaScript函数");
}

JavaScript 输出

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

使用 window.alert()弹出警告框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.alert('弹出警告框');
    </script>
</head>
<body>

</body>
</html>

使用document.write() 将内容写到 HTML 文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.write('将内容到HTML文档中');
    </script>
</head>
<body>

</body>
</html>

使用innerHTML 写入到 HTML 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="demo">我的第一个段落</p>
    <script>
        document.getElementById("demo").innerHTML = "写入HTML元素";
    </script>
</body>
</html>

使用console.log() 写入到浏览器的控制台

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log("写入控制台")
    </script>
</head>
<body>

</body>
</html>

JavaScript 语法

JavaScript 是一个脚本语言，是一个轻量级，但功能强大的编程语言。

JavaScript 字面量

数字（Number）字面量可以是整数或者是小数，或者是科学计数(e)：

3
3.14
3.1415926e5

字符串（String）字面量可以使用单引号或双引号：

‘Demo’
“Demo”

表达式字面量用于计算：

3+9
3*9

数组（Array）字面量定义一个数组：

[1, 2, 3, 4, 5]

对象（Object）字面量定义一个对象：

{Name:“OIqng”, age:18}

JavaScript 变量

JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值：

var x = 4

JavaScript 操作符

类型	实例
赋值，算术和位运算符	= + - * /
条件，比较及逻辑运算符	== != < >

JavaScript 语句

x = 4 + 5;

JavaScript 关键字


abstract	else	instanceof
boolean	enum	int
break	export	interface
byte	extends	let
case	false	long
catch	final	native
char	finally	new
class	float	null
const	for	package
continue	function	private
debugger	goto	protected
default	if	public
delete	implements	return
do	import	short
double	in	static

JavaScript 注释

双斜杠 // 后的内容将会被浏览器忽略：

// 这是一个注释

JavaScript 数据类型

JavaScript 有多种数据类型：数字，字符串，数组，对象等等：

var x = 3; // Number 通过数字字面量赋值
var y = x * 10; // Number 通过表达式字面量赋值
var Name = “OIqng”; // String 通过字符串字面量赋值
var a = [1, 2, 3]; // Array 通过数组字面量赋值
var person = {Name:“OIqng”, age:18}; // Object 通过对象字面量赋值

JavaScript 函数

引用一个函数 = 调用函数(执行函数内的语句)。

function myFunction(a, b) {
   	return a + b;                             
// 返回 a + b 的结果
}

JavaScript 字母大小写

JavaScript 对大小写是敏感的，常见的是驼峰法的命名规则。

lastName

JavaScript 语句

分号 ;

分号用于分隔 JavaScript 语句

a = 4;
b = 5;
c = a + b;

JavaScript 代码

document.getElementById("demo").innerHTML("你好");

JavaScript 代码块

代码块以左花括号开始，以右花括号结束。

function myFunction() {
	document.getElementById("demo").innerHTML("你好")
}

JavaScript 语句标识符

语句	描述
break	用于跳出循环
catch	语句块，在 try 语句块执行出错时执行 catch 语句块
continue	跳过循环中的一个迭代
do … while	执行一个语句块，在条件语句为 true 时继续执行该语句块
for	在条件语句为 true 时，可以将代码块执行指定的次数
for … in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）
function	定义一个函数
if … else	用于基于不同的条件来执行不同的动作
return	退出函数
switch	用于基于不同的条件来执行不同的动作
throw	抛出（生成）错误
try	实现错误处理，与 catch 一同使用
var	声明一个变量
while	当条件语句为 true 时，执行语句块

空格

JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的：

var name=“OIqng”;
var name = “OIqng”;

对代码行进行折行

您可以在文本字符串中使用反斜杠对代码行进行换行:

<script>
        document.write("Hell\\
        World!");
</script>

JavaScript 注释

我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。

单行注释以 // 开头：

// 这是个注释

JavaScript 多行注释

/*
这是
一个
多行注释
*/

JavaScript 变量

变量是用于存储信息的"容器"。

变量可以使用短名称（如 x 和 y），也可以使用描述性更好的名称（如 age, sum）。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

一条语句，多个变量

var name=“OIqng”, age=18;

也可跨行声明

var name=“OIqng”,
age=18;

Value = undefined

在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。

var x;

JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

JavaScript 拥有动态类型

意味着在JavaScript中相同的变量可用作不同的类型：

 <script>
        var x;
        x = 5;
        console.log(x)
        x = "OIqng"
        console.log(x)
 </script>

JavaScript 字符串

字符串是存储字符的变量，可以是单引号或双引号中的任意文本：

<script>
    var answer;
    answer = "He is called 'OIqng'";
    console.log(answer);
    answer = 'He is called "OIqng"';
    console.log(answer);
</script>

JavaScript 数字

JavaScript 只有一种数字类型

<script>
    var x = 3.00;
    console.log(x);
    x = 3;
    console.log(x);
    x = 3.14e2;
    console.log(x);
    x = 3.14e-2;
    console.log(x);
</script>

JavaScript 布尔

布尔（逻辑）只能有两个值：true 或 false。

<script>
        var x = true;
        console.log(x);
        var y = false;
        console.log(y);
    </script>

JavaScript 数组

<script>
        var a = new Array();
        a[0] = 1;
        a[1] = 2;
        console.log(a);
</script>

JavaScript 对象

JavaScript 对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

<script>
        var person = {
            name : "OIqng",
            age : 18
        }
        console.log(person);
</script>

Undefined 和 Null

Undefined 这个值表示变量不含有值，可以通过将变量的值设置为 null 来清空变量。

<script>
        var x;
        console.log(x);
        x = null;
        console.log(x);
</script>

JavaScript 对象

JavaScript 对象是拥有属性和方法的数据。

真实生活中的对象，属性和方法

对象	属性	方法
	car.name =BMW car.color=Quantum blue	car.start() car.stop()

所有汽车都有这些属性，但是每款车的属性都不尽相同，所有汽车都拥有这些方法，但是它们被执行的时间都不相同。

JavaScript 对象

在 JavaScript中，几乎所有的事物都是对象，对象也是一个变量，但对象可以包含多个值（多个变量）

var car = "BMW";

var car = {
            type:"BMW",
            color:"Quantum blue"
}

对象属性

JavaScript 对象是键值对的容器

对象键值对的写法类似于：

php 中的关联数组
Python 中的字典
C 语言中的哈希表
Java 中的哈希映射
Ruby 和 Perl 中的哈希表

访问对象属性

var car = {
            type:"BMW",
            color:"Quantum blue"
}
console.log(car.color)
console.log(car["color"])

JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname() {
            
}

调用带参数的函数

在调用函数时，您可以向其传递值，这些值被称为参数，这些参数可以在函数中使用，您可以发送任意多的参数，由逗号 (,) 分隔：

myFunction(argument1,argument2)

带有返回值的函数

有时，我们会希望函数将值返回调用它的地方，通过使用 return 语句就可以实现。

在使用 return 语句时，函数会停止执行，并返回指定的值。

function myFunction() {
            var x = 3;
            return x;
}

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）,只要函数运行完毕，局部变量就会被删除。

全局 JavaScript 变量

在函数外声明的变量是全局变量&

以上是关于JavaScript教程带你快速入门的主要内容，如果未能解决你的问题，请参考以下文章

程序员带你十天快速入门Python,玩转电脑软件开发

程序员带你学习安卓开发，十天快速入门-基础知识

Git 入门级教程

phaser学习总结之phaser入门教程

程序员带你十天快速入门Python,玩转电脑软件开发