JavaScript快速入门

如何在html页面中插入js：

方法一：在head标签内引入js

<html>
    <head>
        <script src="此处写你的js文件路径"></script>
    </head>
    <body>
    </body>
</html>

方法二：在body标签内写JS代码

<html>
    <head>
    </head>
    <body>
        <script type="text/javascript">
            //在这里面写你的js代码
        </script>
    </body>
</html>

变量的定义：

JavaScript使用 var来定义变量，多个变量名之间用逗号隔开。定义变量是不为其赋值则缺省为undefined，表示该值未定义。

var a;			//undefined
var b,c;		//undifined
var aa = 10;
var bb = 20, cc = 30;

JavaScript的所有变量都用 var来定义，既可以是数值，也可以是布尔型，也可以是字符串。甚至即使一个变量初始值为数值，赋值过程中可以被赋值为其他类型。

var a = 10;
var b = false;
var c = "test";
a = c;
console.log(a);		//控制台输出test

尽管上述操作是可以进行的，但是建议变量的类型最好从始至终都是确定的，不建议随意更改。

JavaScript的数据类型：

JavaScript的几种数据类型分别为：undefined、null、boolean、number、string、object、array、function。
查看变量属于哪种数据类型可以用typeof查看，代码如下：

var a = 10;
var b = false;
var c = function(){
	console.log("this is a function!");
}

console.log(typeof a);		//number
console.log(typeof b);		//boolean
console.log(typeof c);		//function

这里主要介绍几种常见类型。

undefined:

未初始化的变量默认未undefined，表示该值未定义，如果一个变量将来要被赋值为其他类型，将其初始化为undefined较好。

var a = undefined;
a = "test";

null:

null表示一个空对象。如果将来想将其赋值为object类型，将其初始化为null较好。

var a = null;
a = {
    
    sex:"男"，age:"18"};

有趣的是，将一个变量赋值为null，使用typeof检测得到结果为object。

var a = null;
console.log(typeof a)		//object

boolean：

boolean类型一共只有两个值false和true，表示假和真两种状态。使用if判断语句时，其他类型会被自动转换为boolean类型。其中，0、NaN、undefined、null、""（空字符串）会被转换为false,其余皆为true。

扫描二维码关注公众号，回复： 13034349 查看本文章

var a = 10;
if(a){
	console.log("a is not in {0、NaN、undefined、null、""（空字符串）}");
}

number：

number类型可以使用八进制、十进制、十六进制。其中八进制以0开头，十六进制以0x开头。

var a_10 = 10;		//十进制数10
var a_8 = 012;		//八进制数012（十进制数10）
var a_16 = 0xA;		//十六进制数0xA（十进制数10）

浮点数值可以使用小数，其中特别大或者特别小的数可以使用指数表示：

var pi = 3.1415926;
var a_8 = 3e8;

number类型范围为Number.MIN_VALUE~Number.MAX_VALUE (5e-324~1.7976931e+308)。超出上限返回Inifinity，超出下限则返回-Inifinity。
number类型还有一个特殊值NaN，即Not a Number，表示并不是一个数。

string：

JavaScript的string类型可以使用'或者"来表示，两则没有差别。

var s1 = 'test1';
var s2 = "test2";

字符串之间可以通过+来进行拼接：

var s3 = s1 + s2;		//test1test2

字符串的长度可以由length得到：

console.log(s1.length);		//5
console.log(s2.length);		//5
console.log(s3.length);		//10

object：

JavaScript的object是拥有属性和方法的数据类型。属性即与对象相关的值，方法是在对象上执行的动作。

var p1 = new object();		//创建对象

上面代码创建了一个对象，但是此时这个对象没有属性也没有方法。下面为其添加属性与方法：

p1.name = "小明";
p1.sex = "男";
p1.age = "18";
p1.grow_up = function(){
    
    
	this.age += 1;
}

这段代码为p1加入了name、sex、age三个属性和grow_up（）一个方法。
接下来尝试访问这些属性和方法：

console.log(p1.name);		//小明
console.log(p1.age);		//18
p1.grow_up();
console.log(p1.age);		//19

数组：

js定义数组：

var arr=[];			//空数组 
var arr=[1,2,6];	//数字数组 
var arr=[{
    
    Name:"小书童",Age:1},{
    
    Name:"奔跑的蜗牛",Age:6}];	//对象数组

访问数组：

 var arr=[1,2,6];
 var x=arr[0];

结果：x等于 1

var arr=[{
    
    Name:"小书童",Age:1},{
    
    Name:"奔跑的蜗牛",Age:6}];
var x=arr[1].Name;

结果：x等于奔跑的蜗牛

删除数组：

 var arr=[1,2,6];
 arr.splice(1, 2);

从第二个数组开始连续删除两给元素

结果：arr等于 [1]

条件判断：

if…else语句：

if(可以的话){
    
    
    //我要谈女朋友
}else{
    
    
    //不可以谈女朋友
}

逻辑运算符：&& ,||,和！

var weather = 'sunny';
if(weather == 'sunny' && temperature > 30){
    
    
    //还是在家里吹空调吧
}else if(weather == 'sunny' && temperature<=30){
    
    
   //天气非常棒，可以出去玩耍了
}

switch语句：

switch (expression) {
    
    
  case choice1:
    run this code
    break;

  case choice2:
    run this code instead
    break;
        
  default:
    actually, just run this code
}

三元运算符：

三元运算符它解决了像if…else块较少的代码。如果你只有两个通过true/false条件选择。语法如下：

(codition) ? run this code : run this code instead;

让我们看一下极简的例子：

var isResult  =  1 > 2 '真的' : '假的' ;

我们知道1是不大于2的，它返回了假的。所以isResult的值为'假的'。

循环:

for循环:

for(初始化条件;结束条件;递增条件){
    
    
    //run this code
}

上述例子，如果我想计算1到10000之间的数的和。

var total = 0;
var i;
for(i = 1;i <= 10000; i++){
    
    
    total = total+ i;
}
console.log(total);//50005000

break:

var x = 0;
for (;;) {
    
     // 将无限循环下去
    if (x > 100) {
    
    
        break; // 通过if判断来退出循环
    }
    x ++;
}

continue:

var x;
for(var i = 0; i <= 10; i++){
    
    
    if(i == 3) continue;
     x = x + "这个数字是" + i 
}

while循环:

初始化条件
while(判断循环结束条件){
    
    
    //code to run
    递增条件
}

看个例子：比如我们要计算100以内所有奇数之和，可以用while循环实现。

var x = 0;
var n = 99;
while (n > 0) {
    
    
    x = x + n;
    n = n - 2;
}
x; // 2500

do…while循环：

最后一种循环是do { ... } while()循环，它和while循环的唯一区别在于，不是在每次循环开始的时候判断条件，而是在每次循环完成的时候判断条件：

var n = 0;
do {
    
    
    n = n + 1;
} while (n < 100);
n; // 100

用do { ... } while()循环要小心，循环体会至少执行1次，而for和while循环则可能一次都不执行。

函数：

定义函数：

一个函数定义(也称为函数声明，或函数语句)由一些列的function关键字组成。例如，以下代码是一个简单的计算多组数的和的函数，我们给它命名为sum。

function sum(a,b){
    
    
    //函数体;
}

函数调用：

function sum(a,b){
    
    
    console.log(a+b);
}
sum(3,5);//调用函数，直接写函数名

我们把定义函数时传入的两个参数a和b叫形参(形式参数，一个将来被代替的参数)，调用函数时传入的两个参数叫实参(实际的参数)。

函数返回值：

function sum(a,b){
    
    
    return a+b
}
var result = sum(4,5);

函数表达式：

虽然上面的函数定义在语法上是一个语句，但函数可以由函数表达式创建。这样的函数可以是匿名的;它不必有一个名称。例如，函数sum也可以这样去定义：

var sum = function(a,b){
    
    
    return a + b;
}
sum(4,5);

但是这种方式只会令人费解，所以我们不要这样做！创建功能时，最好只要坚持第一种函数定义的方式就可以。

函数作用域和冲突：

处理函数时，作用域是非常重要的一个概念。当你创建函数时，函数内定义的变量和其它东西都在它们自己的单独的范围内，意味着它们被锁在自己独立的房间内。

所有的函数的最外层被称为全局作用域。在全局作用域内定义的值可以任意地方访问。

Javascript主要是由于安全性和组织性。有时不希望变量可以在代码中的任何地方访问。

例如，假设你有一个HTML文件，它调用两个外部的Javascript文件，并且他们都有一个相同的名称定义的变量和函数：

<!-- my HTML file -->
<script src="first.js"></script>
<script src="second.js"></script>
<script>
  hello();
</script>

//first.js
var name = 'Tom';
function hello() {
    
    
  alert('Hello ' + name);
}

//second.js
var name = 'Jack';
function hello() {
  alert('Hello ' + name);
}

这两个函数都是用hello()形式调用，但是你只能访问到 second.js文件的hello()函数。second.js 在源代码中后应用到HTML中，所以它的变量和函数覆盖了 first.js 中的。我们称为这种行为叫代码冲突。

将代码锁定在函数中避免了这样的问题，并能解决我们代码冲突的问题。

看个例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Function scope example</title>
    </head>
    <body>

        <script>
            var x = 1;
            function a() {
    
    
                var y = 2;
            }
            function b() {
    
    
                var z = 3;
            }
            function output(value){
    
    
                return value;
            }
            console.log(output(x)); // 1
            console.log(output(y)); // Uncaught ReferenceError: y is not defined
            console.log(output(z)); // Uncaught ReferenceError: z is not defined
        </script>
    </body>
</html>
后面两个都应该返回错误，这是为什么？由于函数作用域,y和z被锁定在函数a()和b()函数中，所以output()从全局作用域调用时无法访问他们。
但是，从另一个函数里面调用呢？
function a() {
    
    
    var y = 2;
    output(y);
}

function b() {
    
    
    var z = 3;
    output(z);
}
function output(value){
    
    
    return value;
}
a();
b();

打印出对应的结果。这样是没有问题的，因为output()函数在其他函数的内部被调用。在这种情况下，输出变量的定义和函数的调用都在同一个作用域中(注：即函数作用域)。output()它可以在任何地方被调用，因为它在全局作用域中被定义。

修改你的代码如下，如下所示：

function a() {
    
    
  var y = 2;
  output(x);
}

function b() {
    
    
  var z = 3;
  output(x);
}
a();
b();

函数 a()和b()都应该输出x—-1的值。这些没有问题，因为即使output()的调用与x的定义不在同一个作用域内，但x是一个全局变量，所以在所有代码中都可用。

注意：相同的范围规则不适用于循环（for（）{…}）和条件块（if（）{…}） - 它们看起来非常相似，但它们不一样！小心不要让这些困惑。

注意：ReferenceError：“x”未定义错误是您遇到的最常见的错误。如果您收到此错误，并且确定您已经定义了该问题的变量，请检查它的范围。

函数内部的函数：

在任何地方你都可以调用函数，甚至可以在另一个函数中调用函数。这通常被用作保持代码整洁的方式。如果你有一个复杂的函数，如果将其分解成几个子函数，它更容易理解：

function myBigFunction() {
    
    
  var myValue;

  subFunction1();
  subFunction2();
  subFunction3();
}

function subFunction1() {
    
    
  console.log(myValue);
}

function subFunction2() {
    
    
  console.log(myValue);
}

function subFunction3() {
    
    
  console.log(myValue);
}

只需确保在函数内使用的值正确的范围. 上面的例子会抛出一个错误ReferenceError：MyValue没有被定义，因为尽管myValue变量与函数调用的作用域相同, 但在函数定义内没有定义 - 调用函数时运行的实际代码。为了使这个工作，你必须将值作为参数传递给函数，如下所示：

function myBigFunction() {
    
    
  var myValue = 1;

  subFunction1(myValue);
  subFunction2(myValue);
  subFunction3(myValue);
}

function subFunction1(value) {
    
    
  console.log(value);
}

function subFunction2(value) {
    
    
  console.log(value);
}

function subFunction3(value) {
    
    
  console.log(value);
}

参考博客：
https://blog.csdn.net/tjh625/article/details/81536634
https://blog.csdn.net/m0_50518666/article/details/108350567
http://www.itxst.com/detail/nzyb3a3u.html