Web前端学习之路（四）JavaScript入门

最新推荐文章于 2024-10-22 15:56:45 发布

原创最新推荐文章于 2024-10-22 15:56:45 发布 · 263 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

Web前端专栏收录该内容

5 篇文章

订阅专栏

本文全面介绍了JavaScript的基础知识，包括语言概述、变量定义、函数使用、数据类型解析、运算符及程序控制语句详解，以及数组的基本操作。适合初学者快速掌握JavaScript核心概念。

一、JavaScript简介

JavaScript，简称JS，是一种脚本语言。

引用

方法1：使用<script>在HTML页面中插入JavaScript

<body>
    <script type="text/Javascript">
    	// 实现功能 
        alert("hello world")
    </script>
</body>

方法2：引用外部JS文件

<head>
	<meta charset="UTF-8">
	<title>JS学习</title>
    <!--文件结构为
	|- WebWorkspace
	 |- HTML
	  |- index.html
	 |- JavaScript
	  |- helloWorld.js
	-->
	<script type="text/javascript" src="..\JavaScript\helloWorld.js"></script>
</head>

alert("hello world!");

调试方法

alert()方法：浏览器弹框

console.log()方法：控制台输出

二、变量

定义

定义：同其他程序设计语言一样，变量是用于临时存储信息。

格式：var 变量名 = 变量值;

var x=1, name="Test";

PS. JS中的变量区分类型，但没有类型关键字。

局部变量和全局变量

局部变量：在函数内部创建的变量，其他函数不能使用。

全局变量：在函数外部创建的变量，在函数之间可以共享使用。

// 全局变量
var x = 1;

function fun1(){
	// 局部变量
	var y = 2;
	console.log(x+y);
}

var fun2 = function() {
	console.log(x);
}

// 调用函数
fun1();
fun2();

三、函数

定义：自定义函数是完成某一功能的代码段，可重复执行，方便管理和维护。

格式：
// 函数声明，可以先使用后定义，推存使用
function 函数名(){
	// 代码功能
}

var 函数名 = function(){
	// 代码功能
}

案例上码请看上面。

四、数据类型

普通数据类型

类型	作用
number	数学类型，整型浮点型都包括
string	字符串类型，必须放在单引号或者双引号中
boolean	布尔类型，只有true和false两种值
underfine	未定义，一般指的是己经声明，但是没有赋值的变量
null	空对象类型，var a = null，和 var a=""有区别

特殊对象类型

类型	作用
Object	对象类型，在js常见的有window,document,array等
NaN	是Number的一种特殊类型，isNaN()，如果是数字返回false，不则返回true

类型转换

函数	作用
parseInt()	转为整型
parseFloat()	转为浮点型
Number()	转为数字型
Boolean()	转为布尔型

五、运算符

比较运算符

定义：用于比较两个值，结果是true或者false。

范围：>、>=、!=、<、<=

逻辑运算符

定义：包含逻辑与、或、非等，结果是true或者false

范围：

&& 与
|| 或
| 非

三目运算符

定义：根据不同的条件，执行不同的操作或返回不同的值

格式：条件？值1 : 值2

举例：
var x = 1;
var a = x > 1 ? "大于": "小于";

优先级表格

顺序	符号	描述
1	()	小括号
2	++、–	自加、自减
3	* / %	乘除取余
4	+ -	加减
5	< <= > >=	小于、小于等于、大于、大于等于
6	== !=	等于不等于
7	&&	逻辑与
8	\|\|	逻辑或
9	?:	三目运算符
10	=	赋值

六、程序控制语句

条件判断类

if(条件){
    // 
} else if(条件){
          
} else{
    
}

条件分支类

switch(变量){
    case 值:
        // 代码
      	break;
    case 值:
        // 代码
        break;
    default:
        // 代码
        break; 
}

循环类

// for循环
for (var i = 0; i < 5; i++) {
    console.log(i);
}

// while循环
var x = 0;
while(x < 5){
    console.log(x);
    x += 1;
}

// do while循环
var y = 0;
do{
    console.log(y);
    y += 1;
}while(y < 5);

七、数组

创建

function fun() {
	// 创建一个不指定长度的数组
	var array = new Array();
	// 创建一个指定长度的数组
	var array2 = new Array(5);
	// 创建一个带有默认值的数组
	var array3 = new Array(2, 4, "a");
	// 创建一个数组，并进行赋值
	var array4 = [2, 4, "a", "8"]
	// 遍历数组
	arrayShow(array);
	arrayShow(array2);
	arrayShow(array3);
	arrayShow(array4);
}

function arrayShow(array) {
	for(var i in array){
		console.log(array[i]);
	}
}
// 调用函数
fun();