目录
本章目标
- 掌握JavaScript的组成
- 掌握JavaScript的基本语法
- 会定义和使用函数
- 会使用工具进行代码调试
一.JavaScript基础
概述
JavaScript是一种基于对象和事件驱动的脚本语言，用于在网页上实现交互和动态效果。它是一种客户端脚本语言，意味着它运行在用户的计算机上，而不是在服务器上。JavaScript可以与HTML和CSS配合使用，使网页更加动态和丰富。
特点
- 向HTML页面中添加交互行为
- 脚本语言，语法和JAVA类似
- 解释性语言，边执行边解释
JavaScript 基本机构
语法
调用对象
语法：
对象.方法名();
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//对象.方法名();JavaScript调用方法的语法
document.write("<h1>哈哈哈</h1>")
document.write("这是JS基础！");
</script>
</head>
<body>
</body>
</html>document.write("这是JS基础！");代表：调用对象(当前文件)，执行方法(写入)"这是JS基础！"语句，因此上述代码等价于在当前html文件写<body>中写入语句。
执行方法同样会执行标签
网页中引用JavaScript的方式
二. JavaScript核心语法
变量
JavaScript中的变量可以存储不同类型的值，包括数字、字符串、布尔值、对象等。变量的值可以根据需要随时更改。
当我们用到某个数据时，可以将该数据存入变量中再引用该变量，无需重复写入该数据。
案例
<script type="text/javascript">
//申明一个变量(名字自定义)
var username = "JS基础";
document.write("哈哈哈：" +username+"<br/>");//<br/>换行符
//变量的重新赋值
var username = "JavaScript基础";
var index1 = "哈哈哈";
document.write(index1+"："+username);
</Script>数据类型
typeof运算符
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
document.write("<h2>对变量或值调用typeof运算符返回值：</h2>");
var width,height = 10,name = "rose";
var date = new Date(); //创建了一个Date类型的对象 并将对象在内存中的引用地址 赋给了变量date
var flag = (11>22);
var x = null;
document.write("变量width的数据类型是===>"+typeof(width)+"<br/>");
document.write("变量height的数据类型是===>"+typeof(height)+"<br/>");
document.write("变量name的数据类型是===>"+typeof(name)+"<br/>");
document.write("变量date的数据类型是===>"+typeof(date)+"<br/>");
document.write("变量flag的数据类型是===>"+typeof(flag)+"<br/>");
document.write("变量x的数据类型是===>"+typeof(x)+"<br/>");
</script>
</head>
<body>
</body>
</html>
String数据类型
在JavaScript中，string（字符串）类型用于存储和操作文本数据。
案例1：
string.length:返回对应字符串的长度。
<script type="text/javascript">
var message ="白日依山尽，黄河入海流，欲穷千里目，更上一层楼";
x = message.length; //length属性返回的是字符串的长度
document.write("x的值是："+x);
</script>案例2：
string.charAt(index):返回指定位置的字符 注：计算机从0开始计数
<script type="text/javascript">
var message ="白日依山尽，黄河入海流，欲穷千里目，更上一层楼";
var y = message.charAt(3);
document.write("y的值是==>"+x);
</script>案例3
indexOf(str, index)：查找指定的字符串在字符中首次出现的位置。
<script type="text/javascript">
var message ="白日依山尽，黄河入海流，欲穷千里目，更上一层楼";
var z = message.indexOf("河");//返回指定字符串在目标第一次出现的位置
document.write("z第一次出现的位置："+z);
</script>案例4
substring(index1, index2):f返回区间 [index1,index2) 之间的字符
<script type="text/javascript">
var message ="白日依山尽，黄河入海流，欲穷千里目，更上一层楼";
var submessage = message.substring(0, 3);
document.write("submessage的值是："+submessage+"<br/>");
var submessage = message.substring(3);
document.write("submessage的值是："+submessage);
</script>案例5
split(str)将字符串分割为字符串数组
<script type="text/javascript">
var message = "白日依山尽，黄河入海流，欲穷千里目，更上一层楼";
var mlist = message.split("，");//以逗号为分隔符，将文本分割为字符串组
for(var i in mlist){document.write("mlist["+i+"]："+mlist[i]+"<br/>");}
</script>boolean数据类型
<script type="text/javascript">
var flag=(10>100)
document.write("flag是："+flag+"<br/>")
</Script>数组
案例
<script type="text/javascript">
//var 数组名称 = new Array(长度)
var ilist = new Array(8);//数组的创建
ilist[0] = 15; //数组的赋值
ilist[1] = 20;
//数组的遍历
document.write("ilist[0]的值是："+ilist[0]+"<br/>");
document.write("ilist[1]的值是："+ilist[1]+"<br/>");
document.write("剩余未赋值的数组的数据类型是："+typeof(ilist[2])+"<br/>");
var fruit = new Array("apple", "orange", "peach", "banana");
document.write(fruit[1]);
</script>
运算符号
算数运算符案例：
<script type="text/javascript">
var x = 10;
var y = 20;
var z = x + y;
var Z1 = x * y;
var Z2 = x / y;
var Z3 = x % 3;//取余数
document.write("z的值是："+z+"<br/>");
document.write("Z1的值是："+Z1+"<br/>");
document.write("Z2的值是："+Z2+"<br/>");
document.write("Z3的值是："+Z3+"<br/>")
var a = 100;
a++;
document.write("a的值是："+a+"<br/>");;
var b = 100;
b--;
document.write("b的值是："+b);
</script>赋值运算符案例
赋值运算符:将符号右边的值，赋给左边的变量。
<script type="text/javascript">
var z = 10 ;
z += 6;//在Z原有值上追加6
document.write("z的值是："+z+"<br/>");
z-=10;//在Z原有值上追减10
document.write("Z的值是："+z+"<br/>");
</script>逻辑运算符案例
与运算符(&&):两者都要满足条件 或运算符(||):其中之一满足条件即可。
<script type="text/javascript">
var a = 5;
var b = 10;
if (a > 0 && b > 0)
document.write("a和b都大于0"+"<br/>");
var x = 5;
var y = 10;
if (x > 6|| y > 6);
document.write("x或y大于6");
</script>控制语句
顺序运行结构案例
<script type="text/javascript">
document.write("这是顺序运行语句1"+"<br/>");
document.write("这是顺序运行语句2"+"<br/>");
document.write("这是顺序运行语句3");
</script>选择语法结构：
语法：
if(条件){条件为真的时候执行代码...}if(条件){条件为真的时候执行代码...}
else{条件为假时执行代码}if(条件1){条件1满足执行此处代码}
else if(条件2){条件1不满足执行此处代码}
else if(条件3){条件2不满足执行此处代码}switch(数值){case 值1:{break;} case 值2:{break;}...befault:{break;}}案例
<script type="text/javascript">
var a = 10;
if(a>5){
document.write("条件为真");
}
var b = 20;
if(b>20){document.write("b的值大于20"+"<br/>");}
else{document.write("b的值不大于20");}
var c = 30;
if(c<20){document.write("c的值小于20");}
else if(c<25){document.write("c的值小于25");}
else if(c>25){document.write("c的值大于25");}
var num = 2;
switch(num){
case 1:{document.write("num的值和switch中case 1相同，num值为1"); break;}
case 2:{document.write("num的值和switch中case 2相同，num值为2"); break;}
default:{document.write("num的值和switch中case的值都不同"); break;}
}
</script>循环结构
语法
while(条件){条件为真，则循环执行此处代码}
for(var 初始值;范围限定;自增情况){达到范围之前，循环执行此处代码}
for(var 数值 in 数组){如果条件中的数值在条件中的数组中，则执行此处代码}
案例
<script type="text/javascript">
document.write("下面是while循环案例"+"<br/>");
var a = 1;
while(a<=3){document.write(a+"<br/>");a++;}
document.write("下面是for循环案例"+"<br/>")
for(b=4;b<=6;b++){document.write(b+"<br/>");}
document.write("下面是使用for in语句遍历数组的案例"+"<br/>")
var fruit=["apple","orange","peach","banana"];
for(var i in fruit){document.write("数组"+i+"的元素是："+fruit[i]+"<br/>");}
</script>循环中断结构
语法
break：循环到此结束，不继续执行下面的循环
continue：跳过此循环，继续执行下面的循环
案例
<script type="text/javascript">
var i = 0;
for(i=0;i<=6;i++){
if(i==3){document.write("continuet跳过的元素是"+i+"<br/>");continue;}
if(i==5){document.write("break在元素等于"+i+"时终止循环"+"<br/>");break;}
document.write("这个数字是："+i+"<br/>")
}
</script>
常用的输出/输入
语法
alert("提示信息");
prompt("提示信息","输入框的默认颜色")；alert 语法：用于写入窗口提示信息。
prompt语法：可以使从窗口提示栏输入框将内容写入网页中。
<script type="text/javascript">
alert("此处显示窗口提示信息");
var message=prompt("请在输入框中输入内容");
document.write("输入的内容是"+message);
</script>常用的系统函数
从浏览器输入框中输入的所有内容数据类型都是文本类型，如86也是文本类型并非数值类型
因此需要通过系统函数进行数据类型的转换。
使用浏览器文本框进行四则运算案例
<script type="text/javascript">
var num1 = prompt("输入第一个数字");
var num2 = prompt("输入运算符号");
var num3 = prompt("输入第二个数字")
var innum1 = parseInt(num1);
var innum2 = parseInt(num3);
switch(num2){
case "+":{alert(num1+"+"+num3+"="+(innum1+innum2));break;}
case "-":{alert(num1+"-"+num3+"="+(innum1-innum2));break;}
case "*":{alert(num1+"*"+num3+"="+(innum1*innum2));break;}
case "/":{alert(num1+"/"+num3+"="+(innum1/innum2));break;}
default:{document.write("输入的符号错误！！！");break;}
}
</script>自定义函数
注：自定义函数的函数名不能和内置函数名重合，否则无法生效。
使用以下函数可通过对应操作调用函数 。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function fun1(){
var num1 = prompt("输入第一个数字");
var num2 = prompt("输入运算符号");
var num3 = prompt("输入第二个数字")
var innum1 = parseInt(num1);
var innum2 = parseInt(num3);
switch(num2){
case "+":{alert(num1+"+"+num3+"="+(innum1+innum2));break;}
case "-":{alert(num1+"-"+num3+"="+(innum1-innum2));break;}
case "*":{alert(num1+"*"+num3+"="+(innum1*innum2));break;}
case "/":{alert(num1+"/"+num3+"="+(innum1/innum2));break;}
default:{document.write("输入的符号错误！！！");break;}
}
}
function fun2(uname){alert(uname+"大讲堂开始了");fun1();}
</script>
</head>
<body>
<p>下面是无参数的自定义函数案例</p>
<input type="button" value="点我进入四则运算器" onclick="fun1()"/><br/>
<p>下面是有参数的自定义函数案例</p>
<input type="button" value="点我进入第二个方法" onclick="fun2('此处的元素将被赋值给uname')"/>
</body>
</html> 
变量作用域
在JavaScript中，变量的作用域指的是变量的可访问性和可见性的范围。
| 全局作用域 | 在任何函数外部定义的变量具有全局作用域，这意味着它们可以在代码中的任何位置访问。 |
| 局部作用域 | 函数内部定义的变量具有函数作用域，这意味着它们只能在函数内部访问。 |
| 块级作用域 | 在块级作用域内定义的变量只在该块级作用域内可见，外部无法访问。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var i = 20;//这是全局变量
function first(){
var i = 5 ;//这是局部变量
for (var j = 0;j<i;j++){document.write(" "+j);}
}
function second(){
var t = prompt("输入一个数字");
if(t>i){document.write(t);}
else{document.write(i);first();}
}
</script>
</head>
<body onload="second()"><!--onload="second()":主体加载则立即触发second函数-->
</body>
</html> 
扫一扫
823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
