JS初识2

最新推荐文章于 2024-07-22 15:13:59 发布
最新推荐文章于 2024-07-22 15:13:59 发布
阅读量51 收藏
点赞数
文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49344258/article/details/108344652
版权

JavaScript_2

https://www.w3school.com.cn/js/index.asp

1.JavaScript 运算符

1.1JavaScript 使用(=)赋值运算符。

JavaScript 使用算数运算符（+  -  *  /  %  ++  --）来计算值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>变量-运算符-表达式</title>
		<script>
			function  suanshu(){
				//声明变量
				var num1=10;
				var num2=3;
				document.getElementById("h1").innerHTML=num1+"+"+num2+"="+(num1+num2);
				document.getElementById("h2").innerHTML=num1+"-"+num2+"="+(num1-num2);
				document.getElementById("h3").innerHTML=num1+"*"+num2+"="+(num1*num2);
				document.getElementById("h4").innerHTML=num1+"/"+num2+"="+(num1/num2);
				document.getElementById("h5").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"  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>

1.2.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>

2.2JavaScript 使用(||   &&  ! )逻辑运算符运算符。

|| [逻辑或]   true  ||  false  -->  true

false  ||  true   -->  true

true  ||  true   -->  true

false  ||  false  -->  false

只要有true结果就是true

&& [逻辑与]  true  &&  false  -->  false 

false   &&  true  -->  false 

false  &&  false  -->  false

true  &&  true   -->  true

只要有false结果就是false

! [取反]   !true--->false

         !false----true

逻辑运算符的运算值和运算结果一定是布尔值【true/false】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试逻辑运算符</title>
		<script>
			测试逻辑运算符
			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>

比较与逻辑运算符通常都是用来做判断的。

2.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

3.JavaScript 函数

JavaScript 函数是被设计为执行特定任务的代码块【{}】。

实例:

function myFunction(p1, p2) {

    return p1 * p2;              // 该函数返回 p1 和 p2 的乘积

}

JavaScript 函数通过 function 关键词进行定义.

myFunction--函数名称

“()”---参数列表【可以没有参数,也可以有多个】

    参数接收函数之外的数据值进入本函数进行运算【找帮手】

p1, p2---参数【变量名称，不需要定义】接收函数之外的数据值进入本函数

{}---代码块

return --- 返回函数的执行结果

  1. 函数没有执行结果，不需要出现return xxxx
  2. 函数有执行结果,需要在最后出现return xxxxx
  3. 有没有名称

  4. 有名称的函数

    function test1(){

                      alert("有名称的函数");

    }

    没有名称的函数【匿名函数】

    window.οnlοad=function(){

                                       alert("匿名函数");}

  5. 有没有参数
  6. 有参数的函数

  7.          function test2(info){

                                       alert(info);

                              }

        在使用的时候需要传递进入参数值

  8. 没有参数的函数

  9. function test1(){

                                       alert(“没有参数的函数”);

                              }

  10. 有没有结果
  11. 有结果的函数

  12.          function test3(){

                                       return "有结果";

                              }

  13. 没有结果的函数

function test3(){

                         

}

例如：

<input type="button" value="测试的函数" οnclick="test5();" /><br>

 

         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>

 

270年前
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS初识 javascript
weixin_55765992的博客
08-05 147
初识javascript 引导 主要内容： 学习目标： 节数 知识点 要求 第一节（js的前世今生） js简介 了解 第二节（js的语法结构） 页面引入js的几种方式 了解 js输出的几种方式 了解 js的语法规则 了解 第三节（Javascript名词解释） 数字字面量 掌握 字符串字面量 掌握 常量 理解 第四节（Javascript变量命名规则(重点)） 声明变量 掌握 变量提升 掌握 变量的命名规则 了解 第五节（Javascri
初识JavaScript——JS
孙宇航的博客
04-10 1624
目录 1.认识JS 1.1JavaScript是什么 1.2JS的作用 1.3 HTML/CSS/JS的关系 1.4 浏览器执行JS 1.5JS的组成 1.6JS书写位置 1.7JS注释 1.8JS输入输出语句 2.变量 2.1变量的理解和储存 2.2变量的使用 2.3变量语法拓展 2.4声明变量的特殊情况 2.5变量的命名规范 1.认识JS 1.1JavaScript是什么 1.JS是一种 运行在客户端的脚本语言。 2.脚本语言不需要编译，在运行过程中有J.
初识JavaScript
程序员柒的博客
07-20 430
这次写一篇对于JavaScript的简介，我们知道的编程语言有很多种，比如Java、C++、Python等等，每种语言都有他独特的地方，每种编程语言都具有共同的初心，直白点说就是人与计算机进行沟通的语言。如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力。以下是本篇文章正文内容浏览器分成两部分渲染引擎和JS引擎渲染引擎用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink老版本的webkitJS引擎也称为JS解释器。...
JS知识梳理1
m0_60038162的博客
08-30 666
主要是平时常见的一些方法，通过及时的查询和记录，有利于第二次翻阅巩固知识点
JS知识点6
xsc2022的博客
05-25 261
1.事件传递 阻止事件传递 event.stopPropagation() 阻止默认事件 event.preventDefault() 2.鼠标事件 mouseover 鼠标移入 mouseout 鼠标移出 mousedown 鼠标按下 mouse 鼠标弹起 mousemove 鼠标移动 click 单击 dblclick双击 3.键盘事件 event.keyCode 键对应数字编码 event.key 键盘的名称 event.which 等于keyCode 4.表单事件
初识Javascript小结
10-23
本文是一个学习javascript的新手总结的一些关于javascript的方法，有需要的小伙伴可以参考下。
初识JavaScript.md
09-02
对JavaScript的简单认识
前端开发 JavaScript第一章 初识JS
10-21
诗仙女炸鱼塘--js
JavaScript初识及基本语法详解
03-23
JavaScript是一种基于对象和事件驱动的脚本语言，通常用于Web前端开发。它最初由Netscape的Brendan Eich于1995年设计，目的是为了在浏览器中实现动态交互效果。后来，ECMAScript标准成为了JavaScript的基础，现在...
JavaScript初识.rar
06-27
2. **控制结构** - **条件语句**：如`if...else`用于根据条件执行不同代码块。 - **循环**：包括`for`、`while`和`do...while`，用于重复执行代码块。 - **开关语句**：`switch...case`结构允许根据不同的情况...
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 235
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
VUE中的重点*
最新发布
qq_61132537的博客
07-22 377
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
jquery-选择器常见用法
随笔
07-18 199
jquery-选择器，对象下有多个子元素时如何选择
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 925
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
vue3 vxe-grid修改currentPage，查询数据的时候，从第一页开始查询
jwbabc的专栏
07-18 238
vxe-grid查询数据的时候，从第一页开始查询，并且清空选中，清空复选框状态等，查询数据查询。
web前端 React 框架面试200题（三）
柯晓楠
07-21 399
纯组件是可以编写的最简单和最快的组件。它们可以替换任何只有 render() 的组件。这些组件增强了代码的简单性和应用程序的性能。Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性在JSX表达式中，一个开始标签(比如)和一个关闭标签(比如)之间的内容会作为一个特殊的属性props.children被自动传递给包含着它的组件。
HOW - SVG 图标组件封装（Lucide React）
weixin_58540586的博客
07-18 1204
在中我们介绍过 “动态 Fetch CDN SVG 图标”，这种在开发者将需要用到 图标 依次上传到 CDN 再在项目通过请求引入使用的场景。但其实，更常见的做法还是统一维护一组 SVG 图标，然后将其封装成组件，直接在项目中通过 Import 的形式使用。
VUE项目中使用crypto.getRandomValues代替Math.Random
07-18 32
由于 Math.random() 的底层算法是公开的（xorshift128+ 算法），V8 源码可见，因此，是可以使用其他语言模拟的，这就导致，如果攻击者知道了当前随机生成器的状态，那就可以知道缓存中的所有随机数，那就很容易匹配与破解。为了保证足够的性能，Math.random()随机数并不是实时生成的，而是直接生成一组随机数（64个），并放在缓存中，当这一组随机数取完之后再重新生成一批，放在缓存中。crypto这个对象在目前的浏览器中大多都默认加载了，所以可以使用公共函数方式来引用和使用。
javaScrip的学习（一）
weixin_65450681的博客
07-19 1254
这篇文章让我们简单来了解一下js，那么什么是js?JavaScript（简称JS）是一种高级编程语言，主要用于为网页添加交互功能。它可以嵌入到HTML页面中，通过对DOM（文档对象模型）的操作来实现动态效果和用户交互。JavaScript由Netscape公司的Brendan Eich于1995年创造，最初是为了增强HTML页面的功能性。随着时间的推移，JavaScript逐渐演变成一种通用的编程语言，可以在浏览器以外的环境中运行，例如服务器端的Node.js。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值