-- 创造无限可能

JS学习-进阶篇

2023-08-09 09:23:11
269 人浏览 0 人点赞
有用,点赞支持一下

JavaScript能做什么?

  1. 增强页面动态效果(下拉菜单、图片轮播、信息滚动)
  2. 实现页面与用户之间实时、动态交互(用户注册、登陆验证等)

JS进阶篇学什么?

在JavaScript入门篇中,学习了如何插入JS、输出内容及简单的DOM操作,JavaScript进阶篇让您进一步的了解JS的变量、数组、函数、语法、对象、事件、DOM操作,制作简单的网页动态效果

什么是变量?

从字面上看,变量是可变的量;从编程角度讲,变量是用于存储某种/某些数值的存储器。可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服、玩具、水果…等。

逻辑 比较 操作符

两个操作数通过比较操作符进行比较,得到值为真(true)和假(false)。
比较操作符:>、<、>=、<=、==、!=

示例:

<script type="text/javascript">
var numa,numb,jq1,jq2;
numa=1;
numb=7;
jq1=numa>numb;
jq2=numa!=numb;
document.write("numa大于numb的分数吗?"+jq1+"<br>")
document.write("numa不等于numb的分数吗?"+ jq2);
</script>

逻辑 与 操作符

“&&”是逻辑与操作符,只有“&&”两边值同时满足(同时为真),整个表达式值才为真。

示例:

<script type="text/javascript">
 var numa,numb;
 numa=60;
 numb=70;
 if(numa>=60 && numb>=60)
  {
  document.write("JavaScript考核通过!"+"<br>");
  }
</script>

逻辑 或 操作符

“||”逻辑或操作符,相当于生活中的“或者”,当两个条件中有任一个条件满足,“逻辑或”的运算结果就为“真”。

示例:

<script type="text/javascript">
var numa,numb,jq1;
numa=50;
numb=55;
jq1=numa>numb||numa==numb;
document.write("jq1的值是:"+jq1+"<br>")
</script>

逻辑 非 操作符

“!”是逻辑非操作符,也就是”不是”的意思,非真即假,非假即真。

示例:

<script type="text/javascript">
var numa,numb,jq1;
numa=60;
numb=70;
jq1=!(numa<numb);
document.write("jq1的值是:"+jq1+"<br>")
</script>

什么是数组

数组是一个值的集合,每个值都有一个索引号,从0开始,每个索引都有一个相应的值,根据需要添加更多数值

示例:

<script type="text/javascript">
 var myarr=new Array(); //定义数组
 myarr[0]=80; 
 myarr[1]=60;
 myarr[2]=99;
 document.write("第一个人的成绩是:"+myarr[0]);
 document.write("第二个人的成绩是:"+myarr[1]);
 document.write("第三个人的成绩是:"+myarr[2]);
</script>

如何创建数组

创建数组语法:
var myarray=new Array();
注意:
1.创建的新数组是空数组,没有值,如输出,则显示undefined。
2.虽然创建数组时,指定了长度,但实际上数组都是变长的,也就是说即使指定了长度为8,仍然可以将元素存储在规定长度以外。

示例:

<script type="text/JavaScript">
var myarr = new Arrar();
var myarr [0];
 document.write("数组的第一个值:"+myarr[0]);
</script>

数组赋值

数组的表达方式:

第一步:创建数组var myarr=new Array(); 
第二步:给数组赋值
        myarr[1]=" 张三";
        myarr[2]=" 李四";

注意:数组每个值有一个索引号,从0开始。

示例:

<script language="javascript">
 var myarr = new Array(88,90,60);
 myarr[0];
 myarr[1];
 myarr[2];
  document.write("数组第一个值是:"+myarr[0]+"<br>");
  document.write("数组第二个值是:"+myarr[1]+"<br>");
  document.write("数组第三个值是:"+myarr[2]+"<br>");
</script>

向数组添加一个新元素

使用下一个未用的索引,任何时刻可以不断向数组增加新元素。

实例:

<script language="javascript">
 var myarray=new Array();
 myarray[0]=88;
 myarray[1]=90;
 myarray[2]=68;
 myarray[3]=99;
 document.write("数组第一个值是:"+myarray[0]+"<br>");
 document.write("数组第二个值是:"+myarray[1]+"<br>");
 document.write("数组第三个值是:"+myarray[2]+"<br>");
 document.write("数组第四个值是:"+myarray[3]+"<br>");
</script>

使用数组元素

要得到一个数组元素的值,只需引用数组变量并提供一个索引。

示例:

<script language="javascript">
 var myarr=new Array();
 myarr[0]="小红";
 myarr[1]="小明";
 myarr[2]="小亮";
 myarr[3]="小川";
 document.write("第二人的姓名是:"+ myarr[1] );
</script>

数组属性length

如果我们想知道数组的大小,只需引用数组的一个属性length。Length属性表示数组的长度,即数组中元素的个数。
语法:myarray.length; //获得数组myarray的长度
注意:因为数组的索引总是由0开始,所以一个数组的上下限分别是:0和length-1。如数组的长度是5,数组的上下限分别是0和4。

示例:

<script language="javascript">
 var mynum=new Array(65,90,88,98);
 document.write("数组的长度是:"+  mynum.length );
</script>

二维数组

注意:二维数组的两个维度的索引值也是从0开始,两个维度的最后一个索引值为长度-1。

示例:

<script language="javascript">
 var mynum=new Array(65,90,88,98);
 document.write("数组的长度是:"+  mynum.length );
</script>

做判断(if语句)

if语句是基于条件成立才执行相应代码时使用的语句。

示例:

<script type="text/JavaScript">
var mypen = "black"; //定义变量mypen,存储笔的黑色。
 if(mypen=="black")
{
document.write("笔是黑色的,所以购买");
}
</script>

if…else语句

if…else语句是在指定的条件成立时执行代码,在条件不成立时执行else后的代码。
语法:
if(条件)
{ 条件成立时执行的代码}
else
{条件不成立时执行的代码}

示例:

<script type="text/JavaScript">
var ticket =true; //ticket初值为true,表示有票
if(ticket == true)  
{
document.write("有票,可以看电影。");
}
else      
{
document.write("没票,电影看不成。");
}
</script>