JavaScript基础

2021/7/7 14:34:56

本文主要是介绍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
      • truefalse
    5. string
      • 一组被引号(单引号或双引号)括起来的文本
      • var* string1=“This is a string”;
  5. 核心语法— typeof运算符

    • typeof检测变量的返回值
    • typeof:运算符返回值如下
      • undefined:变量被声明后,但未被赋值
      • string:用单引号或双引号来声明的字符串
      • booleantruefalse
      • 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. 分号


这篇关于JavaScript基础的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程