JS 基础知识点总结

作者: 弓长晓 | 来源:发表于2020-11-06 15:43 被阅读0次

后端知识点总结——NODE.JS基础
Js基础知识学习-----from 米升亮
js基础知识点总结
JS 基础知识点总结
2018-08-17day-25
无标题文章
第八周第四天笔记之jQuery知识点
Android 程序员搞 web 之 js基础（九）
ReactNative面试常见问题
React.js 入门学习笔记

01-JavaScript 用法

 <!-- 01行内js -->
<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>js使用方式1：行内js</title> 
</head> 
<body> 
<input  type="button"  value="点击有惊喜" onclick="javascript:alert('弹出框')"> 
</body> 
</html>

 <!-- ============================================================  -->
 <!-- 02内部js -->

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>js使用方式2：内部js</title> 
</head> 
<body> 
<input type="button" value="点击"  onclick="surprise()"> 
</body> 
 <script type="text/javascript"> 
  function surprise() { 
   alert('弹出框')
  } 
 </script> 
</html>

 <!-- ============================================================  -->
 <!-- 03外部js -->

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>js使用方式3：外部js</title> 
</head> 
<body> 
<input type="button" value="点击"  onclick="surprise()"> 
</body> 
<script src="./script.js" type="text/javascript" charset="utf-8"> 
</html>

02-JavaScript 输出

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

03-JavaScript 变量&& 数据类型

简单理解变量：变量是用于存储信息的"容器",[对大小写敏感]
数据类型：
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。

声明变量类型：

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

04-JavaScript 对象

JavaScript 对象是拥有属性和方法的数据

// 1：为变量 box 设置值为 "lefet"
var box = "lefet";
// 2：对象也是一个变量，或者（多个变量） 可以包含多个值。
var box = {type:"Fiat", model:500, color:"white"};

对象属性：JavaScript 对象是键值对的容器
键值对通常写法为 name : value (键与值以冒号分割)。

//定义了 person 对象
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};
// person 属性：  firstName:"John",  lastName:"Doe",age:50, eyeColor:"blue" 
// person访问：
// 对象方法作为一个函数定义存储在对象属性中。
<p id="demo"></p>
<script>*
var person = {
    firstName: "01值",
    lastName : "02值",
    id : 5566,
    fullName : function() 
   {
       return this.firstName + " " + this.lastName; // 01值 ,02值
    }
};
document.getElementById("demo").innerHTML = person["firstName"] + " " + person["lastName"];
document.getElementById("demo").innerHTML = person.fullName();  
</script>

05-JavaScript 函数

函数是被调用时执行的可重复使用的代码块。对大小写敏感。关键词 function 必须是小写的

<script>
function myFunction()
{alert("可重复的代码块");}
</script>
<body> <button onclick="myFunction()"> 触发调用myFunction() </button> </body>

<script>
// 函数的参数：调用函数时，您可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。
function myFunction(name,job)
{alert("可重复的代码块"+ name +job);}
myFunction("我是name","我是job")

// 函数的返回值：在使用 return 语句时，函数会停止执行，并返回指定的值。
function myFunction(a,b){return a*b;}
myFunction(5,6)
</script>

局部 JavaScript 变量：
函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）只要函数运行完毕，本地变量就会被删除

全局 JavaScript 变量：
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

JavaScript 变量的生存期：
局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。

06JavaScript 作用域

作用域是可访问变量的集合。

    var carNames = "Volvos" 
  // 全局变量有 全局作用域: 网页中所有脚本和函数均可使用。  
    function myFunction() {
   // myFunction内部：局部作用域
        var carName = "Volvo";
        console.log(carName) // Volvo
        console.log(carNames) // Volvos
    }
    myFunction();
    console.log(carName) // carName is not defined
    console.log(carNames) // Volvos

如果函数内部的变量没有声明，在其他语言中会报错，但在js中，会过度到全局变量

   function myFunction() {
        carName = "Volvo";
    }
    myFunction();
    console.log(carName) // Volvo

全局变量是 window 对象: 所有数据变量都属于 window 对象。
你的全局变量，或者函数，可以覆盖 window 对象的变量或者函数。

07JavaScript 事件

JavaScript 可以根据html的元素节点触发不同的事件

<!-- 浏览器点击事件来复发当前时间   -->
<!-- 01点击事件触发 displayDate 函数   -->
<button onclick="displayDate()">现在的时间是?</button>
<p id="demo"></p>
<script>
// 02 获取到文件流中id为demo的元素节点 ，将当前的时间赋值   
// Date() js的内置函数
function displayDate(){
   document.getElementById("demo").innerHTML=Date();
}
</script>

08 JavaScript 字符串 && 运算符 && 比较 && 逻辑运算符

字符串属性: constructor , length , prototype .
返回创建字符串属性的函数 , 返回字符串的长度 , 允许您向对象添加属性和方法
字符串方法: String 对象
运算符:
运算符 = 用于赋值。
运算符 + 用于加值。
运算符 ++ 自增
运算符 -- 自减
比较运算符：
== 等于
=== 绝对等于（值和类型均相等）
!= 不等于
!== 不绝对等于（值和类型有一个不相等，或两个都不相等）
逻辑运算符：
&& and
|| or
! not

09 if...Else 语句 && switch 语句

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

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

------------------------------------------------------------------------------
switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}