JavaScript的基础学习（3）

最新推荐文章于 2022-11-23 17:32:46 发布
最新推荐文章于 2022-11-23 17:32:46 发布
阅读量353 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34727238/article/details/89405800
版权

目录

视频23

break、continue语句的用法

视频24

函数

视频25

函数

视频26

递归

视频27

对象创建

视频23

break、continue语句的用法

break可以结束switch语句，同样，还可以结束其所在的循环

例子：

for（var i=1；i<=5;i++）

{

if(i==3)

break;

document.write(i);//1 2

}

例子：

for（var i=1；i<=5;i++）

{

for（var j=1；j<=5;j++）

{

if（j%2==0）

break;//结束的是内部循环

}

document.write(i);//1 2 3 4 5

}

注意：break结束的是他所在的循环，不会影响其他的循环

例子：想结束的是外部循环而不是内部循环

flag：

for（var i=1；i<=5;i++）

{

for（var j=1；j<=5;j++）

{

if（j%2==0）

break  flag;//结束的是外部循环

}

document.write(i);//没有任何输出结果

}

continue的作用：结束的是本次循环，直接进入下一次循环

一旦执行，则当前的这次循环直接结束，进入下一次的循环

for（var i=1；i<=5;i++）

{

if（i==3）

continue；//结束本次循环，直接进入下一次的循环，也就是去执行i++

}

document.write(i);//1245

}

例子：（嵌套循环）

for（var i=1；i<=5;i++）

{

for（var j=1；j<=5;j++）

{

if（j%2==0）

continue;//结束的是所在循环的某一次循环，直接去执行j++

}

document.write(i);//1 2 3 4 5

}

例子：

flag：

for（var i=1；i<=5;i++）

{

for（var j=1；j<=5;j++）

{

if（j%2==0）

continue  flag;//结束的是外部循环的某一次循环，然后直接去执行i++

}

document.write(i);//没有任何输出结果

}

视频24

函数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body>
<script type="text/javascript">
function show()
{
alert("你好");
alert("我好");
alert("大家好");
}
show();
for(var i=1;i<=10;i++)
document.write("*");
show();
</script>

<!-- 函数就是用来解决相同的功能的不用重复写多次的问题 -->

</div> 
</body>
</html>

视频25

函数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body>
<script type="text/javascript">

function fun()
{
var sum=44+66;
alert("sum="+sum);
}
fun();
</script>

</div> 
</body>
</html>

有参数的函数，实现求两个数的和

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body>
<script type="text/javascript">

function fun(num1,num2)
{
var sum=num1+num2;
alert("sum="+sum);
}
fun(66,88);
</script>

</div> 
</body>
</html>

函数的参数帮助函数的功能更加灵活，让这个函数可以接收任意的数值

但是上一个函数调用并没有得到两个数字的和。如果要得到和的值就要进行return操作，调用的时候就可以进行变量接收。调用者就可以对这个数值进行自己的处理。不要在return后边写任何语句，因为不会并不会被执行。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body>
<script type="text/javascript">

function fun(num1,num2)
{
var sum=num1+num2;
alert("sum="+sum);
return sum;
}
var s= fun(66,88);
if(s>10)
alert("哈哈哈没想到吧")

</script>

</div> 
</body>
</html>

function 函数名（参数...）

{

return 返回值；

}

自定义函数的考虑方式：

1.是否需要返回值

2.是否需要参数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>

</head>
<body>
<script type="text/javascript">

//求出两个数中的最大值

function getMax(num1,num2)
{

	return num1>num2?num1:num2;

}
//判断两个数是不是相等
function isEqual(n1,n2)
{
	return n1==n2;
}

//打印一个五行五列的矩形（不需要参数也不需要返回值）
function  rectangle()
{
	for(var i=1;i<=5;i++)
	{
	
	for(var j=1;j<=5;j++){
	document.write("* ");
	}document.write("<br/>");	
	}

}

rectangle();

</script>

</div> 
</body>
</html>

视频26

递归

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">

function test(a)
{
if(a<0)
   return;//结束函数的执行，直接返回到调用函数的位置
else
   alert(a);
}
test(-1);//不会有任何的运行结果
test(6);//会弹出6

//函数之间是可以相互调用的
function add(a,b)
{
	return a+b;
}
function show()
{

var sum=add(1,3);
alert(sum);
}
show();

alert("开始演示递归部分");

//函数的递归 就是函数自己调用自己
//求从1开始一直到某个数的和
function add(n)//这是一种非递归的算法
{
	var sum =0;
	for(var i= 1;i<=n;i++)
	sum=sum+i;
	return sum;
}
alert(add(5));


function digui(n)
{
if(n==1)
return 1;
else
return n+digui(n-1);
}

alert(digui(4));

</script>

</div> 
</body>
</html>

递归的特点：

自己调用自己，递归要注意内存问题，而且递归必须有条件的结束。

视频27

对象创建

js的数据类型

基本类型：四种   数据 字符串 布尔 未定义类型 特点：只能存储数据

引用类型：object是最基本的类型  特点：是数据和功能（函数）的组合

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">

var a=45;

function  show()
{
	alert("show");

}
var obj=new Object();
obj.name="zhangsan";
obj.fun=show;

//使用对象
alert(obj.name);
obj.fun();
//对象既可以存储数据，又可以包含函数

</script>
</div> 
</body>
</html>

还可以直接写到后边，写成匿名函数的形式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">

var a=45;


var obj=new Object();
obj.name="zhangsan";
obj.fun=function()
{
	alert("show");
}
;
//使用对象
alert(obj.name);
obj.fun();
//对象既可以存储数据，又可以包含函数

</script>
</div> 
</body>
</html>

创建对象的时候可以省略new 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">

//创建对象的时候可以省略new
var obj= Object();
obj.age=23;
obj.fun=function(){
alert("哈哈哈");
}

alert(obj.age);
obj.fun();

</script>
</div> 
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">

//创建对象的时候可以使用字面量方式

function show()
{
alert("哈哈哈");
}

var obj= {
name:"李四",
age:23,
fun:show
}
alert(obj.name)
obj.fun();
</script>
</div> 
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">

//创建对象的时候可以使用字面量方式

var obj= {
name:"李四",
age:23,
fun:function(){
alert("haha");
}
}
alert(obj.name)
obj.fun();
</script>
</div> 
</body>
</html>

加上单引号也可以

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">

//创建对象的时候可以使用字面量方式

var obj= {
'name':"李四",
'age':23,
'fun':function(){
alert("haha");
}
}
alert(obj.name)
obj.fun();
</script>
</div> 
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">

//创建对象的时候可以使用字面量方式 可以创建一个空的对象

var obj= {};
obj.name="赵四";
obj.ff=function(){
alert("哈哈哈");
}
alert(obj['name']);
obj.ff();

</script>
</div> 
</body>
</html>

 

 

 

 

 

 

阿酒在看云
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript基础学习
07-10
JavaScript基础学习
JavaScript基础学习笔记
10-25
JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记，涵盖了 JavaScript 基础知识点，包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构：head、body、title、...
javascript基础笔记1
qq_42243957的博客
07-30 122
typeof运算： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>变量</title> <script > //定义变量 /* var a = 3; alert(a); a = "abc"; alert(a);*/ ...
学习笔记—document write( )语法、功能、以及需要注意的‘坑’
热门推荐
公众号：前端蛋卷
04-21 3万+
语法：document.write(exp1,exp2,exp3,....)参数解析：（1）.expN：可以是一个或者多个参数，如果是多个参数，那么按照顺序写入文档。(如果写入多个参数的话，这些参数会自动换行显示)  (2)这里的参数可以是变量，也可以是函数体、函数自执行体，数字等等，也可以进行一些简单的运算  (3)参数支持标签属性，写入的时候会按照html进行解析，但是需要用字符串的形式(常用...
document.write()用法
youyedemeng的专栏
08-30 2万+
document.write() 方法可以用在两个方面：页面载入过程中用实时脚本创建页面内容，以及用延时脚本创建本窗口或新窗口的内容。该方法需要一个字符串参数，它是写到窗口或框架 中的HTML内容。这些字符串参数可以是变量或值为字符串的表达式，写入的内容常常包括HTML标记语言。     记住，在载入页面后，浏览器输出流自动关闭。在此之后，任何一个对当前页面进行操作的document.write
Javascript 基础知识学习
岳来的博客
11-23 7270
javascript 基础学习
JavaScript js基础学习 示例代码
07-03
JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础...
JavaScript基础学习-1
12-20
1. JavaScript基础：学习ECMAScript的基本规则，这是JavaScript的核心语言部分。 2. ES6实战：了解并应用ES6引入的新特性，如箭头函数、类、模板字符串等。 3. 面向对象编程：理解面向对象的概念并学会在JavaScript...
前端JavaScript基础学习笔记案例
最新发布
08-02
个人在学习前端JavaScript时的学习笔记，内含JavaScript的中基础知识点，以及案例。里面有兼容市面上浏览器的方法 1.知识点包括：基础语法，字符串操作，object对象，DOM对象，BOM对象，offset，client，scroll对象...
详解Document.write()方法
08-10 1406
document.write()方法可以用在两个方面： 1.页面载入过程中，用脚本加入新的页面内容。 2.用延时脚本创建本窗口或新窗口的内容。 该方法需要一个字符串参数，它是写到窗口或框架中的HTML内容。这些字符串参数可以是变量或值为字符串的表达式，写入的内容常常包括H...
js学习笔记(1)之document.write()方法使用总结
LHS的专栏
08-02 6942
js方法document.write();用来向浏览器页面输出内容 具体用法： 用来输出字符串内容：document.write("输出字符串内容要使用双引号"); 用来输出变量的值：如var mynum="hello"; document.write(mynum); 用来输出html标签内容：如document.write("你好!"); 用来输出混合内容，使用”+“号来连接内容：如d
document.write()详解
qq_43383323的博客
10-19 1万+
原博客：https://blog.csdn.net/wei_ke_zhi/article/details/82153778 一、document.write()运行原理 首先我们先了解一下这条语句运行的原理： document.write()是Javascript中对document.open()所开启的文档流操作的API方法。 它能够直接砸文档流中写入字符串，一旦文档流已经关闭，那么 document.write()就会重新运用document.open()打开新的文档流并写入，此时原来的文档流会被清.
力扣（LeetCode）题解（使用JavaScript）【1】
一只洒鹿
05-07 1157
（1）左旋转字符串 字符串的左旋转操作是把字符串前面的若干个字符转移到字符串的尾部。请定义一个函数实现字符串左旋转操作的功能。比如，输入字符串"abcdefg"和数字2，该函数将返回左旋转两位得到的结果"cdefgab"。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g...
力扣（LeetCode）题解（使用JavaScript）【3】
一只洒鹿
05-12 915
（1）按既定顺序创建目标数组 给你两个整数数组 nums 和 index。你需要按照以下规则创建目标数组： 目标数组 target 最初为空。 按从左到右的顺序依次读取 nums[i] 和 index[i]，在 target 数组中的下标 index[i] 处插入值 nums[i] 。 重复上一步，直到在 nums 和 index 中都没有要读取的元素。 请你返回目标数组。 题目保证数字插入位置总是存在。 /** * @param {number[]} nums * @param {number[]}
力扣（LeetCode）题解（使用JavaScript）【4】
一只洒鹿
05-12 884
（1）打印从1到最大的n位数 输入数字 n，按顺序打印出从 1 到最大的 n 位十进制数。比如输入 3，则打印出 1、2、3 一直到最大的 3 位数 999。 示例 1: 输入: n = 1 输出: [1,2,3,4,5,6,7,8,9] 说明： 用返回一个整数列表来代替打印 n 为正整数 来源：力扣（LeetCode） 链接：https://leetcode-cn.com/problems/da-yin-cong-1dao-zui-da-de-nwei-shu-lcof 著作权归领扣网络所有。商业转载请联
JavaScript的基础学习（2）
一只洒鹿
04-04 578
目录 视频10 关系运算符 视频11 条件运算符 视频12 逻辑运算符 视频13 逻辑运算符 视频14 typeof运算符 视频15 选择结构if 和if else两种用法 视频16 选择结构 视频17 switch结构 视频18 switch结构 视频19 循环结构 视频20 do while 视频21 循环结构for结构 视频22 fo...
力扣（LeetCode）题解（使用JavaScript）【2】
一只洒鹿
05-09 560
（1）统计位数为偶数的数字 给你一个整数数组 nums，请你返回其中位数为 偶数 的数字的个数。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>统计位数为偶数的数字</title> <!--示例 1： ...
"轻松入门JavaScript基础学习及用法
学习 JavaScript 的教材是非常重要的，因为它可以帮助你快速掌握基础知识并建立强大的基础。在学习 JavaScript 的过程中，你将会了解到什么是 JavaScript，如何在 HTML 页面中添加 JavaScript 代码，以及如何使用 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值