Web前端学习之路(四)JavaScript入门

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、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();

使用

格式:数组变量名[索引]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值