美文网首页
JavaScript入门(上)基础语法、数组、流程控制语句、函数

JavaScript入门(上)基础语法、数组、流程控制语句、函数

作者: 左左4143 | 来源:发表于2018-08-15 16:08 被阅读28次

认识JS

JavaScript能做什么?

  • 增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)

  • 实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)

JS进阶篇学习什么?

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

基础语法

变量

变量命名要遵循一些规则:

  1. 必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字。如下:

正确:

    mysum            
    _mychar         
    $numa1

错误:

  6num  //开头不能用数字
  %sum //开头不能用除(_ $)外特殊符号,如(%  + /等)
  sum+num //开头中间不能使用除(_ $)外特殊符号,如(%  + /等)
  1. 变量名区分大小写,如:A与a是两个不同变量。

  2. 不允许使用JavaScript关键字和保留字做变量名。

image

变量声明

声明变量语法: var 变量名;

var mynum ; //声明一个变量mynum

var num1,mun2 ; //声明两个个变量num1 和mun2

变量赋值

var mynum = 5 ; //声明变量mynum并赋值。

也可以这样写:

var mynum; //声明变量mynum
mynum = 5 ; //给变量mynum赋值

可以把任何东西存储在变量里,如数值、字符串、布尔值等:

var num1 = 123;       // 123是数值
var num2 = "一二三";    //"一二三"是字符串
var num3=true;    //布尔值true(真),false(假)

其中,num1变量存储的内容是数值;num2变量存储的内容是字符串,字符串需要用一对引号""括起来,num3变量存储的内容是布尔值(true、false)。

表达式

表达式是指具有一定的值、用操作符把常数和变量连接起来的代数式。一个表达式可以包含常数或变量。

image image image image

+号操作符

操作符是用于在JavaScript中指定一定动作的符号。

  1. 操作符

看下面这段JavaScript代码。

sum = numa + numb;

其中的"=""+"都是操作符。

JavaScript中还有很多这样的操作符,例如,算术操作符(+、-、*、/等),比较操作符(<、>、>=、<=等),逻辑操作符(&&、||、!)

注意: “=” 操作符是赋值,不是等于。

  1. "+"操作符

算术运算符主要用来完成类似加减乘除的工作,在JavaScript中,“+”不只代表加法,还可以连接两个字符串,例如:

mystring = "Java" + "Script"; // mystring的值“JavaScript”这个字符串

++和- -

算术操作符除了(+、-、*、/)外,还有两个非常常用的操作符,自加一“++”;自减一“--”。首先来看一个例子:

mynum = 10;
mynum++; //mynum的值变为11
mynum--; //mynum的值又变回10

上面的例子中,mynum++使mynum值在原基础上增加1,mynum--使mynum在原基础上减去1,其实也可以写成:

mynum = mynum + 1;//等同于mynum++
mynum = mynum - 1;//等同于mynum--

比较操作符

<><=>===!=

var a = 5;//定义a变量,赋值为5
var b = 9; //定义b变量,赋值为9
document.write (a<b); //a小于b的值吗? 结果是真(true)
document.write (a>=b); //a大于或等于b的值吗? 结果是假(false)
document.write (a!=b); //a不等于b的值吗? 结果是真(true)
document.write (a==b); //a等于b的值吗? 结果是假(false)

逻辑与操作符

b>a && b<c    //“&&”是并且的意思, 读法"b大于a"并且" b小于c "

逻辑或操作符

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

var a=3;
var b=5;
var c;
c=b>a ||a>b;  //b>a是true,a>b是false,c是true

逻辑非操作符

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

var a=3;
var b=5;
var c;
c=!(b>a);  // b>a值是true,! (b>a)值是false
c=!(b<a);  // b<a值是false, ! (b<a)值是true

操作符优先级

操作符之间的优先级(高到低):

算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号

如果同级的运算是按从左到右次序进行,多层括号由里向外。

var numa=3;
var numb=6;
jq= numa + 30 >10 && numb * 3<2;  //结果为false

数组

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>什么是数组</title>
<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>
</head>
<body>
 </html>

如何创建数组

var myarray=new Array();

创建数组的同时,还可以为数组指定长度,长度可任意指定。

var myarray= new Array(8); //创建数组,存储8个数据。

注意:

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

数组赋值

数组创建好,接下来我们为数组赋值。我们把数组看似旅游团的大巴车,大巴车里有很多位置,每个位置都有一个号码,顾客要坐在哪个位置呢?

第一步:组个大巴车
第二步:按票对号入座
        大巴车的1号座位是张三
        大巴车的2号座位是李四

数组的表达方式:

//第一步:创建数组
var myarr=new Array(); 

//第二步:给数组赋值
myarr[1]=" 张三";
myarr[2]=" 李四";

下面创建一个数组,用于存储5个人的数学成绩。

var myarray=new Array(); //创建一个新的空数组
myarray[0]=66; //存储第1个人的成绩
myarray[1]=80; //存储第2个人的成绩
myarray[2]=90; //存储第3个人的成绩
myarray[3]=77; //存储第4个人的成绩
myarray[4]=59; //存储第5个人的成绩

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

我们还可以用简单的方法创建上面的数组和赋值:

第一种方法:

var myarray = new Array(66,80,90,77,59);//创建数组同时赋值

第二种方法:

var myarray = [66,80,90,77,59];//直接输入一个数组(称 “字面量数组”)

注意:数组存储的数据可以是任何类型(数字、字符、布尔值等)

向数组增加一个新元素

上一节我们使用myarray变量存储了5个人的成绩,现在多出一个人的成绩,如何存储呢?

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

myarray[5]=88; //使用一个新索引,为数组增加一个新元素

使用数组元素

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

  • 第一个人的成绩表示方法:myarray[0]

  • 第三个人的成绩表示方法:myarray[2]

数组属性length

如果我们想知道数组的大小,只需引用数组的一个属性lengthLength属性表示数组的长度,即数组中元素的个数。

语法:

myarray.length; //获得数组myarray的长度

注意:因为数组的索引总是由0开始,所以一个数组的上下限分别是:0和length-1。如数组的长度是5,数组的上下限分别是0和4。

var arr=[55,32,5,90,60,98,76,54];//包含8个数值的数组arr 
document.write(arr.length); //显示数组长度8
document.write(arr[7]); //显示第8个元素的值54

同时,JavaScript数组的length属性是可变的,这一点需要特别注意。

arr.length=10; //增大数组的长度
document.write(arr.length); //数组长度已经变为10

数组随元素的增加,长度也会改变,如下:

var arr=[98,76,54,56,76]; // 包含5个数值的数组
document.write(arr.length); //显示数组的长度5
arr[15]=34;  //增加元素,使用索引为15,赋值为34
alert(arr.length); //显示数组的长度16

二维数组

一维数组,我们看成一组盒子,每个盒子只能放一个内容。

  • 一维数组的表示: myarray[ ]

二维数组,我们看成一组盒子,不过每个盒子里还可以放多个盒子。

  • 二维数组的表示: myarray[ ][ ]

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

  1. 二维数组的定义方法一
var myarr=new Array();  //先声明一维 
for(var i=0;i<2;i++){   //一维长度为2
   myarr[i]=new Array();  //再声明二维 
   for(var j=0;j<3;j++){   //二维长度为3
   myarr[i][j]=i+j;   // 赋值,每个数组元素的值为i+j
   }
 }
  1. 二维数组的定义方法二
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]
  1. 赋值
myarr[0][1]=5; //将5的值传入到数组中,覆盖原有值。

说明: myarr[0][1] ,0 表示表的行,1表示表的列。

流程控制语句

if语句

<script type="text/javascript">
  var mycarrer = "HTML";
  if (mycarrer == "HTML")
  {
    document.write("你面试成功,欢迎加入公司。");
  }
</script>

if...else语句

<script type="text/javascript">
  var mycarrer = "HTML"; //mycarrer变量存储技能
  if (mycarrer == "HTML")
    { document.write("你面试成功,欢迎加入公司。");  }
  else  //否则,技能不是HTML
    { document.write("你面试不成功,不能加入公司。");}
</script>

if..else嵌套语句

<script type="text/JavaScript">
    var myage =99;//赵红的年龄为99
    if(myage<=44){
        document.write("青年");
        
    } else if(myage<=59) {
        document.write("中年人");
        
    } else if(myage<=89) {
        document.write("老年人");
        
    } else {
        document.write("长寿老年人");
        
    }
</script>

Switch语句

  • Switch必须赋初始值,值与每个case值匹配。满足执行该 case 后的所有语句,并用break语句来阻止运行下一个case。如所有case值都不匹配,执行default后的语句。

  • case所执行的语句后添加上一个break语句。否则就直接继续执行下面的case中的语句

var myWeek = 3;
switch(myWeek){
    case 1:
    case 2:{
        document.write("学习理念知识");
    }

    break;
    case 3:
    case 4:{
        document.write("到企业实践");
    }

    break;
    case 5:{
        document.write("总结经验");
    }

    break;
    case 6:
    case 7:{
        document.write("周六、日休息和娱乐");
    }
    break;
    default:
    break;
}

for循环

var num = 1;
for (num = 1; num <= 6; num++) {
    document.write("取出第"+num+"个球<br>");
    
}

while循环

var num = 0;
while (num < 6){
    document.write("取出第"+num+"个球");
    num++;
}

Do...while循环

var mynum = 6;
do{
    document.write("数字:"+mynum+"<br/>");
    mynum--;
    
} while(mynum > 0)

退出循环break

whilefordo...whilewhile循环中使用break语句退出当前循环,直接执行后面的代码:

var mynum =new Array(70,80,66,90,50,100,89);//定义数组mynum并赋值
var i=0;
while(i<mynum.length)
{
  if(mynum[i]<60)
   {
    document.write("成绩"+mynum[i]+"不及格,不用循环了"+"<br>");
    break;
   }
  document.write("成绩:"+mynum[i]+"及格,继续循环"+"<br>");
  i++;
  
}

继续循环continue

continue的作用是仅仅跳过本次循环,而整个循环体继续执行:

 var mynum =new Array(70,80,66,90,50,100,89);//定义数组mynum并赋值
 var i;
 for(i=0;i<mynum.length;i++)
 {
    if(mynum[i]<60)
    {
    document.write("成绩不及格,不输出!"+"<br>");
    continue;
    }
    document.write("成绩:"+mynum[i]+"及格,输出!"+"<br>");
}

函数

函数的作用,可以写一次代码,然后反复地重用这个代码。

function add2(a,b){
sum = a + b;
 alert(sum);
} //  只需写一次就可以

add2(3,2);
add2(7,8);
....  //只需调用函数就可以

函数调用

函数定义好后,是不能自动执行的,需要调用它,直接在需要的位置写函数名。

第一种情况:在<script>标签内调用。

<script type="text/javascript">
    function add2()
    {
         sum = 1 + 1;
         alert(sum);
    }
  add2();//调用函数,直接写函数名。
</script>

第二种情况:在HTML文件中调用,如通过点击按钮后调用定义好的函数。

<html>
<head>
<script type="text/javascript">
   function add2()
   {
         sum = 5 + 6;
         alert(sum);
   }
</script>
</head>
<body>
<form>
<input type="button" value="click it" onclick="add2()">  //按钮,onclick点击事件,直接写函数名
</form>
</body>
</html>

有参数的函数

上节中add2()函数不能实现任意指定两数相加。其实,定义函数还可以如下格式:

function 函数名(参数1,参数2)
{
     函数代码
}

注意:参数可以多个,根据需要增减参数个数。参数之间用(逗号,)隔开。

按照这个格式,函数实现任意两个数的和应该写成:

function add2(x,y)
{
   sum = x + y;
   document.write(sum);
}

xy则是函数的两个参数,调用函数的时候,我们可通过这两个参数把两个实际的加数传递给函数了。

有返回值的函数

function add2(x,y)
{
   sum = x + y;
   return sum; //返回函数值,return后面的值叫做返回值。
}

还可以通过变量存储调用函数的返回值,代码如下:

result = add2(3,4);//语句执行后,result变量中的值为7。

相关文章

  • JavaScript学习笔记(二)

    慕课网JavaScript进阶篇第1-6章学习笔记,JS基础语法,数组,流程控制语句,函数,事件 JavaScri...

  • JavaScript入门(上)基础语法、数组、流程控制语句、函数

    认识JS JavaScript能做什么? 增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等) 实现页面与用户之...

  • 小红书阅读笔记~第三章

    JavaScript基本概念有什么:语法、数据类型、流程控制语句、理解函数。 JavaScript语法 ECMAS...

  • PHP全栈学习笔记4

    php和JavaScript,掌握JavaScript基础,自定义函数,流程控制语句,事件,调用JavaScrip...

  • PHP全栈学习笔记4

    php和JavaScript,掌握JavaScript基础,自定义函数,流程控制语句,事件,调用JavaScrip...

  • JavaScript进阶学习

    Javascript 使用语法规范 数值类型 运算符 流程控制 函数 数组 字符串在javascript里边,字符...

  • 4/07day28_js基础

    day28_js基础 回顾 JS基础语法 JS运算符 JS流程控制语句 条件语句 JS的条件语句和Java语法基本...

  • Shell流程控制

    Shell流程控制 简单流程控制语句 单分支if语句 语法格式 双分支if语句 语法格式 多分支if语句 语法格式...

  • 前端 js

    Javascript 基础语法包括:变量声明、数据类型、函数、控制语句、内置对象等。 在ES5 中,变量声明有两种...

  • 毕向东Java基础教程-Java基础语法【下】

    本篇为Java基础语法【下】,包含程序流程控制、函数、数组这三部分内容。 程序流程控制 顺序结构 判断结构 三种格...

网友评论

      本文标题:JavaScript入门(上)基础语法、数组、流程控制语句、函数

      本文链接:https://www.haomeiwen.com/subject/maywbftx.html