04-前端技术_javaScript基础

四，javaScript基础

1，JavaScript语言介绍

1.1 什么是JavaScript？

1.2 前端Web技术的组成：HTML、CSS、JavaScript

2，JavaScript使用方法

2.1 内部JavaScript: 使⽤标签

2.2 外部 JavaScript

2.3 内联JavaScript处理器

3，JavaScript基础语法

3.1 JavaScript的输出

3.2 变量

3.3 变量的命名规则和规范

3.4 语句与注释

4，数据类型介绍

4.1 JavaScript中数据类型

5，整数的二八十六进制转换

5.1 举例

5.2 面试题

6，值类型与引用类型的区别

6.1 undefined 和 null 的区别

6.2 值类型理解：

6.3 引用类型理解：

6.4 举例

7，数据类型转换

8，运算符

8.1 按照操作元数的个数不同分为：

8.2 按照种类划分又分为如下运算符

8.3 运算符的优先级

9，流程控制——九九乘法表

10，函数

10.1 函数的定义方法

10.2 函数中的参数

10.3 函数中的返回值

10.4 函数之变量作用域

10.5 函数之常用内置函数

四，javaScript基础

1，JavaScript语言介绍

1.1 什么是JavaScript？

JavaScript 是⼀种客户端脚本语⾔（脚本语⾔是⼀种轻量级的编程语⾔）。

JavaScript 通常被直接嵌⼊ HTML ⻚⾯，由浏览器解释执⾏

JavaScript 是⼀种解释性语⾔（就是说，代码执⾏不进⾏预编译）。

特点：弱类型和基于对象。(因为⾯向对象需要具有封装、继承、多态的特征)

JavaScript语⾔中包含三个核⼼：ECMAScript基本语法、DOM、BOM

1.2 前端Web技术的组成：HTML、CSS、JavaScript

HTML是⼀种标记语⾔，⽤来结构化我们的⽹⻚内容并赋予内容含义，例如定义段落、标题和数据表，或在⻚⾯中嵌⼊图⽚和视频。

CSS 是⼀种样式规则语⾔，可将样式应⽤于 HTML 内容，例如设置背景颜⾊和字体，在多个列中布局内容。

JavaScript 是⼀种脚本语⾔，可以⽤来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。）

2，JavaScript使用方法

可以像添加CSS那样将 JavaScript 添加到 HTML ⻚⾯中。CSS 使⽤ <link> 元素链接外部样式表，使⽤ <style> 元素向 HTML 嵌⼊内部样式表，JavaScript 这⾥只需⼀个元素 <script> 。

2.1 内部JavaScript: 使⽤ <script> ... </script> 标签

属性：

charset（可选）字符集设置、
defer（可选执⾏顺序）值：defer、
language(已废除)、
src（可选）使⽤外部的js脚本⽂件
type(必选)类型：值：text/javascript

<script type="text/javascript">
<!--
javaScript语⾔
//-->
</script>

注意

可以在HTML中任何地方插入js脚本，比如可以将js插入head头部（需要特殊处理才能操作body内部元素）、插在body内部，也可以插在body后面（按照程序执行顺序，这样就可以操作body体内）

举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        //此处为javascript语言
        var str = "Hello World!";
        console.log(str);//输出到控制台  
    </script>
</head>
<body>
    <h1>JavaScript语言的使用</h1>
</body>
</html>

2.2 外部 JavaScript

使⽤外部导⼊js会使代码更加有序，更易于复⽤，且没有了脚本的混合，HTML也会更加易读

<script type="text/javascript" src="my.js"></script>

举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>JavaScript语言的使用</h1>
</body>
<script src="./my.js"></script>
</html>

2.3 内联JavaScript处理器

就是将js代码写⼊html代码中，如在html标签的事件中或超级链接⾥。

<button onclick="javaScript语⾔"></button> 
<a href="javascript:alert('aa');alert('bb')">点击</a>

举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>JavaScript语言的使用</h1>
    <button onclick="alert('Hello World!')">点击我</button>
</body>
</html>

3，JavaScript基础语法

3.1 JavaScript的输出

JavaScript 没有任何直接打印或者输出的函数。

若有显示数据可以通过下⾯不同的⽅式来输出：

window.alert() 弹出警告框
document.write() ⽅法将内容写到 HTML ⽂档中
innerHTML 写⼊到 HTML 元素
console.log() 写⼊到浏览器的控制台

参考示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript实例</title>
</head>
<body>
    <h3>测试JavaScript的输出</h3>
    <div id="did">div层</div>
</body>
<script>
    //弹出⼀个信息提示框
    window.alert("Hello JavaScript!");
 
    //输出到浏览器⻚⾯中
    document.write("这个是⻚⾯中的输出");

    //通过写⼊HTML标签中，完成⻚⾯中的输出
    document.getElementById('did').innerHTML="div层中的输出";

    //控制台上的输出
    console.log("控制台上的输出");
</script>
</html>

多段js代码，其中一段出错，不影响其他代码的效果！

想要换行需要使用br标签

3.2 变量

什么是变量

变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据

为什么要使⽤变量

使⽤变量可以⽅便的获取或者修改内存中的数据

如何使⽤变量使⽤var声明变量

var name;

变量的赋值

var name;
name = "zhangsan";

同时声明多个变量

var name,age,sex;
name = 'lisi';
age = 20;
sex = "man"

同时声明多个变量并赋值

var name = 'wangwu', age = 25;

3.3 变量的命名规则和规范

规则 - 必须遵守的，不遵守会报错

由字⺟、数字、下划线、$符号组成，不能以数字开头
不能是关键字和保留字，例如：for、 if、while。
区分⼤⼩写

规范 - 建议遵守的，不遵守不会报错

变量名必须有意义
遵守驼峰命名法。⾸字⺟⼩写，后⾯单词的⾸字⺟需要⼤写。例如：userName、userPassword

3.4 语句与注释

语句：

⼀般程序中的语句是由表达式加分号构成 ; 组成。(js中的每条语句之间的分割符可以是回⻋换⾏也可以是";"分号(推荐分号))
一行中有多条语句时，必须通过分号隔开；
压缩代码时，多行代码可能合为一行，所以建议每行语句后加分号；

表达式的种类很多：

如：算术表达式、赋值表达式、关系表达式、逻辑表达式等等...
也可以是⼀个函数、⽅法的调⽤

脚本注释： // 单⾏注释和 /* 多⾏注释 */

单⾏注释

单⾏注释以 // 开头。
任何位于 // 与⾏末之间的⽂本都会被 JavaScript 忽略（不会执⾏）。

多⾏注释

多⾏注释以 /* 开头，以 */ 结尾。
任何位于 /* 和 */ 之间的⽂本都会被 JavaScript 忽略。

注释的⽬的：

为程序添加辅助说明，便于阅读理解。
注释掉临时不需要执⾏的代码、便于调试、排错。

4，数据类型介绍

4.1 JavaScript中数据类型

值类型(基本类型)：

字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
注意：Symbol 是 ES6 引⼊了⼀种新的原始数据类型，表示独⼀⽆⼆的值。

引⽤数据类型：

对象(Object)、数组(Array)、函数(Function)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //数值类型
        console.log(typeof a); //undefined 没有定义的变量

        var a = 10; //整数
        console.log(typeof a); //number
        a = 3.14; //浮点数
        console.log(typeof a); //number

        //布尔类型：boolean： 值：true false
        a = true;
        console.log(typeof a); //boolean

        //字符串：使用单引号或双引号都可以定义子符串
        a = "Hello ...";
        console.log(typeof a); //string
        a = null;
        console.log(typeof a); //object

        //引用类型
        var b = [10,20,30]; //数组的定义
        console.log(typeof b); //数组对象object

        console.log(b instanceof Array); //true 检查对象b是否是来源于Array
        console.log(a instanceof Array); //false 检查对象a是否是来源于Array
    
        var ob = new Object();
        console.log(typeof ob); //object
        var fn = function(){} //声明一个空函数
        console.log(typeof fn); //function

    </script>
</head>
<body>
    <h1>JavaScript语言的数据类型</h1>
</body>
</html>

typeof 操作符获取⼀个变量的类型,返回结果如下：

undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的 (整数、浮点数)
string - 如果变量是 String 类型的（采⽤""、 ''）
object - 如果变量是⼀种引⽤类型或 Null 类型的如： new Array()/ new String()...
function -- 函数类型

typeof "zhangsan" // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof true // 返回 boolean
typeof [10,20,30,40] // 返回 object
typeof {name:'lisi', age:20} // 返回 object
typeof new Date() // 返回 object
typeof function(){} // 返回 function
typeof myCar // 返回 undefined (如果 myCar 没有声明)
typeof null // 返回 object

5，整数的二八十六进制转换

5.1 举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        console.log("======================================");
        console.log(1.23e5); //1.23*10的5次方
        console.log("整数进制的使用");
        console.log(10); //10 十进制
        console.log(0b10); //2 二进制
        console.log(0o10); //8 八进制
        console.log(0x10); //16 十六进制（0 1 2 3 4 5 6 7 8 9 a b c d e f）
        console.log("===============十进制转成其他进制==============");
        var num = 220;
        console.log(num.toString(2)); //11011100 二进制
        console.log(num.toString(8)); //334 八进制
        console.log(num.toString(16)); //DC 十六进制

        console.log("===============其他进制转成十进制==============");
        console.log(parseInt('11011100',2)); //二进制转十进制
        console.log(parseInt('334',8)); //八进制转十进制
        console.log(parseInt('DC',16)); //十六进制转十进制

    </script>
</head>
<body>
    <h1>JavaScript语言的数据类型</h1>
</body>
</html>

十进制装其他进制：除基取余

其他进制转十进制：Σ权值*权重

5.2 面试题

假设有15瓶水，其中有一瓶水有毒，请问至少使用几只小白鼠可以一次性试（最快）喝出来。

比如编号1、2、3、4的小白鼠，喝完之后的状态（0正常，1死亡）为：0011，即编号3、4的白鼠共同喝过且1、2白鼠都没喝过的水有问题！也就是0011对应的第三瓶水

6，值类型与引用类型的区别

6.1 undefined 和 null 的区别

null 和 undefined 的值相等，但类型不等：

typeof undefined // undefined
typeof null // object
null === undefined // 类型+值比较false
null == undefined // 值比较true

object引⽤类型引⽤类型通常叫做类（class），也就是说，遇到引⽤值，所处理的就是对象。Object 对象⾃身⽤处不⼤，不过在了解其他类之前，还是应该了解它。因为 ECMAScript 中的Object 对象与 Java 中的 java.lang.Object 相似， ECMAScript 中的所有对象都由这个对象继承⽽来，Object 对象中的所有属性和⽅法都会出现在其他对象中，所以理解了 Object 对象，就可以更好地理解其他对象。

6.2 值类型理解：

变量之间的互相赋值，是指开辟⼀块新的内存空间，将变量值赋给新变量保存到新开辟的内存⾥⾯；之后两个变量的值变动互不影响，例如：

var a = 10; //开辟⼀块内存空间保存变量a的值“10”；
var b = a; //给变量 b 开辟⼀块新的内存空间，将 a 的值 “10” 赋值⼀份保存到新的内存⾥；
//a 和 b 的值以后⽆论如何变化，都不会影响到对⽅的值；

6.3 引用类型理解：

变量之间的互相赋值，只是指针的交换，⽽并⾮将对象（普通对象，函数对象，数组对象）复制⼀份给新的变量，对象依然还是只有⼀个，只是多了⼀个指引。

//需要开辟内存空间保存对象，变量 a 的值是⼀个地址，这个地址指向保存对象的空间；
var a = { x: 1, y: 2 };
var b = a; // 将a 的指引地址赋值给 b，⽽并⾮复制⼀给对象且新开⼀块内存空间来保存；
// 这个时候通过 a 来修改对象的属性，则通过 b 来查看属性时对象属性已经发⽣改变；

6.4 举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //值类型和引用类型的区别
        //值类型：
        var a = 10;
        var b = a; //由于a是值类型，故此处赋值，属于开辟一个新空间，将的值复制一份传给了b。
        b = 20;
        console.log(a); //10 

        //引用类型：
        var oa = {name:'zhangsan',age:20};
        var ob = oa; //oa是引用类型，故ob为oa别名。并没有复制一份新对象
        ob.name = "lisi";
        console.log(oa);

    </script>
</head>
<body>
    <h1>JavaScript语言的数据类型</h1>
</body>
</html>

7，数据类型转换

JavaScript 变量可以转换为新变量或其他数据类型：

通过使⽤ JavaScript 函数
通过 JavaScript ⾃身⾃动转换

ECMAScript 中可⽤的 3 种强制类型转换如下：

Boolean(value) - 把给定的值转换成 Boolean 型；
Number(value) - 把给定的值转换成数字（可以是整数或浮点数）；
String(value) - 把给定的值转换成字符串；

使⽤：Number（）、parseInt() 和parseFloat（）做类型转换

Number()强转⼀个数值(包含整数和浮点数)。
*parseInt()强转整数，
*parseFloat（）强转浮点数

函数isNaN()检测参数是否不是⼀个数字。 is not a number

举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //类型转换
        console.log(String(20))
        console.log(typeof String(20))
        console.log(String(false))
        console.log(String(new Date()))
        console.log(String(null))
        console.log(String([10,20,30]))
        console.log("========数值类型的转换========");
        console.log(Number("30")+20); //50
        console.log("30"+20); //"3020"
        console.log(Number('3.1415926'));
        console.log(Number('3.14abc')); //NaN => Not a Number
        console.log(isNaN("20")); //false 不是一个纯数值判断函数

        console.log(parseInt("40abc")); //40
        console.log(parseInt("40.6abc")); //40
        console.log(parseFloat("40.6abc")); //40.6
        console.log(parseFloat("abc40.8")); //NaN

        console.log(true+1); //2
        console.log("abc"+100); //'abc100'
    </script>
</head>
<body>
    <h1>JavaScript语言的数据类型--类型转换</h1>
</body>
</html>

8，运算符

8.1 按照操作元数的个数不同分为：

⼀元运算符、⼆元运算符和三元运算符：

delete：⽤于删除对象中属性的如：delete o.name; //删除o对象中的name属性
++ -- : ⼀元加法和⼀元减法

8.2 按照种类划分又分为如下运算符

1）算数运算符

注意：其中+号具有两重意思：字串连接和数值求和。

就是加号”+“两侧都是数值则求和，否则做字串连接

2）赋值运算符

3）⽐较运算符

4）逻辑运算符

5）位运算符

位运算符处理 32 位数。
该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。

上例使⽤ 4 位⽆符号的例⼦。但是 JavaScript 使⽤ 32 位有符号数。

因此，在 JavaScript 中， ~5 不会返回 10，⽽是返回 -6。

~00000000000000000000000000000101 将返回 11111111111111111111111111111010 。

⽆符号位移（>>>）和有符号位移（>>）的区别是

有符号位移运算时如果数字为正数时位移后在前⾯补0，为负数时则在位移后在前⾯补1

6）条件运算符（三元运算符）

7）逗号运算符

8）类型运算符

instanceof 运算符与 typeof 运算符相似，⽤于识别正在处理的对象的类型。

与 typeof ⽅法不同的是，instanceof ⽅法要求开发者明确地确认对象为某特定类型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log("=========6.三元运算符========");
        var age = 26;
        var info = (age < 18) ? "太年轻":"足够成熟";
        console.log(info);

        
        console.log("=========7.逗号运算符========");
        var a = 10, b = 20, c = 30;
        console.log(a+":"+b+":"+c); //10:20:30
        
        console.log("=========8.类型运算符========");
        //typeof  instanceof
        var oStringObject = new String("hello world"); 
        console.log(oStringObject instanceof String);   // 输出 "true"
        // 判断 foo 是否是 Foo 类的实例
        function Foo(){} 
        var foo = new Foo(); 
        console.log(foo instanceof Foo)//true
        // 判断 foo 是否是 Foo 类的实例 , 并且是否是其父类型的实例
        function Aoo(){} 
        function Foo(){} 
        Foo.prototype = new Aoo();//JavaScript 原型继承
        var foo = new Foo(); 
        console.log(foo instanceof Foo)//true 
        console.log(foo instanceof Aoo)//true
        
        console.log("=========9.delete运算符========");
        var stu = {name:'zhangsan',sex:'man',age:20};
        console.log(stu);
        delete stu.sex; //删除stu对象中的sex属性
        console.log(stu);
    
    </script>
</head>
<body>
    <h1>JavaScript语言中的运算符--其他运算符</h1>
</body>
</html>

8.3 运算符的优先级

优先级从⾼到底

1. () 优先级最⾼
2. ⼀元运算符 ++ -- !
3. 算数运算符先 * / % 后 + -
4. 关系运算符 > >= < <=
5. 相等运算符 == != === !==
6. 逻辑运算符先 && 后||
7. 赋值运算符 = += -= *= /= %=

9，流程控制——九九乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>JavaScript语言--流程控制训练--九九乘法表</h1>
</body>
<script>
     document.write('<table width="800" border="1">');
     //循环输出行
     for(var j=1; j<=9; j++){
        document.write('<tr>');
        //循环输出字段（列）
        for(var i=1; i<=9; i++){
            //判断是否输出空的单元格
            if(i>j){
                document.write('<td> </td>');//  表示输出一个空格
            }else{
                document.write('<td>'+i+'*'+j+"="+(i*j)+'</td>');
            }
        }
        document.write('</tr>');
     }
     document.write('</table>');
     
     document.write('<br/><hr/><br/>');

     document.write('<table width="800" border="1">');
     //循环输出行
     for(var j=1; j<=9; j++){
        document.write('<tr>');
        //循环输出字段（列）
        for(var i=9; i>=1; i--){
            //判断是否输出空的单元格
            if(i>j){
                document.write('<td> </td>');
            }else{
                document.write('<td>'+i+'*'+j+"="+(i*j)+'</td>');
            }
        }
        document.write('</tr>');
     }
     document.write('</table>');


     document.write('<br/><hr/><br/>');

     document.write('<table width="800" border="1">');
     //循环输出行
     var j = 9;
     while(j>=1){
        document.write('<tr>');
        //循环输出字段（列）
        var i = 1;
        while(i <= 9){
            //判断是否输出空的单元格
            if(i>j){
                document.write('<td> </td>');
            }else{
                document.write('<td>'+i+'*'+j+"="+(i*j)+'</td>');
            }
            i++;
        }
        document.write('</tr>');
        j--;
     }
     document.write('</table>');


     document.write('<br/><hr/><br/>');

     document.write('<table width="800" border="1">');
     //循环输出行
     var j = 9;
     do{
        document.write('<tr>');
        //循环输出字段（列）
        var i = 9;
        do{
            //判断是否输出空的单元格
            if(i>j){
                document.write('<td> </td>');
            }else{
                document.write('<td>'+i+'*'+j+"="+(i*j)+'</td>');
            }
            i--;
        }while(i >= 1);
        document.write('</tr>');
        j--;
     }while(j>=1);
     document.write('</table>');
</script>
</html>

10，函数

10.1 函数的定义方法

函数是什么:

函数（function）是⼀段完成指定任务的已命名代码块。函数可以遵照给它的⼀组值或参数完成特定的任务，并且可能返回⼀个值。

在JavaScript中有两种函数：

⾃定义函数与系统函数。

标准格式：（中括号表示可选）

function 函数名（[参数列表..]）{
 函数体。。。
 [return 返回值;]
}

JavaScript三种定义函数方法：

第⼀种是使⽤function语句定义函数如上⾯格式

第⼆种是使⽤Function()构造函数来定义函数（不常⽤）

var 函数名 = new Function(“参数1”，”参数2”，”参数3”……”函数体”);

如： var 函数名 = new Function(”x”,”y”,”var z=x+y;return z;”);

第三种是在表达式中定义函数

var 函数名 = function(参数1，参数2，…){函数体};

例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
        //函数的定义：
        function myfun(){
            console.log("aaaaaaaaa");
            console.log("bbbbbbbbb");
            console.log("ccccccccc");
            console.log("ddddddddd");
        }

        //函数使用
        myfun();
        console.log("-------------------");
        myfun();
        console.log("-------------------");
        myfun();
        console.log("-------------------");
       */


       //函数的定义方式：
       //1.标准式
       function demo1(){
           console.log("Hello Demo1");
       }

       demo1();

       //2.使用Function()构造函数定义
       var demo2 = new Function('console.log("Hello Demo2");');

       demo2();

       //3.使用表达式方式定义（匿名）
       var demo3 = function(){
            console.log("Hello Demo3"); 
       }

       demo3();

       //4. 函数自调用定义（括号括起方法的定义，并再次添加括号）
       (function(){
            console.log("Hello Demo4");
       })();
    </script>
</head>
<body>
    <h1>JavaScript语言中的函数</h1>
</body>
</html>

10.2 函数中的参数

arguments 对象

在函数代码中，使⽤特殊对象 arguments，开发者⽆需明确指出参数名，就能访问它们。
arguments是⼀个对象,是⼀个伪数组，arguments[索引]---->实参的值
也可以访问这个值，即第⼀个参数的值（第⼀个参数位于位置 0，第⼆个参数位于位置 1，依此类推）。
arguments.length--->是实参的个数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //函数中的参数
        function mysum(m){
            total = 0;
            for(var i=0; i<=m; i++){
                total += i;
            }
            console.log(m+"的累加值："+total);
        }

        //使用
        mysum(10);
        mysum(50);
        mysum(100);

        console.log("=============================");

        //定义多个参数的调用
        function myadd(a,b){
            console.log(a+b);
        }

        myadd(10,20);
        myadd(100,200);
        myadd(200);
        myadd(200,300,400);
        
        console.log("=============================");

        //arguments 对象
        function fun(){
            console.log(arguments);
            //遍历输出所有参数值
            for(var i in arguments){
                console.log(arguments[i]);
            }
        }

        fun(10,20,30,40,50);
    </script>
</head>
<body>
    <h1>JavaScript语言的函数</h1>
</body>
</html>

10.3 函数中的返回值

函数中的返回值：

如果⼀个函数中有return ,那么这个函数就有返回值
如果⼀个函数中没有return,那么这个函数就没有返回值
如果⼀个函数中没有明确的返回值,那么调⽤的时候接收了,结果就是undefined
(没有明确返回值:函数中没有return或函数中有return,但是return后⾯没有任何内容)
函数内容执⾏遇到return，则⽴刻执⾏返回，且下⾯的代码是不会被执⾏的

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //函数中的返回值：
        
        //统计指定参数的累加值函数
        function mysum(m){
            total = 0;
            for(var i=0; i<=m; i++){
                total += i;
            }
            return total; //返回结果
        }

        //使用
        var a = mysum(10);
        console.log("10的累加值："+a);
        console.log("50的累加值："+mysum(50));
        console.log("100的累加值："+mysum(100));
        
        console.log("=========================");


        function fun(m){
            console.log("111111");
            console.log("222222");
            if(m>=10){
                return; //执行return后，就会终止当前函数的执行
            }
            console.log("333333");
        }

        console.log(fun(18)); //undefined
        console.log("=========================");

        function demo(){
            console.log("aa");
            return "cc";
        }
        console.log("bb"+demo()); //aa  bbcc
    </script>
</head>
<body>
    <h1>JavaScript语言的函数</h1>
</body>
</html>

10.4 函数之变量作用域

关于变量作⽤域：

由于函数的出现导致了变量的定义分为函数内定义和函数外定义，即全局和局部变量

全局变量:在函数外使⽤var声明的变量就是全局变量,全局变量可以在⻚⾯的任何位置使⽤

全局变量,如果⻚⾯不关闭,那么就不会释放,就会占空间,消耗内存。

局部变量:在函数内使⽤var关键字定义的变量是局部变量，即出了函数外边⽆法获取。

隐式全局变量:没有使⽤var声明的变量,就叫隐式全局变量，在函数内外都可以获取到。

全局变量是不能被删除的,隐式全局变量是可以被删除的（使⽤delete）

定义变量使⽤var是不会被删除的,没有var是可以删除的

函数外⾯定义的变量是全局变量，函数内可以直接使⽤。

在函数内部没有使⽤var定义的=变量则为全局变量。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //变量的作用域：

        /*
        var name = "zhangsan"; //全局变量

        function demo(){
            console.log("函数内输出全局变量1："+name);
            name = "lisi";
            console.log("函数内输出全局变量2："+name);
        }

        console.log("函数外输出全局变量1："+name);
        demo();
        console.log("函数外输出全局变量2："+name);
        */

        /*
        function demo2(){
            var uname = "zhangsan"; //局部变量
            console.log("函数内输出全局变量："+uname);
        }
        demo2(); //函数调用
        //console.log("函数外输出全局变量2："+uname); //报错，不存在

       //console.log(window);
        */

        //隐式全局变量:没有使用var声明的变量,就叫隐式全局变量，在函数外可以获取到。
        var b = 20;
        function demo3(){
            a1 = 10; //没有var声明的变量 隐式全局变量
            console.log(a1);
            console.log(b);
        }

        demo3();
        delete b; //只可以删除隐式全局变量
        console.log(a1);
        console.log(b);
    </script>
</head>
<body>
    <h1>JavaScript语言的函数</h1>
</body>
</html>

10.5 函数之常用内置函数

escape() //字串编码

unescape() //字串反编码

*eval（) //将参数字符串作为脚本代码来执⾏。

*isNaN() // is not a number (不是⼀个数值)

*parseInt()

*parseFloat()

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //内置函数：
        /*
        escape()    //字串编码
        unescape()    //字串反编码
        *eval（)        //将参数字符串作为脚本代码来执行。
        *isNaN()      // is not a number (不是一个数值)
        *parseInt()
        *parseFloat()
        */

        var url = "http://www.***.com/a.html?name=张三&age=20";

        console.log(url);
        url2 = escape(url);
        console.log(url2);
        console.log(unescape(url2));

        console.log("--------------------");

        var str = "var uname='zhangsan',age=20;";
        eval（str); //将参数str字串当成js脚本程序执行
        console.log(uname);

        console.log(isNaN("10s"));
        
        console.log(parseInt("34as4567dfg"));


        </script>
</head>
<body>
    <h1>JavaScript语言的函数</h1>
</body>
</html>

04-前端技术_javaScript基础

四，javaScript基础

1，JavaScript语言介绍

1.1 什么是JavaScript？

1.2 前端Web技术的组成：HTML、CSS、JavaScript

2，JavaScript使用方法

2.1 内部JavaScript: 使⽤ <script> ... </script> 标签

2.2 外部 JavaScript

2.3 内联JavaScript处理器

3，JavaScript基础语法

3.1 JavaScript的输出

3.2 变量

3.3 变量的命名规则和规范

3.4 语句与注释

4，数据类型介绍

4.1 JavaScript中数据类型

5，整数的二八十六进制转换

5.1 举例

5.2 面试题

6，值类型与引用类型的区别

6.1 undefined 和 null 的区别

6.2 值类型理解：

6.3 引用类型理解：

6.4 举例

7，数据类型转换

8，运算符

8.1 按照操作元数的个数不同分为：

8.2 按照种类划分又分为如下运算符

8.3 运算符的优先级

9，流程控制——九九乘法表

10，函数

10.1 函数的定义方法

10.2 函数中的参数

10.3 函数中的返回值

10.4 函数之变量作用域

10.5 函数之常用内置函数

继续阅读