JavaScript(概述,变量,函数)

154 阅读2分钟
概述
  • 简称 js
  • 一种脚本语言,脚本语言的特点,JavaScript的目标程序是以普通文本的形式保存(不需要编译),可以用记事本直接打开。浏览器打开就直接解释执行了。
  • JavaScript主要用来操作HTML中的节点,产生动态效果
  • javaScript是一种事件驱动型的编程语言,通常都是在发生某个事件的时候,去执行某段代码。并且在JavaScript当中任何一个事件都有对应的时间句柄,所有的事件句柄都是以标签的属性形式存在。
JavaScript包括三块:ECMAScript、DOM、BOM
  • ECMAScript是JavaScript核心语法
  • DOM编程是通过JavaScript对HTML中的dom节点进行操作,DOM是有规范的,DOM规范是W3C制定的。
  • BOM编程是对浏览器本身操作,例如:前进、后退、地址栏、弹窗等。由于浏览器有不同厂家制造,所以BOM缺少规范,一般只是一个默认的行业规范。(Browser Object Model 浏览器对象模型)

image.png 事件发生需要三要素:

  • 监听器
  • 事件源
  • 事件
嵌入JS代码的三种方式

方式一:行间事件 <button type="button" onclick="myFunction()">尝试一下</button>

方式二:页面script标签嵌入(脚本块)

在脚本块中的JS代码在页面打开的时候自上而下依照顺序逐行执行,一个页面中脚本块可以出现多个,脚本块的位置随意,没有限制。

方式三:引入外部独立的js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="myScript.js"></script>
</body>
</html>
JS变量的理解

怎么声明:

var + 变量名 ;

怎么赋值:

变量名 - 值;

一行能声明多个变量吗

var a ,b,c = 300;

声明三个变量abc,其中c赋值300,a和b没有赋值系统默认赋值undefined

JS语言是一种弱类型语言,没有编译阶段,直接浏览器打开解释执行,在JS中声明变量时不需要制定变量的数据类型,程序在运行过程中,赋什么类型的值变量就是什么数据类型,并且变量的数据类型时可变的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    var i  ;
    alert(i);//变量只声明没有赋值,系统默认赋值undefined,在js中undefined是一个具体存在的值

    var x = "undefinded";
    alert(x)//这里undefined是一个字符串

    var k = 100 ;//声明后同时赋值
    alert(k + 1)

    k = "abc";//可以重新赋值
    alert(k)

    var a ,b ,c = 100 ;
    alert(a)//undefined
    alert(b)//undefined
    alert(c)//100

</script>
</body>
</html>
函数初步
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <script>
     //JavaScript当中的函数定义格式

     /**
      function 函数名(形式参数列表){
        函数体;
 }
      例如 function sum(a,b){
        return a+b;
 }
      JS中的函数返回值类型不需要指定 应为变量可以接受任意类型

      */

     //函数必须调用才执行
     function sum(x,y){
      alert(x+"----"+y);
     }

     // undefined----undefined
     sum();
     // 1----undefined
     sum(1);
     // 1----2
     sum(1,2);
     //但是不能加入超过形参个数的参数。
 </script>
    <!--在事件句柄当中调用sum函数-->
 <input type="button" value="hello" onclick="sum(1,2)">

</body>
</html>
JS能重载吗
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
   function test1(a,b){
       alert("test1"+a+b)
   }
   function test1(){
       alert("test1()")
   }
   test1();//只会执行最近的一个,在js中函数是不能重载的,也不存在重载机制
           //只要出现重名函数,之前那个函数就会消失。
</script>
</body>
</html>