JavaScript_简介2

最新推荐文章于 2023-04-16 14:59:35 发布
最新推荐文章于 2023-04-16 14:59:35 发布
阅读量133 收藏
点赞数
分类专栏： HTML 前端 JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H_zhiyi/article/details/108340579
版权
前端 同时被 3 个专栏收录
39 篇文章 0 订阅
订阅专栏
JavaScript
27 篇文章 0 订阅
订阅专栏
HTML
11 篇文章 1 订阅
订阅专栏

https://www.w3school.com.cn/js/index.asp
1.javascript 运算符
JavaScript 使用（=）复制运算符。
JavaScript 使用算数运算符（+ - * / % ++ --）来计算值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function suanshu(){
				//声明变量
				var num1=10;
				var num2=3;
				
			document.getElementById("h1").innerHTML=num1+"+"+num2+"="+(num1+num2);
			document.getElementById("h1").innerHTML=num1+"-"+num2+"="+(num1-num2);
			document.getElementById("h1").innerHTML=num1+"*"+num2+"="+(num1*num2);
			document.getElementById("h1").innerHTML=num1+"/"+num2+"="+(num1/num2);
			document.getElementById("h1").innerHTML=num1+"%"+num2+"="+(num1%num2);
			//++[自动加1]
			//变量++   【先用后加】
			//num1++；   //10
			//document.getElementById("h6").innerHTML=num1;   //11
			// ++变量  [先加后用]
		    //++num1;  //11
			//document.getElementById("h6").innerHTML=num1; //11
			// -- [自动减1]
			// 变量-- [先用后减]
			//num1-- ; //10
			//document.getElementById("h6").innerHTML=num1; //9
			//  -- 变量
			--num1;  // 9
			document.getElementById("h6").innerHTML=num1; //9

			}
		</script>
	</head>
	<body>
		<input type="button" name="" id="" value="测试算数运算符" onclick="suanshu()" /><br>
		<h1 id="h1"></h1>
		<h1 id="h2"></h1>
		<h1 id="h3"></h1>
		<h1 id="h4"></h1>
		<h1 id="h5"></h1>
		<h1 id="h6"></h1>
	</body>
</html>

在这里插入图片描述
JavaScript 使用（> < == >= <= !=）比较运算符运算符。
比较运算符的结果一定是布尔值【true/false】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>javascript中的比较运算符</title>
		<script>
			//测试比较运算符的函数
			function test1(){
				//定义参与运算的变量
				var num1=10;
				var num2=3;
				document.getElementById("h1").innerHTML=num1+">"+num2+" = "+(num1>num2);//true
				document.getElementById("h2").innerHTML=num1+"<"+num2+" = "+(num1<num2);//false
				document.getElementById("h3").innerHTML=num1+">="+num2+" = "+(num1>=num2);//true
				document.getElementById("h4").innerHTML=num1+"<="+num2+" = "+(num1<=num2);//false
				document.getElementById("h5").innerHTML=num1+"=="+num2+" = "+(num1==num2);//false
				document.getElementById("h6").innerHTML=num1+"!="+num2+" = "+(num1!=num2);//true
			}
		</script>
	</head>
	<body>
		<input type="button" value="测试比较运算符" onclick="test1();" />
		<h2 id="h1"></h2>
		<h2 id="h2"></h2>
		<h2 id="h3"></h2>
		<h2 id="h4"></h2>
		<h2 id="h5"></h2>
		<h2 id="h6"></h2>
	</body>
</html>

JavaScript 使用(|| && ! )逻辑运算符运算符。
|| [逻辑或]  true || false --> true
     false || true --> true
     true || true --> true
     false || false --> false
     只要有true结果就是true
&& [逻辑与]  true && false --> false
    &emspfalse && true --> false
    &emspfalse && false --> false
    &emsptrue && true --> true
    &emsp只要有false结果就是false

![取反]  !ture–>false
    !false->true
逻辑运算符的运算值和运算结果一定是布尔值【true/false】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			测试逻辑运算符
			function test1(){
				var num1=10;
				var num2=3;
				document.getElementById("h1").innerHTML="("+num1+">"+num2+") || ("+num1+"<"+num2+")=="+((num1>num2)||(num1<num2));
				//(10>3) || (10<3)== true
				document.getElementById("h2").innerHTML="("+num1+">"+num2+") && ("+num1+"<"+num2+")=="+((num1>num2)&&(num1<num2));
				//(10>3) && (10<3)== false  
				document.getElementById("h3").innerHTML="!(("+num1+">"+num2+") && ("+num1+"<"+num2+"))=="+!((num1>num2)&&(num1<num2));
				//!((10>3) && (10<3))== true  
			}
		</script>
	</head>
	<body>
		<input type="button"  value="测试逻辑运算符" onclick="test1();" />
		<h2 id="h1"></h2>
		<h2 id="h2"></h2>
		<h2 id="h3"></h2>
	</body>
</html>

在这里插入图片描述
比较与逻辑运算符通常都是用来做判断的。

  1. JavaScript 数据类型
    字符串值，数值，布尔值，数组，对象。
    字符串值–“hello”
    var zf=”hello”;
    数值[整数和小数]—123 ， 12.5
    var sz=123; var sz=12.5;
    布尔值–[true/false]
    var be=true; var be=false;
    数组–可以保存一组值
    var array=[“hello”,123,12.5,true,false];
    对象
    var student={stuid:1001,stuname:”zhangsan”,stuage:23,stuaddress:”西安”};
    student.stuid===>1001
  2. JavaScript 函数
    JavaScript 函数是被设计为执行特定任务的代码块【{}】。
    实例:
    function myFunction(p1, p2) {
    return p1 * p2; // 该函数返回 p1 和 p2 的乘积
    }
    JavaScript 函数通过 function 关键词进行定义.
    myFunction–函数名称
    “()”—参数列表【可以没有参数,也可以有多个】
    参数接收函数之外的数据值进入本函数进行运算【找帮手】
    p1, p2—参数【变量名称，不需要定义】接收函数之外的数据值进入本函数
    {}—代码块
    return — 返回函数的执行结果
  3. 函数没有执行结果，不需要出现return xxxx
  4. 函数有执行结果,需要在最后出现return xxxxx
  5. 有没有名称
    有名称的函数
    function test1(){
    alert(“有名称的函数”);
    }
    没有名称的函数【匿名函数】
    window.οnlοad=function(){
    alert(“匿名函数”);}
  6. 有没有参数
  7. 有参数的函数
    function test2(info){
    alert(info);
    }
    在使用的时候需要传递进入参数值
  8. 没有参数的函数
    function test1(){
    alert(“没有参数的函数”);
    }
  9. 有没有结果
  10. 有结果的函数
    function test3(){
    return “有结果”;
    }
  11. 没有结果的函数
    function test3(){

}
例如：`

function test4(num1,num2){
			var res=num1*num2;
			return res;
		}
function test5(){
			var res=test4(100,123);
			alert("res=="+res);
		}

`4.JavaScript 对象
对象也是变量。但是对象包含很多值。
对象包含很多值1.属性 2.方法
对象就是用来描述具有相同属性和方法的变量。
属性----变量 【var】【属性名称:属性值】
方法----函数 【function】 【方法名称:function(){}】
格式:
var 对象名称={属性:属性值,…,
方法名称:函数}；
例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建并使用对象</title>
		<script>
			//创建一个汽车对象
			var car={
				carName:"bmw",
				carcolor:"红色",
				start:function(){
					alert("启动--"+car.carcolor+","+car.carName+"汽车");
				},
				stop:function(){
					alert(this.carcolor+","+this.carName+"汽车停止了");
				}
			};
		function startcar(){
			car.carName="奔驰";
			car.start();
		}
		function stopcar(){
			car.carcolor="蓝色";
			car.stop();
		}
		</script>
	</head>
	<body>
		<input type="button" value="启动" onclick="startcar();"/><br>
		<input type="button" value="停车" onclick="stopcar();"/><br>
	</body>
</html>

在这里插入图片描述
var str=”hello”; 字符串
var num1=123; 数字
var num2=”123”; 字符串
var boo=true; 布尔
function test1(){ }–函数
用javascript表示一个学生
var student={
name:”zhangsan”,
age:23,
addres:”西安”,
sex:true,
xuexi:function(){
alert(“我是学生，我在学习!!!”);
}}
student.name=”lisi”; //修改对象的属性值
student.name; //获取对象的属性值。
student[“name”]
student.xuexi(); //访问学生的学习方法
通过对象的名称就可以访问对象中保存的变量和方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//创建一个学生对象
			var student={
				stuid:1001,
				stuname:"zhangsan",
				stuage:23,
				stuaddress:"西安",
				getInfo:function(){
					return student.stuid+"-"+student.stuname;
				},
				getInfo2:function(id,name){
					student.stuid=id;
					student.stuname=name;
					return student.stuid+"-"+student.stuname;
				}
			};
			
			var person={
				personname:"wangwu",
				mystudent:{
					stuid:1001,
					stuname:"zhangsan",
					getInfo:function(){
						return person.mystudent.stuid+"-"+person.mystudent.stuname;
					}
				}
			}
			
			function  test1(){
				var info1=student.getInfo();
				alert(info1);
			}
			
			function  test2(){
				var info2=student.getInfo2(1002,"lisi");
				alert(info2);
			}
			
			function  test3(){
				var name=person.personname;
				//person.mystudent.stuid=1002;
				//person.mystudent.stuname="lisi";
				var info=person.mystudent.getInfo();
				alert(name+"----"+info);
			}
		</script>
	</head>
	<body>
		<input type="button" value="测试学生对象的getInfo方法" onclick="test1();"/>
		<input type="button" value="测试学生对象的getInfo2方法" onclick="test2();"/>
		<input type="button" value="测试Person对象" onclick="test3();"/>
	</body>
</html>

在这里插入图片描述
请将下面的汽车做成一个对象
在这里插入图片描述

H之一
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript教程_Angular2入门
07-22
资源名称：Javaｓｃｒｉｐｔ教程_Angular2 入门   内容简介： 本文档是Angular2 入门;Angular1.x显然非常成功，那么，为什么要剧烈地转向Angular2? AngularJS当初是提供给设计人员用来快速构建HTML...
javascript_frontend_task
03-18
7. **README.md**：项目说明文档，通常包含项目简介、安装步骤、使用方法和贡献指南等信息。 在JavaScript前端开发中，我们常常会接触到以下关键技术点： 1. **DOM操作**：JavaScript通过Document Object Model ...
JavaScriptJQuery_jQuery简介
JiuMeilove的博客
06-24 2万+
仓库:可以把很多东西放入这个仓库里面,找到东西只需要到仓库里查找到就可以了JavaScript:即library,是一个封装好的特定的集合(方法和函数).从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate,hide,show,比如获取元素等简单理解:就是一个js文件,里面对原生js代码进行了封装,存放到里面,这样我们可以快速高效的使用这些封装好的功能了. 比如jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)这些库都是对原生JavaScr
javaScript简介
最新发布
weixin_69252724的博客
04-16 3969
它是一种直译式的语言, 用来为网页添加各种各样的动态功能不需要编译直接通过浏览器直接运行, 通常javaScript脚本是通过嵌入HTML里来实现功能的。
JavaScript简介
ernester的博客
10-18 2062
计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。翻译器翻译的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同编译器是在代码执行之前进行编译，生成中间代码文件解释器是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器)
js_01JavaScript 简介
socaicaicaicai的博客
02-07 865
JavaScript 简介JavaScript 简介JavaScript 简史JavaScript 实现1.ECMAScript2.文档对象模型（DOM）3. 浏览器对象模型（BOM）总结： JavaScript 简介 JavaScript 简史 JavaScript 名字的由来：布兰登·艾奇计划在1995年2月发布的Netscape Navigator 2 开发LiveScript 的脚本语言——该语言将同时在浏览器和服务器中使用。后来Netscape在与Sun合作之后将其改名为JavaScript。J
javascript 简介_教授javascript第1部分简介
weixin_26717681的博客
08-25 1206
javascript 简介It is additional online learning material for Professor JavaScript YouTube channel, Part 1: Introduction. 它是JavaScript YouTube教授频道的第1部分：简介的其他在线学习材料。 Professor JavaScript is a JavaScript o...
JavaScript引擎简介
My_Soul_的博客
10-13 1193
JavaScript引擎是一个专门处理JavaScript脚本语言的进程虚拟机，通常都是附带在网页浏览器之中。
JavaScript的简介与创建
weixin_57746257的博客
10-28 1799
JavaScript的简介与创建 一、JavaScript的简介 1.JavaScript的是一种轻量级的编程语言 2.JavaScript是一种脚本语言 3.JavaScript是可以插入HTML页面的编程语言 4.JavaScript插入HTML页面后，可由所有的现代浏览器执行 脚本语言是什么? 脚本语言：又称为“扩建的语言”，或者是动态语言，是一种编程语言，用来控制软件应用程序，脚本通常以文本(如：ASCll)保存，只在被调用时进行解释或编译. 脚本语言的优点：编程速度更快,不需要
JavaScript简介及其引入方式
weixin_48184364的博客
07-02 1571
JavaScript简介及其引入方式
00 - JavaScript 简介
JayYuen的博客
10-13 2万+
（一）前言 ​ html/css/js：分别的作用 ​ 好看的皮囊千篇一律，有趣的灵魂万里挑一：内容、样式、动作 ​ 搞事情，简单认识js 事件，事件三要素：事件源、事件类型、事件处理 （二）历史 ​没有js 的功能实现，例：表单验证，用户体验不佳 ​网景公司实现了javaScript，微软在IE 实现了Jscript 在 Web 日益流行的同时，人们对客户端脚本语言的需求也越来越强...
JavaScript基础大总结
热门推荐
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
VML.rar_VML_javascript_javascript 教程
09-22
**一、VML简介** VML是一种基于XML的语言，它允许开发者通过文本方式描述图形元素，如线条、曲线、矩形、圆形等，并且这些图形可以被放大而不会失真，因为它们是基于数学公式而非像素的。在Web开发中，使用VML可以...
javascript_jasmine_testing
05-17
一、Jasmine简介 Jasmine是一款开源的、独立于任何浏览器或JavaScript库的测试框架，其主要目标是提供简洁、易读的API来编写测试用例。它包含一套丰富的断言库和模拟功能，使得测试JavaScript代码变得简单高效。 二...
JavaScript_lesson
02-17
一、JavaScript简介 JavaScript是由Netscape公司的Brendan Eich在1995年发明的，最初被命名为LiveScript。它是一种解释型、弱类型、基于原型的脚本语言，主要用于增强网页的交互性。随着Web技术的发展，JavaScript...
web表格制作
H_zhiyi的博客
08-20 1万+
1.表格的制作 1、表格元素–<table> 表格中的行–<tr> 表格中的列–<td> 表格中的表头–【居中/加粗】 table标记的边框–border table标记的宽度–width table标记的高度–height table标记的水平对齐方式–align table标记的表格背景色–bgcolor table标记的表格边框色–bordercolor table标记的表格中的内容与边框之间的距离–cellpadding table标记的表格中的边框与边框之间的距
HTML标签书写格式大全
H_zhiyi的博客
09-28 3596
一、常用浏览器与浏览器内核 1.常用浏览器 chromo(推荐谷歌) Firefox(火狐) IE浏览器 Opera浏览器 safari浏览器 2.浏览器内核 浏览器内核的主要组成部分： 渲染引擎（layout或engine）和JS引擎 渲染引擎：负责获取网页的内容（HTML.XML.图像等）、整理信息（加入CSS等），已经计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对网页的语法解释会有所不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序
查找字符串中所有某个字符出现的位置
H_zhiyi的博客
11-05 1358
//查找字符串中所有i出现的位置 function search(str){ //index 为 i出现的位置 var index = str.indexOf('i') //num为i出现的次数 var num = 0 while(index !== -1){ console.log(index); num ++ index += 1 index = st
HTML表单元素简介
H_zhiyi的博客
08-21 1124
1表单元素 input 文本框/密码框/单选按钮/复选框… 1.1文本框<input type=”text” name=”username” value=”初始值”></input> 属性type=”text”–表示文本框 属性name=”username”—告诉后台处理程序文本框中输入的数据值 属性value=”初始值”-------初始值 1.2密码框<input type=”password” name=”password” value=”初始密码”></
Html+Css+Javascript_web开发基础教程
1. Javascript简介：Javascript是一种脚本语言，用于添加交互功能到网页中。 2. Javascript的基本语法：变量、数据类型、运算符、控制结构、函数等。 3. Javascript的事件处理：了解事件的概念，学会使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值