0
点赞
收藏
分享

微信扫一扫

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

04-前端技术_javaScript基础_javascript

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瓶水,其中有一瓶水有毒,请问至少使用几只小白鼠可以一次性试(最快)喝出来。

04-前端技术_javaScript基础_JavaScript基础_02

比如编号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>

 

04-前端技术_javaScript基础_html_03

8,运算符

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

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

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

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

1)算数运算符

04-前端技术_javaScript基础_前端技术_04

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

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

2)赋值运算符

04-前端技术_javaScript基础_JavaScript基础_05

3)⽐较运算符

04-前端技术_javaScript基础_新职课开课吧_06

4)逻辑运算符

04-前端技术_javaScript基础_前端技术_07

5)位运算符

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

04-前端技术_javaScript基础_javascript_08

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

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

~00000000000000000000000000000101 将返回 11111111111111111111111111111010 。

⽆符号位移(>>>)和有符号位移(>>)的区别是

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

6)条件运算符(三元运算符)

04-前端技术_javaScript基础_javascript_09

7)逗号运算符

04-前端技术_javaScript基础_html_10

8)类型运算符

04-前端技术_javaScript基础_前端技术_11

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>

章节汇总在这里(づ ̄3 ̄)づ╭❤~​​@&再见萤火虫&【04-前端技术】​​

对学习Java感兴趣的同学欢迎加入QQ学习交流群:1126298731

有问题欢迎提问,大家一起在学习Java的路上打怪升级!(o゜▽゜)o☆[BINGO!]

举报

相关推荐

04-前端基础CSS第二天

0 条评论