【JavaScript】基础知识

最新推荐文章于 2024-03-10 14:16:37 发布

我要手撕源码

最新推荐文章于 2024-03-10 14:16:37 发布

阅读量309

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48171371/article/details/113646992

版权

代码可以直接复制粘贴然后进行测试！
也可以在这里测试

JavaScript 输出

JavaScript 没有任何打印或者输出的函数。

JavaScript 显示数据

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

使用 document.write() 方法将内容写到 HTML 文档中。

使用 innerHTML 写入到 HTML 元素。

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

代码

<html>
    <body>
        <h1 id="el">4种显示数据的方式</h1>
        <button onclick="test1()">test：1</button><br/>
        <button onclick="test2()">test：2</button><br/>
        <button onclick="test3()">test：3</button><br/>
        <button onclick="test4()">test：4</button>
    </body>
    <script>
        function test1() {
   
            window.alert("这是第一种方式");
        }
        function test2() {
   
            document.write("这是第二种方式，在页面加载后执行会直接覆盖页面,请重新刷新页面！");
        }
        function test3() {
   
            var e = document.getElementById("el");
            e.innerHTML = "第三种方式";
        }
        function test4() {
   
            console.log("第四种方式在控制台输出...");
        }
    </script>
</html>

JavaScript 语法

JavaScript 是一个脚本语言。

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

js中花括号{}表示对象，方括号[]表示数组

字面量

在编程语言中，一般固定值（常量）称为字面量，如 3.14。

数字（Number）字面量

整数：3.14

小数：314

科学计数(e)：123e5

字符串（String）字面量

单引号：‘hello’

双引号：“hello”

表达式字面量

用于计算：5 + 6

数组（Array）字面量

定义一个数组：[1, 2, 3]

对象（Object）字面量

定义一个对象：{name: “allen”, id: 1234, age: 20}

函数（Function）字面量

定义一个函数：function myFunction(a, b) { return a * b;}

变量

在编程语言中，变量用于存储数据值。

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

var x, length
x = 5
length = 6

函数

JavaScript 语句可以写在函数内，函数可以重复引用：

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

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

操作符

z = (x + y) * 10

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

语句

在 HTML 中，JavaScript 语句向浏览器发出的命令。

语句是用分号分隔：

x = 5 + 6;

y = x * 10;

关键字

JavaScript 关键字用于标识要执行的操作。

和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用。

var 关键字告诉浏览器创建一个新的变量：

以下是 JavaScript 中最重要的保留字（按字母顺序）：


abstract	else	instanceof	super
boolean	enum	int	switch
break	export	interface	synchronized
byte	extends	let	this
case	false	long	throw
catch	final	native	throws
char	finally	new	transient
class	float	null	true
const	for	package	try
continue	function	private	typeof
debugger	goto	protected	var
default	if	public	void
delete	implements	return	volatile
do	import	short	while
double	in	static	with

注释

不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略：
// 我不会执行

数据类型

常用数据类型：数字，字符串，数组，对象等等：

字母大小写

JavaScript 对大小写是敏感的。

字符集

JavaScript 使用 Unicode 字符集。

JavaScript 语句

分号

用于分隔 JavaScript 语句。

在一行中编写多条语句。（a = 5; b = 6; c = a + b;）

分号来结束语句是可选的。

代码

JavaScript 代码是 JavaScript 语句的序列。

浏览器按照编写顺序依次执行每条语句。

语句标识符

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 会忽略多余的空格。

您可以向脚本添加空格，来提高其可读性。

对代码行进行折行

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

//正确
document.write("你好 \
世界!");

//错误：只能是文本字符串中换行
document.write \ 
("你好世界!");

JavaScript 注释

JavaScript 注释可用于提高代码的可读性。

单行注释：//

多行注释：/**/

//这是单行注释

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

JavaScript 变量

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

命名

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

变量必须以字母开头

变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）

变量名称对大小写敏感（y 和 Y 是不同的变量）

声明（创建）变量

在 JavaScript 中创建变量通常称为"声明"变量。

// var 关键词来声明变量
var x;  //变量声明之后，该变量是空的（它没有值）。
// 给变量赋值
x = "hello";
//或者在声明时赋值
var y = "hi";
//变量也可以给其他变量赋值
x = y;

一条语句，多个变量

只需要用逗号隔开

var lastname=“Doe”, age=30, job=“carpenter”;

声明无值的变量

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

在执行过以下语句后，变量 x的值将是 undefined：

var x;

重新变量

如果重新声明 JavaScript 变量，该变量的值不会丢失：

var y = "hi";
var y;//此时y中的值为hi

算数

变量来做算数

x=y+2;

JavaScript 数据类型

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

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

**注：*Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

JavaScript 拥有动态类型

这意味着相同的变量可用作不同的类型：

var x; // x 为 undefined

var x = 5; // 现在 x 为数字

var x = “John”; // 现在 x 为字符串

基本类型

//字符串
var str1 = "hello";
var str2 = 'hi'
var str3 = "he is 'mike'" //双引号中可以嵌套单引号

//数字
var num1 = 12;
var num2 = 12.34;
var num3== 12e3;  //12的3次方

//布尔
var b1 = true;
var b2 = false;

//null：清空变量
num1 = null;

//Undefined 这个值表示变量不含有值。

引用数据类型

//数组
var arr1 = new Array();
arr1[0] = "hello";
arr1[1] = "world";
var arr2 = new Array("hello","world");
var arr3 = ["hello","world"];

//对象
var obj1 = {
   name: "allen", id: 1234};
var obj2 = {
   
    name: "allen", 
    id: 1234
};
var x = obj1.name;    //方式一：调用变量
var y = obj1["name"]; //方式二：调用变量

声明变量类型

当您声明新变量时，可以使用关键词 “new” 来声明其类型

JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

JavaScript 对象

JavaScript 对象是变量的容器。

var person = {
   
    name:"allen",
    age:20
};

对象属性

说明

我们通常认为 “JavaScript 对象是键值对的容器”

键值对通常写法为 name : value (键与值以冒号分割)。

键值对在 JavaScript 对象通常称为 对象属性。

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

PHP 中的关联数组

Python 中的字典

C 语言中的哈希表

Java 中的哈希映射

Ruby 和 Perl 中的哈希表

访问对象属性

var person = {
   
    name:"allen",
    age:20
};

var x = person.name;
var y = person["name"];

对象方法

说明

对象的方法定义了一个函数，并作为对象的属性存储。

对象方法通过添加 () 调用 (作为一个函数)。

以下声明了getInfo方法

var person = {
   
    name:"allen",
    age:20,
    getInfo: function()
    {
   
        return this.name + this.age;
    },
    sayWord: function(word) //带参数
    {
   
        return this.name + 'say: ' + word;
    }
};

访问对象方法

var person = {
   
    name:"allen",
    age:20,
    getInfo: function()
    {
   
        return this.name + this.age;
    },
    sayWord: function(word) //带参数
    {
   
        return this.name + 'say: ' + word;
    }
};

person.getInfo();
person.sayWord("哈哈");

JavaScript 函数

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

声明

//关键词 function
function functionname1()
{
   
    // 执行代码
}

//带参数函数
function functionname2(var1,var2)
{
   
    // 执行代码
}

调用

两种方式

<body>
    <!--事件驱动-->
    <button onclick="fun1()">click me</button>
</body>

<script>
    function fun1(){
    
        alert("hello js");
    }
    
    fun1();//主动调用
</script>

带有返回值的函数

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

<script>
    function fun(x){
    
        return x*x;
    }
    
    var result = fun(3); // result=9
</script>

return也可以用于结束函数，返回值是可选的。

<script>
    function fun(x){
    
    if(x<0) return;//结束函数
    return x * x;
    }
    
    var result = fun(3); // result=9
	var rs = fun(3); // rs = undefined
</script>

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕，本地变量就会被删除。

<script>
function fun(){
    
    var x; //局部变量，只能在fun中使用
}
var y; //全局属性

</script>

变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

向未声明的 JavaScript 变量分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。

myName = "allen"; //window 的一个属性。
window.myName;//"allen"

//非严格模式下给未声明变量赋值创建的全局变量
//全局对象的可配置属性，可以删除。
var var1 = 1; // 全局属性：不可配置
var2 = 2; // 没有使用 var 声明。全局属性：可配置

delete var1; // false 无法删除
console.log(var1); //1

delete var2; 
console.log(delete var2); // true
console.log(var2); // undefined

JavaScript 作用域

作用域是可访问变量的集合。

变量：变量、对象和函数

JavaScript 函数作用域: 作用域在函数内修改。

ES5

局部变量

在函数中通过var声明的变量

在函数参数中的变量

全局变量

在函数外通过声明的变量（不可配置，不能用delete删除）

没有声明就使用的变量（可配置）

ES5缺点之一：没有块级作用域。在ES6之前，大部分人会选择使用闭包来解决这个问题。

块级作用域：在下面let和const涉及

JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

HTML 页面完成加载

HTML input 字段改变时

HTML 按钮被点击

//onclick:用户点击事件
<button onclick="this.innerHTML=Date()">现在的时间是?</button>

常见的HTML事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

更多事件列表: JavaScript 参考手册 - HTML DOM 事件。

在 HTML DOM 章节中你将会学到更多关于事件及事件处理程序的知识。

JavaScript 字符串

JavaScript 字符串用于存储和处理文本。

声明和使用

var str1 = "hello";
var str2 = 'world';

alert(str1);    // hello
alert(str2[0]); // w
alert(str2[10]);// undefined

特殊字符

反斜杠是一个转义字符。转义字符将特殊字符转换为字符串字符

var str1 =  "We are the so-called "Vikings" from the north."; ///Uncaught SyntaxError: Unexpected identifier
var str2 = "We are the so-called \"Vikings\" from the north."

常用特殊字符

代码	输出
’	单引号
"	双引号
\	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\f	换页符

字符串可以是对象

不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用

var x = "allen";
var y = new String("allen")

最低0.47元/天解锁文章

我要手撕源码

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】基础知识

代码可以直接复制粘贴然后进行测试！也可以在这里测试JavaScript 输出JavaScript 没有任何打印或者输出的函数。JavaScript 显示数据使用 window.alert() 弹出警告框。使用 document.write() 方法将内容写到 HTML 文档中。使用 innerHTML 写入到 HTML 元素。使用 console.log() 写入到浏览器的控制台。代码<html> <body> <h1.
复制链接

扫一扫