JavaScript基础

为什么要学JavaScript?

1. 表单验证－减轻服务器端压力
2. 页面动态效果

什么是JavaScript

1. JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言

JavaScript特点

1. 向HTML页面中添加交互行为
2. 脚本语言，语法和Java类似
3. 解释性语言，边执行边解释

JavaScript组成

JavaScript的基本结构

<script type="text/javascript">
    <!—
          JavaScript 语句;
    —>
</script >

可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可

网页中引用JavaScript的方式

1. 行内：使用 script>标签

2. 外部：外部JS文件

   <script src="export.js"  type="text/javascript"></script>
   //记住这是导入js和直接写不一样
   

3. 内部: 直接在HTML标签中

   <input name="btn" type="button" value="弹出消息框"   
      onclick="javascript:alert('欢迎你');"/>
   

JavaScript核心语法

核心语法—变量

1. 先声明变量再赋值

   var   width;	//var －  用于声明变量的关键字
   width = 5;		//width － 变量名
   

2. 同时声明和赋值变量

   var catName= "皮皮";
   var x, y, z = 10;
   

3. 不声明直接赋值

   width=5;
   

   变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不推荐使用

4. 核心语法—数据类型

   1. undefined
      • var width; 变量width没有初始值，将被赋予值undefined
   2. null
      • 表示一个空值，与undefined值相等
   3. number
      • var iNum**=23; //整数
      • var** iNum**=23.0; //浮点数**
   4. boolean
      • true和false
   5. string
      • 一组被引号（单引号或双引号）括起来的文本
      • var* string1=“This is a string”;

5. 核心语法— typeof运算符

   • typeof检测变量的返回值
   • typeof：运算符返回值如下
     • undefined：变量被声明后，但未被赋值
     • string：用单引号或双引号来声明的字符串
     • boolean：true或false
     • number：整数或浮点数**
     • object**：javascript中的对象、数组和null

6. 核心语法—String对象

   • 属性
   1. 字符串对象**.length**
   2. 方法
   3. 字符串对象.方法名();

   var str="this is JavaScript";
   var strLength=str.length;    //长度是18
   

   方法名称	说明
   charAt(index)	返回在指定位置的字符
   indexOf(str，index)	查找某个指定的字符串在字符串中首次出现的位置
   substring(index1，index2)	返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符
   split(str)	将字符串分割为字符串数组

7. 核心语法—数组

   1. 创建数组

      var  数组名称 = new Array(size);
      //new 表示数组的关键字
      //size表示数组中可存放的元素总数
      

   2. 为数组元素赋值

   3. 访问数组

   4. 数组的常用属性和方法

      类别	名称	描述
      属性	length	设置或返回数组中元素的数目
      方法	join( )	把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔
      方法	sort()	对数组排序
      方法	push()	向数组末尾添加一个或更多 元素，并返回新的长度

8. 核心语法—运算符号-和Java类似

   类型	运算符
   算术运算符	+ - ***** / % ++ —
   赋值运算符	= += -=
   比较运算符	> < >= <= == != === !==
   逻辑运算符	&& || !

9. 核心语法—逻辑控制语句

   1. if条件语句-和Java一样

      if(条件)
      {
         //JavaScript代码;
      }
      else
      {
        //JavaScript代码;
      }
      

   2. switch多分支语句-和Java一样

      switch (表达式)
      {    case 常量1 : 
                    JavaScript语句1;
      	break;
             case 常量2 : 
       	JavaScript语句2;
       	break;
               ...
              default : 
                   JavaScript语句3;    
      }
      
      

   3. for、while循环语句-和Java一样

      for(初始化;  条件;  增量)
       {
            JavaScript代码; }
      
      while(条件)
       {
            JavaScript代码;
      }
      

   4. for-in

      var fruit=[ "apple", "orange", "peach","banana"]; 
      for(var i in fruit){//循环的是下标 i是下标
             document.write(fruit[i]+"<br/>");
      }
      

10. 核心语法—循环中断-和Java一样

    1. break

       <script type="text/javascript">
       var i=0;
       for(i=0;i<=5;i++){
       	if(i==3){
                          break;
                }
         document.write("这个数字是："+i+"<br/>");
       }
       </script>
       

    2. continue

       <script type="text/javascript">
       var i=0;
       for(i=0;i<=5;i++){
       	if(i==3){
                          continue;
              }
         document.write("这个数字是："+i+"<br/>");
       }
       </script>
       

11. 核心语法—注释-和Java一样

    1. 单行注释以 // 开始，以行末结束

       alert("恭喜你！注册会员成功"); //在页同上弹出注册会员成功的提示框
       

    2. 多行注释以 /* 开始，以 / 结束，符号 /…… */ 指示中间的语句是该程序中的注释

       /*
       使用for循环运行“document.write("<h3>Hello World</h3>");”5次
       使用document.write在页面上输出“Hello World” 
       */
       

12. 核心语法—常用的输入/输出

    1. alert()

       • alert()方法是显示一条弹出提示消息和确认按钮的警告框。
       • 需要注意的是 ：alert()是一个阻塞的函数，如果我们不点确认按钮，后面的内容就不会加载出来。

       alert("想要提示的文本内容")
       

    2. confirm()

       • confirm()方法是显示一个含有指定消息和确认和取消按钮的确认框。
       • 如果点击"确定"返回true，否则返回false。

       不接收返回值：

       confirm("这样写可以直接显示,不接收返回值。")
       

       接收返回值：

       var x; 
       var r=confirm("请按下按钮!");
       if (r==true){
       	x="你按下的是\"确定\"按钮。";
       }
       else{
       	x="你按下的是\"取消\"按钮。";
       }
       document.write(x)
       

    3. prompt ()

       • prompt()方法是显示提示用户进行输入的对话框。
       • 这个方法返回的是用户输入的字符串。

       不显示默认文本：

       prompt("开心吗?"); // 这个显示内容也可以不写，但就没有交互的意义了。
       

       显示默认文本：

       var x; 
       var name=prompt("请输入你的名字","Keafmd"); 
       if (name!=null && person!=""){ 
        x="你好! " + name + "。";
        document.write(x)
       } 
       

13. 核心语法—语法约定-和Java一样

    1. 代码区分大小写
    2. 变量、对象和函数的名称
    3. 分号