2.3 javascript

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

2.3 javascript

2.3 javascript

  • javascript简图
    在这里插入图片描述

1.引入方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			/* 
			 javascript引入方式
			 1.使用script标签                                                调试时使用
			 2.使用script标签 通过src导入 (导入js文件的script标签 标签体无效)    调试完 js放入文件
			 3.在元素内 直接编写javascript代码                                 不建议使用
			 */
			console.log(123);
		</script>
		<script src="./js/myjs.js"></script>
	</head>
	<body>
		<input type="button" value="点我" onclick="javascript:console.log(333)" />
		
	</body>
</html>

2.基本语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//单行注释
			/*
			  多行注释
			*/
			/* 
			声明变量   弱类型
			 声明时 不需要指明类型 赋值时 根据值的类型改变
			 */
			var test;
			test = 10;
			test = "abc";
			
			var myval1 = 10;
			myval1 = 10.01;
			myval1 = "str";
			myval1 = false;
			console.log(myval1);
			console.log(typeof myval1);
			/* 
			 数字  布尔值   蓝色
			 字符串        黑色
			 undefined    灰色

			 数字类型
			 bol类型
			 字符串类型
			 undefined类型
			 
			 Object 类型
			 function函数类型
			 null    对象初始值 
			 */
			
			var myval2;

			myval2 ="2abc0abc15";//NaN  not a number   NaN数字类型中的特殊值 不是数字
			myval2 ="ab10.15";
			var myval3 = parseInt(myval2);//从左到右解析 能解析出来的部分输出 解析不出来 舍去
			//尽最大可能不报错
			
			console.log(typeof myval3);
			console.log(myval3);
			
			var myval4 = parseFloat(myval2);
			
			console.log(typeof myval4);
			console.log(myval4);
			
			var myval5 = 10;
			
			console.log(typeof myval5.toString());
			console.log(myval5.toString());
			
		</script>
	</head>
	<body>
	</body>
</html>

3.运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var temp1 = 0.1;
			var temp2 = 0.2;
			//js丢失精度
			//toFixed 按位数取小数部分 并转成字符串
			console.log(parseFloat((temp1+temp2).toFixed(1)) );
			console.log("abc"+123);
			var temp3 = 1;
			console.log(temp3++);/* 前  运算  取值 
			                        后  取值  运算*/
			var val1 = 2;
			var val2 = true;
			//js比较时做内置转换   字符串 数字
			//                   bol值  数字  0  false  1 true
			// ==  比较值       ===  严格相等  比较值和类型
			console.log(val1==val2);
			console.log(val1===val2);
			//代码压缩   
			// if(!0){
			// }
			var bol1 = false;
			var bol2 = true;
			console.log(bol1&&bol2);	
		</script>
	</head>
	<body>
	</body>
</html>

4. 条件语句循环

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/* var myscore = parseInt(prompt("请输入数字")); */
			//60以下  不及格
			//60-80   良
			//80以上   优
/* 			console.log(myscore);
			if(myscore<60){
				console.log("不及格");
			}else if(myscore<=80){
				console.log("良");
			}else{
				console.log("优秀");
			} */
			
/* 			var mygrage = prompt("请输入级别");
			switch (mygrage){
				case 'a':console.log("工资500");
					break;
				case 'b':console.log("工资1500");
					break;
				case 'c':console.log("工资2500");
					break;
				default:console.log("输入有误");
					break;
			} */
			var myarr = [1,2,3,4,5,6];
/* 			for(var i = 0;i<myarr.length;i++){
				console.log(myarr[i]);
			} */
/* 			
			for(var x in myarr){
				console.log(myarr[x]);
			} */
			
			/* 
			for    有限次数   
			while  不定次数
			 */
			/*
			练习1   运算符
			  1549
			  
			  个位+十位+百位+千位 
			  结果19
			
			  1-7数字
			练习2    条件语句
			  12345   输出工作日
			  67      输出 周末
			  其它     输入有误
			
			练习3    循环语句
			  乘法口诀表  输出到页面
			  把格式对齐
			*/			
			document.write("<h1>abc</h1>&ensp;abc");
		</script>
	</head>
	<body>
	</body>
</html>

5. 函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/*
			
			系统函数
				parseInt()       字符串转整型
				parseFloat()     字符串转浮点型
				isNaN()          是否不是数字
				eval()           转换运行字符串
			
			自定义函数
			
			修饰符  返回值类型   方法名 （参数类型  形参,....）{
				执行的代码
			}
			function 函数名 (参数列表){
				执行的代码
				如果需要返回值 
				return xxx;
			}
			*/
			//isNaN 是否不是数字
			//取反   是不是数字
			console.log(!isNaN("10"));
			var temp = "1+2*3";
			console.log(eval(temp));
			//加法运算
			function mySum(a,b){
				//console.log(a+b);
				
				return a+b;
			}
			var getTotal = mySum(1,3);
			console.log(getTotal);
			var myDiff = function (a,b){
				return a-b;
			}
			console.log(myDiff(3,1));
			console.log(typeof mySum);
			//变量作用域
			//var   全局
			//      函数内
			var temp2 = 20;
			function mytest(){
				temp2 = 10;//定义全局变量
				console.log("函数内读取"+temp2);
			}
			mytest();
			console.log("函数外读取"+temp2);
			//做用户交互效果
			//通过用户操作 鼠标操作  键盘操作   触发自定义函数
		</script>
	</head>
	<body>
	</body>
</html>

6.事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.mydiv{
				border: 1px solid black;
				width: 100px;
				height: 100px;
			}
			
			
		</style>
		<script>
			/* 
			通过js定义交互效果： 
			元素上 加指定的事件  触发自定义函数
			οnclick="mytest()" 
			 document.getElementById("mydiv")  通过id获取元素
			 元素.属性                          获取或修改元素的内容
			 元素.属性        取值
			 元素.属性 = xxx  赋值
			 
			 .style.xxx  js中样式属性 css属性不完全一致
			 .value      表单元素的值
			 .innerHTML  双标签中的内容
			 .src        图片地址
			 
			 onclick                 鼠标点击
			 onmouseover             鼠标移入
			 onmouserout             鼠标移出
			 onfocus                 获取焦点
			 onblur                  失去焦点
			 onchage                 内容改变
			 onload                  页面加载结束后执行
			 onkeyup                 键盘弹起
			 onsubmit                表单提交   用在from上   return bol值  通过函数返回
			 */
			function mytest(){
				console.log("被点击了");
			}
			
			function changeBGC(mycolor,myobj){
				//如果触发的元素 与修改的元素相同  可以传入this 代替获取的元素 简化代码
				
				console.log(myobj);
				myobj.style.backgroundColor = mycolor;
			}
/* 			function changeBGC2(){
				document.getElementById("mydiv").style.backgroundColor = "white";
			} */
			
			function myCopy(){
				var temp = document.getElementById("text1").value;
				document.getElementById("text2").value = temp;
			}
			
			function changeTextColor(mycolor){
				document.getElementById("text1").style.color = mycolor;
			}

			function changeTextColor2(mycolor){
				document.getElementById("text1").style.color = mycolor;
				document.getElementById("text2").value = document.getElementById("text1").value;
			}
			function changeTitle(myObj){
				var temp = myObj.value;
				console.log(temp);
				document.getElementById("mytitle").innerHTML = temp;
			}
			function getSelVal(){
				//select的value 被选中的option的值
		console.log(document.getElementById("mysel").value) ;
			}
		</script>
	</head>
	<body>
		<input type="button" value="点我" onclick="mytest()" />
		<div id="mydiv" class="mydiv" onclick="mytest()" onmouseover="changeBGC('red',this)" onmouseout="changeBGC('white',this)">
			testdiv
		</div>
		<hr />
		<input id="text1" type="text" value="默认值" onfocus="changeTextColor('lightcoral')" onblur="changeTextColor2('black')"/>
		<input type="button" value="复制"  onclick="myCopy()"/>
		<input id="text2" type="text" />
		<hr />
		<input type="text" value="默认值" onblur="changeTitle(this)"/>
		<div id="mytitle">test</div>
		<hr />
		<select id="mysel" onchange="getSelVal()">
			<option value="1">北京</option>
			<option value="2">上海</option>
			<option value="3">深圳</option>
		</select>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function myInit(){
				document.getElementById("text1").value ="abc123";
			}	
		</script>
	</head>
	<body onload="myInit()">
		<input id="text1" type="text" />
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span img{
				vertical-align: middle;
				display: none;
			}
			
			
		</style>
		<script>
			/* 写功能 */
/* 			function getTextVal(event){
				console.log(event.keyCode);
				console.log( document.getElementById("text1").value);
			}
			 */
			/* var myphone ="14444444477"; */
			var myreg = /^1(3|4|5|7|8)\d{9}$/;
			/* console.log(myreg.test(myphone)) ; */
			
			//手机号验证
			function regMyPhone(){
				var currentVal = document.getElementById("text1").value;
				document.getElementById("phoneImg").style.display = "inline";
				console.log(document.getElementById("phoneImg").src);
				console.log(document.getElementById("phoneImg").id);
				var flag = false;
				if(myreg.test(currentVal)){
					//console.log("格式正确");
					/* document.getElementById("regPhongSpan").innerHTML ="格式正确";
					document.getElementById("regPhongSpan").style.color = "seagreen"; */
					document.getElementById("phoneImg").src = "img/ok.png";
					flag = true;
				}else{
					//console.log("格式错误");
					/* document.getElementById("regPhongSpan").innerHTML ="格式错误";
					document.getElementById("regPhongSpan").style.color = "crimson"; */
					document.getElementById("phoneImg").src = "img/wrong.png";
				}
				return flag;
			}
			//邮箱验证
			function regMyMail(){
				return true;
			}
			//返回总结果
			function mysubmit(){
				//把每个验证的记过并起来
				return regMyPhone()&& regMyMail();
			}	
		</script>
	</head>
	<body>
		<hr />
			                                       <!-- onsubmit写法较特殊  return bol值 决定表单是否可以提交   -->
		<form action="1js引入方式.html" method="get" onsubmit="return mysubmit()">
			<input id="text1" type="text" onkeyup="regMyPhone()"/><span id="regPhongSpan"><img id="phoneImg" src="img/ok.png" /></span>
			<br />
			<input id="text2" type="text" onkeyup="regMyMail()"/>
			
			<br />
			<input type="submit" />
		</form>
	</body>
</html>
贾国鹏
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
《深入理解JavaScript》——2.3　JavaScript有用吗
weixin_34186950的博客
05-02 101
本节书摘来自异步社区《深入理解JavaScript》一书中的第2章，第2.3节，作者： 【美】AxelRauschmayer（罗彻麦尔）译者： 王玉林 , 杜欢 , 庄婷婷 , 章子鹏，更多章节内容可以访问云栖社区“异步社区”公众号查看。 2.3　JavaScript有用吗 如果它不能让你写出你想要的程序，那么哪怕它是世界上最漂亮的程序语言都没有任何用处...
非零基础自学前端最后一遍 二 JavaScript基础 2 JavaScript的基本语法 2.3 JavaScript交互方式和调试工具补充
谢谢你们的关注
03-12 32
非零基础自学前端最后一遍 二 JavaScript基础 2 JavaScript的基本语法 2.3 JavaScript交互方式和调试工具补充
2.3 javaScript 布尔类型
hanxin的专栏
04-10 153
[code="java"] if (navigator.cookieEnabled) { alert("浏览器允许使用Cookie"); } else { alert("浏览器禁用Cookie"); } [/code]
Javascript学习笔记2.3 Javascript与DOM实现动态表格效果
weixin_30695195的博客
12-25 74
略 转载于:https://www.cnblogs.com/dreamingbaobei/p/5075711.html
2.3、JavaScript 数据类型 - 数字类型
_
03-07 5983
在 JavaScript 中，数字有两种类型：（1）常规数字类型，以 64 位的格式 IEEE-754 存储，也被称为“双精度浮点数”。这也是我们绝大多数时候使用的数字。（2）BigInt 数字，用于表示任意长度的整数。有时会需要它们，因为常规数字不能安全地超过 2^53 或小于 -2^53。
javaScript简介
werdery的博客
02-13 319
javaScript简介1.javaScript的作用2.javascript把数据显示到html页面3.ajax的介绍 1.javaScript的作用 对于一个前端页面，html只能做到数据的整理于显示，而javaScript是用来处理逻辑判断等问题的。 2.javascript把数据显示到html页面 首先在html中加入id为test的段落，然后在javascript中通过document...
JavaScript第二章2.3 数据类型的转换
2302_81210008的博客
03-23 222
转换时，代表空或者否定的值（空字符串，数字0，NAN，null和unfin）会转换成false。其他的值就会转换为ture。
JavaScript简介
qq_52499745的博客
07-20 1013
JavaScript简介
JavaScript
weixin_72222809的博客
05-27 670
一个对自己学习和生活的记录（JavaScript）
javascript-dom-exercises-2.3
03-18
在这个“javascript-dom-exercises-2.3”项目中，我们聚焦于DOM操作的进阶技巧和实践。这个练习集可能是为了帮助开发者巩固对JavaScript DOM API的理解，特别是如何使用它来修改、添加和删除页面元素。 1. **DOM...
2023年JavaScript学习笔记.pdf
03-09
##### 2.3 JavaScript注释 注释用于在代码中添加解释性文字，它们不会被执行。 - **单行注释**：使用`//` ```javascript // 这是一条单行注释 ``` - **多行注释**：使用`/* ... */` ```javascript /* 这是 ...
picoh:另一个JavaScript前端微框架-缩小并压缩到2.3KB左右
05-28
Picoh是我对JavaScript前端微框架的支持，它提供事件处理，DOM查询/操作，XMLHTTP请求和一些实用程序方法。 重点是精简代码占用空间-缩小并压缩后，所有文件的大小都在2.3KB左右。 所有方法都在window.$ / window....
Javascript学习笔记-学JS的一手教程
05-07
#### 2.3 JavaScript的保留关键字 JavaScript有一些预定义的保留关键字，例如`var`、`function`、`if`、`else`等，这些关键字不能作为变量名或函数名。 #### 2.4 JavaScript的基本语法 - **基本数据类型和常量**：...
2.3
02-13
它构成了互联网的基础，使得信息能够以结构化的方式展示并交互。"2.3"可能指的是某个课程、教程或者..."2.3"可能是一个阶段性的学习目标，涵盖了一些基础概念和进阶特性。通过实践和项目，可以加深对HTML的理解和应用。
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 1736
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 408
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
Module “console“ has been externalized for browser compatibility.
Alvin的博客
09-07 246
在 Vue 3.5.3 中使用 Vite 作为构建工具时，如果你尝试直接从。模块外部化了，这意味着它不会在客户端环境中暴露。去除导入 error 函数的代码。函数，会遇到一个错误，提示。这是因为 Vite 默认将。Vue 3.5.3 中。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 190
实现中国地图各省数据案例
Vue接入高德地图并实现基本的路线规划功能
最新发布
黄团团的个人博客
09-11 125
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
JavaScript语言特点与变量详解
2.3 **使用`typeof`检查类型**：`typeof`运算符可以用来检测变量的数据类型。它返回一个字符串，表示变量的类型。例如： ```javascript var sTemp = "teststring"; alert(typeof sTemp); // 输出 "string" alert...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值