JavaScript基础

HTML 定义了网页的内容

CSS 描述了网页的布局

JavaScript 网页的行为

JavaScript 是一种轻量级的编程语言 ，JavaScript 是可插入 HTML 页面的编程代码。

  

 js笔记

 在 HTML 页面中插入 JavaScript，请使用 <script> 标签。<script> 和 </script> 会告诉 JavaScript 在何处开始和结束<script> 和 </script> 之间的代码行包含了 JavaScript

  <script>
      document.write("<h1>这是一个标题</h1>");
      document.write("<p>这是一个段落。</p>");
  </script>
 

 使用 alert() 弹出警告框。

使用 document.write() 方法将内容写到 HTML 文档中。

使用 innerHTML 写入到 HTML 元素。

 使用 **console.log()** 写入到浏览器的控制台。

基本类型：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

 引用数据类型：对象(Object)、数组(Array)、函数(Function)。

  var person = {
      firstName: "John",
      lastName : "Doe",
      id : 5566,
      fullName : function() 
      {
         return this.firstName + " " + this.lastName;
      }
  };
   

 js函数

 js函数语法

  function functionname()
  {
      // 执行代码
  }
 

 在使用 return 语句时，函数会停止执行，并返回指定的值。例如：

  sayHi();
  function sayHi(name,message){
      document.write("return 语句执行前。");
      return;
      alert("hello" + name +"," + message);
  }
 

 使用 HTML 、JavaScript 创建一个简单的计算器，包含加、减、乘、除四个功能：

//加法
  function add() {
    alert(1);
    var a = getFirstNumber();
    var b = getTwiceNumber();
    var re =Number( a) +Number( b);
    sendResult(re);
  }
  
  //减法
  function subtract() {
    var a = getFirstNumber();
    var b = getTwiceNumber();
    var re = a - b;
    sendResult(re);
  }
  
  //乘法
  function ride() {
    var a = getFirstNumber();
    var b = getTwiceNumber();
    var re = a * b;
    sendResult(re);
  }
  
  //除法
  function devide() {
    var a = getFirstNumber();
    var b = getTwiceNumber();
    var re = a / b;
    sendResult(re);
  }
    
   
  

 js作用域

 局部变量：在函数中通过var声明的变量。

 全局变量：在函数外通过var声明的变量。

 没有声明就使用的变量，默认为全局变量，不论这个变量在哪被使用。

函数内未声明即使用的变量情况：

  
  function func(){
    undefined_var=110
  }
  

在 func() 被第一次调用之前， undefined_var 变量是不存在的即 undefined。func() 被调用过之后，undefined_var 成为全局变量。

 js事件

  添加事件句柄实例：
  <script>
      window.onload = function(){
              var test = document.getElementById("test");   
          test.addEventListener("click",myfun2);   
          test.addEventListener("click",myfun1);
      }
      function myfun1(){  
             alert("你好1");
      }
      function myfun2(){ 
          alert("你好2");
      }
  </script>
 

 js运算符

| +     | 加法         | x=y+2 | 7                                                            | 5    |
| ----- | ------------ | ----- | ------------------------------------------------------------ | ---- |
| -     | 减法         | x=y-2 | 3                                                            | 5    |
| *     | 乘法         | x=y*2 | 10                                                           | 5    |
| /     | 除法         | x=y/2 | 2.5                                                          | 5    |
| %     | 取模（余数） | x=y%2 | 1                                                            | 5    |
| ++    | 自增         | x=++y | 6                                                            | 6    |
| x=y++ | 5            | 6     | [实例 »](https://www.runoob.com/try/try.php?filename=tryjs_oper_incr2) |      |
| --    | 自减         | x=--y | 4                                                            | 4    |
| x=y-- | 5            | 4     |                                                              |      |

 js赋值运算符

| 运算符 | 例子 | 等同于 | 运算结果 |
| :----- | :--- | :----- | :------- |
| =      | x=y  |        | x=5      |
| +=     | x+=y | x=x+y  | x=15     |
| -=     | x-=y | x=x-y  | x=5      |
| *=     | x*=y | x=x*y  | x=50     |
| /=     | x/=y | x=x/y  | x=2      |
| %=     | x%=y | x=x%y  | x=0      |

JavaScript == 与 === 区别

对于 string、number 等基础类型，== 和 === 是有区别的

 a）不同类型间比较，== 之比较 "转化成同一类型后的值" 看 "值" 是否相等，=== 如果类型不同，其结果就是不等。
 b）同类型比较，直接进行 "值" 比较，两者结果一样。

 js逻辑运算符

| 运算符 | 描述 |           例子            |
| :----- | :--- | :-----------------------: |
| &&     | and  | (x < 10 && y > 1) 为 true |
| \|\|   | or   | (x==5 \|\| y==5) 为 false |
| !      | not  |      !(x==y) 为 true      |

 三目运算符

8>5  ?   true  :   false  ;

条件 ？  值1  ：  值2 ;

翻译成人话就是  8大于5吗？  大于 就是 true  大不于就是 false；

判断？号前面的条件是否成立， 成立 执行第一个值，不成立，执行第二个值。

 if  else  语句

 请使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

  if (condition)
  {
    当条件为 true 时执行的代码
  }
  else if (condition2)
  {
    当条件 2 为 true 时执行的代码
  }
  else
  {
  当条件 1 和 条件 2 都不为 true 时执行的代码
  }

不同类型的循环

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

 for语句

for (语句 1; 语句 2; 语句 3)
{
  被执行的代码块
}

 for  in语句

JavaScript for/in 语句循环遍历对象的属性：

var person={fname:"Bill",lname:"Gates",age:56};   

for (x in person) {    

​    txt=txt + person[x]; 

}

 while 语句

while (条件)
{
  需要执行的代码*
}

 do while 语句

do
{
  需要执行的代码
}
while (条件);

js数据类型

在 JavaScript 中有 6 种不同的数据类型：

 string
 number
 boolean
 object
 function
 symbol

3 种对象类型：

 Object
 Date
 Array

2 个不包含任何值的数据类型：

 null
 undefined

 typeof 操作符

  typeof "John"         // 返回 string
  typeof 3.14          // 返回 number
  typeof NaN           // 返回 number
  typeof false         // 返回 boolean
  typeof [1,2,3,4]       // 返回 object
  typeof {name:'John', age:34} // 返回 object
  typeof new Date()       // 返回 object
  typeof function () {}     // 返回 function
  typeof myCar         // 返回 undefined (如果 myCar 没有声明)
  typeof null          // 返回 object
  

  

 NaN 的数据类型是 number
 数组(Array)的数据类型是 object
 日期(Date)的数据类型为 object
 null 的数据类型是 object
 未定义变量的数据类型为 undefined