js基本知识

已于 2022-06-07 13:59:52 修改
阅读量177 收藏
点赞数
分类专栏： 前端 文章标签： js
于 2021-06-01 10:53:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/awei66/article/details/117437858
版权 
JS
	--1,可以出现的位置
		行内js: <a onclick="alert(123);"> 点击 </a>
		内部js:在网页的内部嵌入js代码.可以使用script标签(通常出现在head标签里).
		外部js:单独的js文件,可以直接引入网页中
	--2,基础语法:
		--变量
			--定义:var 变量名=变量值
			--类型:number/string/boolean/null/undefined
			--局部变量(在函数里的) / 成员变量(不在函数里的)
		--运算符
			+-*/ ++ -- == !=  === !== += -= *= /= 
			? :  typeof
		--语句
			--if  / if...else /if else if...
			--switch...case
			--for 
			--while
			--do...while
		--数组
			--定义数组: var a = [];  a = new Array();
			--遍历数组: for(var i = 0;i<a.length;i++){ alert(a[i]); }
			--for...in遍历: for(var i in a){ alert(a[i]); }
		--函数	
			--无参的函数 /  含参的函数  / 有返回值的函数
			--语法:function 函数名(参数列表){ 函数体 }
	--3,测试运算符:
			<!DOCTYPE html>
			<html>
				<head>
					<meta charset="utf-8">
					<title>js基础语法</title>
					
					<!-- 内部js: 在网页中嵌套一段js代码 -->
					<script>
						//js的运算符  
						
							//6,js里的特殊运算符 typeof
						var j=10;
						alert(typeof j);//number/string/boolean...
						alert(typeof j + "10");//number10
						alert(typeof j + 10);//number10 ,+用来拼串 
						alert(j + 10);//20 ,+用来求和
							
							//5,三元运算符 ? :
						// alert(1==0 ? 10 : 5);
							//求两个数里的大值
							//prompt()默认收到的数据都是string类型,把字符串转整数的函数----parseInt()
						var g = parseInt( prompt("请输入a的值:")  ); //接受浏览器输入的数据
						var h = parseInt( prompt("请输入b的值:")  );
						alert( g > h ? g : h );
							//求三个数里的大值
						var i = parseInt( prompt("请输入c的值:") ) ;
						var max = g > h ? (g > i ? g : i ) : ( h > i ? h : i );
						alert("三个数里的大值: "+max);
						
							//4,比较运算符 == !=  === !==
						alert(1==1);
						alert(1=="1");//比较值
						alert(1==="1");//比较值和类型
						alert(1!=1);
							
							//3,复合赋值运算符	+= -+ *= /=
						var f = 10;
						f = f + 5 ; //
						f += 5; //简写
						alert(f);
							
							//2,自增自减++ --
						var d =1;
						alert(d++);//符号在后,先使用再变化
						alert(++d);//符号在前,先变化再使用 
						var e = 2;
						alert(++e+d+e+++e);//++优先级高于+ 
							
							//1,基础运算符
						var b = 1.9;
						var c = 2.1;
						alert(b+c);
						alert(b-c);
						alert(b*c);
						alert(b/c);
						
						// js基本数据类型
						var a = 10; /* 定义变量 */
						a = 1.4; /* 修改变量 */
						a = true;
						a = "jack";
						alert(a);
						
					</script>
				</head>
				<body>
					<!-- 行内js -->
					<a onclick="alert(1);">js的行内写法</a>
					
				</body>
			</html>

	--4,js语句:
		--包括:分支结构/循环结构
		--代码
			<!DOCTYPE html>
			<html>
				<head>
					<meta charset="utf-8">
					<title>js语句</title>
					
					<!-- 在网页里嵌套js代码 -->
					<script>
						/* 分支结构: if  switch */ 
							/*  if结构  */
							var a = 10;
							if( a > 100){
								alert(a);
							}else{
								alert(0);
							}	
							/* 接收用户输入的成绩，判断成绩所属的等级
							80~100(包括80，也包括100)    优秀 
							60~80(包括60，但不包括80)     中等
							0~60(包括0，但不包括60)        不及格
							其他值      							   输入有误 
							*/
							var b = prompt("请输入分数:");
							if( b >=80 && b <= 100){
								alert("优秀");
							}else if( b >=60 && b < 80){
								alert("中等");
							}else if( b >=0 && b < 60){
								alert("不及格");
							}else{
								alert("数据格式错误!");
							}
							/* switch结构 */ 
							var c = prompt("请输入数字:");
							switch(c){
								case "1" : alert("今天是星期一"); break;
								case "2": alert("今天是星期二");break;
								case "3": alert("今天是星期三");break;
								case 4: alert("今天是星期四");break;
								case 5: alert("今天是星期五");break;
							}
							
						/* 循环语句  for  while  do...while  foreach*/
							/* 练习1:::循环弹出1-10 里的偶数*/
							for (var i = 1; i <= 10 ; i++) {
								if(i % 2 == 0){
									//alert(i);//弹出框
									console.log(i); //在浏览器里按f12的console里
								}
							}
							/* 练习2::: 循环弹出1-10 里的偶数的和*/
							var sum = 0;//定义变量,记录和
							for (var i = 1; i < 11; i++) {
								if( i % 2 == 0 ){
									sum += i; //求和
								}
							}
							console.log("总和是: "+sum); //在浏览器里按f12的console里	
							/* 练习3::: 循环弹出1-15 里的奇数的个数*/
							var count=0;//定义变量,记录个数
							for (var i = 1; i <= 15; i++) {
								if( i % 2 == 1){
									count++; //是奇数个数+1
								}
							}
							console.log(count);
							/* while循环... 先判断再执行 */
							/* 打印0-5 */
							var i = 0;
							while( i <= 5 ){ 
								console.log(i);
								i++;
							}
							/* do...while循环,最少执行一次循环体 */
							var i = 0;
							do{ 
								console.log(i);
								i++;
							}while( i <= 5 );
							
							
					</script>
				</head>
				<body>
				</body>
			</html>
	--5,js数组:
			<!DOCTYPE html>
			<html>
				<head>
					<meta charset="utf-8">
					<title>js数组</title>
					
					<!-- 向HTML网页中加入js代码 -->
					<script>
						/* 1,创建数组 */
						var a = [] ; /* 方式1 */
						a = [1,2,3,4,5]; /* js里的数组,长度可变 */
						console.log(a);
						
						var b = new Array() ; /* 方式2 */
						b = new Array("tony",10,1.1,true,null,undefined);
						console.log(b.length); /* 获取数组的长度*/
						
						/* 2,遍历数组 */
						for(var i = 0 ; i < a.length ; i++){
							console.log( a[i] );/* 根据下标i获取数据,并打印 */
						}
						/* 练习1:::求数组里的整数的和 */
						var sum = 0;//定义变量,记录和
						for(var i = 0 ; i < a.length ; i++){
							sum += a[i];
						}
						console.log("总和是: "+sum);
						
						/* for...in遍历a数组, 相当于foreach*/
						for(var i in a){  /* i是下标 */
							console.log( a[i] ); //数组里的元素
						}
						
					</script>
				</head>
				<body>
				</body>
			</html>

	--6,js函数:
		--像Java程序里的方法，也可以有参数或者返回值
		--语法: function 函数名(参数列表){ 函数体 }
		--代码:
				<!DOCTYPE html>
				<html>
					<head>
						<meta charset="utf-8">
						<title>js函数</title>
						
						<!-- 向网页中插入js代码 -->
						<script>
							/* js函数: 定义函数 + 调用函数 + 语法: function 函数名(参数列表){ 函数体 } */
							
							//1,定义函数 (方式1可以先调用再定义,方式2必须先定义才能调用)
							function a(){  /* 方式1*/
								console.log(123);
							}
							var b = function(){/* 方式2*/
								console.log(100);
							}
							//2,调用函数
							a();
							b();
							
							/* 定义需要参数的函数 */
							function c(x,y){
								console.log(x+y);
							}
							var d = function(x,y){
								console.log(x-y);
							}
							/* 调用需要参数的函数 */
							c(1,2);
							d(9,1.5);
							
							/* 定义需要返回值的函数 */
							function e(x,y){
								return x+y; //给调用者返回结果
							}
							/* 调用需要返回值的函数 */
							var f = e(1,2); //f接受e函数返回来的结果
							console.log(f);
							
							/* 定义需要返回值的函数 */
							var g = function(x,y){
								return x+y;
							}
							/* 调用需要返回值的函数 */
							var h = g("jack",10);
							console.log(h); //jack10
							
						</script>
					</head>
					<body>
					</body>
				</html>

 js.对象

--1,网页代码
			<!DOCTYPE html>
			<html>
				<head>
					<meta charset="utf-8">
					<title>JS对象</title>
					
					<!-- 引入一个js文件 -->
					<script src="js/4.js"></script>
				</head>
				<body>
				</body>
			</html>

	--2,js代码
			// 写js代码，用来测试 js对象--自定义js对象(声明对象+new对象+属性/函数)
			function Person(){  } //1，声明对象
			var a =  new Person();//2，new对象
			a.name = "jack" ; //3，动态的添加属性
			a.age = 20 ; //3.1，动态的添加属性
			a.study = function(){//4，动态的添加函数
				console.log(100); 
			};
			a.study();//调用函数

			a.coding = function(m,n){//4.1，动态的添加函数
				console.log(m+n); 
			} ;
			a.coding("rose",10);//调用函数

			a.eat = function(m,n){//4.2，动态的添加函数
				return m+n; //返回结果
			} ;
			//5，调用函数
			var b = a.eat(1,2);
			console.log("eat函数的返回值::"+b); //打印eat()的返回值
			//6，调用属性(要么打印要么赋值)
			console.log("name属性的值::"+a.name);
			console.log("age属性的值::"+a.age);
			//查看a对象的结构
			console.log(a); 

			/* 练习:::创建Student对象 */
			function Student(){}//声明对象
			var x = new Student();//new对象
			x.name="张三";//动态添加属性
			x.age=18;//动态添加属性
			x.eat=function(){//动态添加函数
				console.log(x.name);
				console.log(this.name); //this表示当前对象
			};
			x.eat();//调用函数
			console.log( x.name  ) ;//调用属性(要么赋值要么打印)
			console.log(x);

			//创建对象的方式2
			var pp = {
				name: "李四" , //添加属性
				age: 20 , //添加属性
				score: 100 ,  //添加属性
				show: function(){ //添加函数
					console.log("abc");
				}
			}
			pp.show();//调用函数
			console.log(pp.name);//调用属性
			console.log(pp);
			console.log(100);

			/* 也可以直接在浏览器的console里输入代码 */
			var p3 = { name:"jack" ,age:20 ,addr:"北京"};
			console.log(p3);
			console.table(p3);
沐艺^^
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
javascript基本知识
09-04
JavaScript ( JS ) 是⼀种具有函数优先的轻量级，解释型或即时编译型的脚本语⾔
JS（JavaScript）详解
weixin_53455615的博客
09-19 7102
JavaScript是由Netscape（网景）公司研发出来的一种在它的Navigator浏览器上执行的程序语言。JavaScript是一种基于对象(object-based)和事件驱动(Event Driven)的简单的并具有安全性能的脚本语言。JavaScript组成ECMAScript：JavaScript的核心，语法格式，使用方法文档对象模型（DOM，document object model）：DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。
JS 中this绑定ES5 与ES6总结call(),applay(),bind(),双冒号运算符，箭头函数
weixin_30338481的博客
01-15 355
ES5 let arg = [arg1, arg2, arg3......] 1. call(target,...arg）　　　　第一个参数，是this指向　　第二个参数，及其以后的参数都是数组里面的元素，就是说要全部列举出来；2. applay(target, arg) 　　第一个参数，是this指向　　第二个参数，是一个参数数组 3. bind(target)　第一个参数...
JS快速入门
最新发布
白豆五的博客
12-05 5650
JavaScript （简称JS），是一门跨平台、面向对象的脚本语言（弱类型语言），而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。
前端基础--JavaScript
qq_50048558的博客
08-22 2420
HTML HTML介绍 & 规范 介绍 HTML 指的是超文本标记/标签语言 (Hyper Text Markup Language). 专门制作网页的计算机语言. 超文本的意思是有一些单词或字母，在网页浏览器的世界中被赋予了特殊的权利。 记事本开发第一个网页 <html> <head> <title>第一个网页</title> </head> <body> Hello World! </body>
JS
weixin_56747126的博客
05-13 117
一,练习 –1,需求:解析用户提交的数据 http://127.0.0.1:8848/cgb2103/zhuce.html?user=jack&pwd=123&repwd=123&phone=3 –2,思路 –按照？切割字符串，得到数组， –获取下标为1的字符串:::: user=jack&pwd=123&repwd=123&phone=3 –继续按照&切割字符串::::[user=jack,pwd=123,repwd=123,phone=3] –遍历
cocos2d-js基本知识整理
10-08
cocos2d-js的基本知识的整理 , 基本代码的整理(加注释)
1 javascript基本知识
05-07
javascript基本知识，小白可以看看，简单易懂，还有一些练习
JavaScript基本知识点笔记.doc
06-23
JavaScript基本知识点笔记.doc
js基础--js简介
m0_54510474的博客
05-26 321
javascript语言发展历程、组成部分、版本迭代等信息简介
JS：(JavaScript)
ziyoudefengf的博客
07-18 239
1、   JS：(JavaScript) 1.      是一种嵌入在网页中程序段。(客服端脚本语言) 2.      是一种解释型语言，被浏览器解释执行。 3.      由Netscape发明，ECMA将其标准化。 4.      JS借用了Java的名字，但它与Java没有关系。 5.      增强客服端的交互功能。 2、   JavaScript加入网页的方式： 1.   
第二课--js数据类型的使用
阅读之后，对你有帮助，那就点个赞再走吧
09-03 203
6.函数 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...
js-关于＞＜比较符号
jieweiwujie的博客
09-06 332
1.如果是两个字符串，则按照对应的第一个字符编码值比较，以此类推； 2.如果一个是操作数值，另一个会转化为数值比较。 3.如果一个操作数是boolean，则会转化为数值比较1,0 4.如果2个字符串的数字比较。则会比较第一位的数值大小，以此类推 5 vara ='blue'; a<3 //false；因为a被转化为NaN；所以a>3也是false； 因此不能使用ifelse判断,下面写的就是错的 if（a>3）{ console.log(1); }else{ con..
JavaScript 教程 （详细 全面）
热门推荐
梁辰兴的博客
10-31 6万+
JavaScript（简称“JS”）是当前最流行、应用最广泛的客户端脚本语言，用来在网页中添加一些动态效果与交互功能，在 Web 开发领域有着举足轻重的地位。HTML 用来定义网页的内容，例如标题、正文、图像等；CSS 用来控制网页的外观，例如颜色、字体、背景等；JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。JavaScript 诞生于 1995 年，几乎是和互联网同时出现；
JS 总结
范特西的博客
08-05 1658
数据类型 基本数据类型：Number、String、Boolean、Null、Undefined、Symbol 引用数据类型统称为Object，细分有：Object、Array、Date、Function、RegExp 存储方式：基本数据类型的数据直接存储在栈中；引用数据类型的数据存储在堆中，在栈中保存数据的引用地址。栈内存是自动分配内存的，而堆内存是动态分配内存的，不会自动释放，所以每次使用完对象的时候都要把它设置为null，从而减少无用内存的消耗。 判断数据类型 typeof：返回该类型的字符串形
JS入门到精通完整版
qq_46362763的博客
08-08 1万+
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。它是作为开发Web页面的脚本语言而出名，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。.....................
JavaScript入门
微风洋洋的博客
02-10 8919
JavaScript入门秘籍，欲练此功，关注有功
javascript --- > js中的事件
栗子好好吃的博客
06-22 205
事件实现松耦合: // JS和HTML之间的交互是通过事件实现的. // 事件,就是文档或浏览器窗口中发生一些特定的交互瞬间. // 可以使用侦听器来预定事件,以便事件发生时执行相应的代码. // 这种在传统软件工程中被称为观察员模式的模型,支持页面的行为与页面的外观之间的松耦合 事件流: // 多个浏览器开发团队在看待浏览器事件上都保持同一个理念 // 当你点击了某个按钮,他们都认为单击事件不...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沐艺^^

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值