js入门（第一部分）_js实现输入框自动补充引号的方法-优快云博客

本文链接：https://blog.youkuaiyun.com/adminsir0/article/details/126044128

本文介绍了JavaScript的基础作用，如动态内容修改、数据验证、用户交互和本地存储。详细讲解了JS的ECMA语法、DOM和BOM操作，以及引入方式（行内、内嵌、外链），输出方法（alert、console、document.write），变量声明、命名规则和数据类型转换。此外，还涵盖了运算符、window方法、以及部分关键概念如三元表达式和window对象的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js入门（第一部分）

一、js的作用

1、动态操作标签的内容
2、动态操作标签
3、数据验证，减轻服务器的压力
4、用户通过事件与浏览器交互
5、提供了本地存储来记录一些临时信息

二、js的内容

1、ECMAJavaScript：js基础语法
2、DOM操作:Document Object Model 文档对象模型
3、BOM操作:Broswer Object Model 浏览器对象模型

三、js引入方式

1、行内式

		<body>
		<div></div>
		<!-- 1、行内式 -->
		<p onclick="alert('行内式')">你好</p>	
</body>

2、内嵌


 <body>
		<div></div>
		<!-- 禁止外链和内嵌同时写入，内嵌会被覆盖 -->
		<!-- 3、内嵌式 -->
		<script>
			alert("内嵌式");			
		</script>
</body>

3、外链

<body>
   	<div></div>		
   	<!-- 2、外链式 -->		
   	<script src="./js/test.js"></script>
</body>

test.js

alert("外链式");

五、js输出方式

1、警告输出：alert(“”)

<body>
  	<script>
  		alert("弹窗警告");
  	</script>
  </body>

2、控制台输出:console.log(“”) 不能解析标签

<body>
  	<script>
  		// 控制台输出 clog快捷键
  		console.log("控制台日志输出");
  		console.info("信息输出");
  		console.error("错误信息输出");
  		console.warn("警告");
  	</script>
  </body>

3、文档输出：document.write(“”) 可以解析标签

<body>
  	<script>
  		// 文档输出 dw快捷键
  		document.write("奇酷教育");
  		document.write("<h1 class='active'>奇酷教育</h1>");
  		// js中的字符换行都要通过+拼接
  		// 反引号`可以不用拼接
  		document.write("<table border=''cellspacing = ''cellpadding = '' >" +
  			"<tr><th>Header</th></tr>" +
  			"<tr><td>Data</td></tr>" +
  			"</table>");
  		document.write(`<table border="" cellspacing="" cellpadding="">
  		<tr><th>Header</th></tr>
  		<tr><td>Data</td></tr>
  	</table>`);
  	</script>
  </body>

注意:

js字符串输出可以采用双引号或反引号，双引号换行需要加号拼接
js遇到双引号嵌套的情况，需要使用外双内单

六、变量的声明赋值

<body>
	<script>
		//变量声明未赋值
			var a;
			console.log(a);  //undefined,未定义
			//变量未声明，报错代码会阻塞后边代码的执行
			// console.log(c);  //报错,c is not defined
			//变量赋值
			a=1;
			console.log(a); //1
			//变量声明并赋值,也叫变量的初始化
			var b=2;
			console.log(b);   //2
			  b=6;    //把原来的2覆盖掉
			  console.log(b);  //6
			  b=8;    //把6覆盖了
			console.log(b);  //8
			
			//变量输出不能加双引号
			var m=6,n=8; //同时声明了多个变量
			console.log(m,n);
			// var d;
			// var e=16
			var d,e=16;
			console.log(d); //undefined
	</script>
</body>

七、变量命名规则

由字母、数字、下划线、$组成
不以数字开头、不能是关键字和保留字

八、js数据类型及其转换

js数据类型

1、基本数据类型:number数值 string字符串 boolean布尔 null空值 undefined未定义
2、引用数据类型: Array数组 function函数 object对象

数据类型的转换

	<body>
		<script>
			//1、其他类型转换为字符串
			  // 加号拼接
			  var a=13;
			  a=a+"";
			  console.log(a);  //"13"
			  console.log(typeof(a)); //string
			  //String()
			  console.log(String(16));  //16
			  var b=String(16);
			  console.log(typeof(b));  //string
			  console.log(typeof(true+"")); //string
			//2、其他类型转换为数值
			  var str="11.5";
			  // *1
			  console.log(str*1);
			  console.log(typeof(str*1)); //number
			  console.log(typeof("aaaa"*1)); //number
			  //not a number,不是一个数值
			  console.log("aaaa"*1);   //NAN，not a number
			  console.log(true*1);    //1
			  console.log(false*1);    //0
			  //Number()
			  console.log(typeof(Number("123"))); //number
			  console.log(Number("123")); //123
			  console.log(typeof(Number("false"))); //number
			  console.log(Number("false")); //NaN
			  console.log(Number(false)); //0
			  //parseInt() 转换为整型，将小数位截掉，不是四舍侮辱
			  console.log(parseInt(11.99999));   //11
			  console.log(parseInt(true));   //NAN
			  console.log(parseInt("aaaa"));   //NAN
			  console.log(parseInt("123aaa"));   //123
			  console.log(parseInt("1a2a3"));   //1
			  console.log(parseInt("a123"));   //NaN
			  //parseFloat() 转换为浮点型
			  console.log(parseFloat("11.3333"));  //11.3333
			  console.log(parseFloat("11.3333aaa"));  //11.3333
			  console.log(parseFloat("11"));  //11
			//3、其他类型转换为布尔
			//!!
			   console.log(!!1); //true
			   console.log(!!8); //true
			   console.log(!!0); //false
			   console.log(!!-3); //true
			   console.log(!!"aa"); //true
			   console.log(!!""); //false
			   //Boolean
			   console.log(Boolean("aa")); //true
		</script>

总结

1、其他类型–》数值
*1
Number()
parseInt() 整型，不是四舍五入
parseFloat() 浮点型，小数
2、其他类型—》字符串
加号拼接
String()
3、其他类型—》布尔
！！
Boolean()

九、运算符

1、算术运算符:+ - * / %(取余) ++ – += -= *= /=
i++， ++i单独使用没区别，如果被使用就近原则

		<script>
   	  // 1、算术运算符:+ -  * / % ++  --
   	  var a=12;
   	  var b=3;
   	  var c=a-b;
   	  console.log(c); //9
   	  console.log(a+b);  //15
   	  //数值与字符串相加，结果是字符串
   	  console.log(a+"6");  //126
   	  console.log(a+"6"*1);  //18
   	  console.log(a*b);  //36
   	  console.log(a*"3");  //36
   	  //除
   	  console.log(a/b); //4
   	  console.log(a/10); //1.2
   	  //取余
   	  console.log(a%10); //2
   	  console.log(1%10); //1
   	  //8421,拆分出每一位数
   	  //8421%10=842....1
   	  //842%10=84....2
   	  //84%10=8....4
   	  //8%10=0....8
   	  //8421/10=842.1
   	  var res=8421;
   	  var gewei=res%10;
   	  var shiwei=parseInt(res/10)%10;
   	  var baiwei=parseInt(res/100)%10;
   	  var qianwei=parseInt(res/1000)%10;
   	  console.log(gewei,shiwei,baiwei,qianwei);
   	</script>

2、关系运算符：> >= < <= ==(只比较结果) === (同时比较类型和结果) !=

	<body>
  	<script>
  		// 比较运算符:> >= < <= ==  === !=
  		//比较运算符的结果一定是boolean
  		var a=5;
  		var b=3;
  		console.log(a>b); //true
  		console.log(a<5); //false
  		console.log(a<=5); //true
  		console.log(3>=2); //true
  		console.log(6==6); //true
  		//等于:只比较结果，不看类型
  		console.log(6=="6"); //true
  		console.log(5>"6"); //false
  		//全等于:同时比较结果和类型
  		console.log(6===6); //true
  		console.log(6==="6"); //false
  		
  		console.log(true==1); //true
  		console.log(false==0); //true
  		console.log(false===0); //false
  		
  		console.log(undefined==null); //true
  		console.log(undefined===null); //false
  		
  		console.log(3!=3); //false
  		console.log(3==3); //true
  		console.log(6+3>8-2); //true
  		
  		var  a=6;
  		// a=a+1;==>a++;
  		// a=a+6; ===>a+=6;
  		// a=a/6;====>a/=6;
  		//a=a*6
  		a*=6;
  		console.log(a); //36
  		
  		
  	</script>

3、逻辑运算符：！ && ||

	<body>
  	<script>
  		/* 逻辑运算符: &&且  ||或  !非
  		 逻辑运算符的前后
  		    可以是boolean值
  			可以是关系表达式 */
  			
  		//两边都为true，结果为true，其他为false
  		console.log(true&&false); //false
  		console.log(true&&true); //true
  		console.log(false&&false); //false
  		//两边都是false，结果为false，其他都为true
  		console.log(true||false);  //true
  		console.log(true||true);  //true
  		console.log(false||false);  //false
  		//非真既假，非假既真
  		console.log(!true); //false
  		console.log(!false); //true
  		        // true||false
  		console.log(6>5||5>6);  //true
  		             // true&&true
  		console.log(6+8>3*2&&6/2+6<18);  //true
  		              //  !true&&true||true 
  					   // false&&true ||true
  					   // false||true
  		console.log(!2+3*3>8-6&&8>3+4||2==2); //true
  		
  		// 运算符优先级:  比较运算符>!>&&>||>赋值运算符=
  	</script>

4、三目运算符: var res=关系表达式?值1：值2

<body>
  	<script>
  		//三元表达式的语法: var res=关系表达式?值1:值2
  		 var score=prompt("请输入成绩");
  		 var a=score>90?"ipad":"闭门思过";
  		 console.log(a);  //ipad
  		 var b=score==100?"ipad":"闭门思过";
  		 console.log(b);  //闭门思过 
  		  
  	
  	</script>
</body>

十、window的常用方法

alert(“”) 弹出警告
var res=confirm（“”）确认对话框
var ff=promt(“输入提示”，[“默认值”]) 用户输入框

	<body>
  	<script>
  		//window,js的祖先
  		//一切变量、对象、方法的未知来源，都是来源于window
  		//凡window出生的都可以省略window
  		//方法谁点出来就是谁所产生
  		
  		var j=1;
  		m=10;
  		console.log(m);
  		console.log(window.m);  //10
  		window.alert("11"); 
  		//确认对话框
  		var flag=window.confirm("确认删除吗?");
  		console.log(flag); 
  		//用户输入框，点取消结果是null
  		var age=window.prompt("输入提示","默认值");
  		console.log(age);  
  		
  	</script>
  </body>