JavaScript的介绍和初步使用

目录

一、JavaScript的简介

二、js的两种形式

三、js的变量

四、变量的使用与赋值

五、js中的输出语句

六、js中的数据类型

七、js中的运算符

7.1:一目运算符 ++  --

7.2:二目运算符  +  -  *  /  %取余  += -= *= /=      > < >= <= != ==  ===     &  |

7.3:三目运算符  (条件表达式) ?( 真 ) :( 非真 )

八、字符串拼接

九、类型转换

十、流程控制

10.1  if判断

10.2  if-else语句

10.3  多条件判断

10.4  if-else   if-else

 练习

 十一、For循环

10.1  循环输出奇数和偶数

10.2  图形输出

10.3  99乘法表

10.4  高斯累加

10.5  循环输入 求和 平均值 最大值  最小值

whlie循环和do{}whlie

brack和continue

switch...case


一、JavaScript的简介

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。
JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。  
JavaScript的标准是ECMAScript 。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为ECMAScript 6 或者ES2015。

二、js的两种形式

1.页内样式

 在head或者body标签中添加一个  <script></script>  可以在标签里编写js代码

2.页外样式

   步骤一:在js文件夹中创建一个Xxx.js文件

   步骤二:在Xxxx.js文件中编写js代码

   步骤三:在head标签中 通过 <script src="路径"> </script>进行引入

页外样式写到head中 让其早点加载 早点完成 

页内样式写到body结束标签之前  让html代码先去渲染内容 然后再去执行js代码

三、js的变量

变量是编程中最小的存储单元,用来存储数据。变量的产生是为了体现一种 ‘间接’ 思想

js中变量的定义:var  a = 18;
语法规则 : var 变量名  赋值符号  初始值;

var是js定义变量中的关键字,关键字还包括( let,const )等等,在其他语言中 例如java 定义变量也是需要关键字的

关键字是数据类型    int a =18;  但是js中无论什么类型都使用var

a   变量名 是可以自己定义的  要求:[约定俗成]  英文  有意义 小驼峰: 首字母必须小写 如果有多个单词 就从第二个单词的首字母开始大写

例如: maxAge getElementByClassName

四、变量的使用与赋值

<script>
    var a = 20;
    var b = a;
        a = 30;    
    var c = a+b;
    var c = b+c;
    var c = c+c;
</script>

1.代码的执行顺序 由上而下

2.变量的使用 定义之后 直接写变量名字代表使用的是变量的值

3.变量定义之后可以重复使用·

4.阅读代码

五、js中的输出语句

控制台输出

输出语句:console.log( )  console 控制台  log 输出日志

        <script>
			
			var  a = 20;
			
			var  b = a;
			     
				 a = 30;
				 
		    var  c = a+b;
			     c = b+c;
				 c = c+c;
				 
			console.log(  c  );
			alert( c );
			prompt( c );
			confirm( c);
			document.write( c );
		</script>	

六、js中的数据类型

<script>
			
			var  a1 = 20;
			var  a2 = 20.5;    // Number 数字类型
			
			var  b1 = "你好世界";
			var  b2 = "你好10086";
			var  b3 = "20";    // String 字符串类型  文本类型
			
			var  c1 = true;
			var  c2 = false;   // boolean 布尔类型 只有两个值 true flase  代表真 非真
			
			var  d1 = null; 
			var  d2 = new Array(); // 对象类型
			
			var  e;            //  undefined 未定义类型
			
			console.log(  e  );       // 输出 a1 的值
			console.log( typeof  e ); // 输出 a1 的数据类型
			
</script>	

七、js中的运算符

7.1:一目运算符 ++  --

<script>
			var a = 5;
			a++; // a+=1   a=a+1
			a--;
			console.log(  a );
</script>

7.2:二目运算符  +  -  *  /  %取余  += -= *= /=      > < >= <= != ==  ===     &  |

<script>
			
			var a = 5;
			var b = 25;			
			var c = a%b;			
			console.log(  c );			
			var d = 10;
			d+=5;// d = d+5;			
			console.log( d );			
</script>	

7.3:三目运算符  (条件表达式) ?( 真 ) :( 非真 )

<script>
			
			var a = 5;
			var b = 25;
			
			var c =  a>b ? a+b : a-b ;
			    c =  (a<b) ? ( a>a+b ? a*b : a/b ) : ( a+b );
			
			console.log(  c );			
</script>

八、字符串拼接

+ 运算符有两层含义

A 数学相加运算        参与运算的变量都是Number类型

B 字符串拼接运算     参与运算的变量有一个是string类型

<script>
			var a = 5;
			var b = "20";
			
			var c = a+b;
			console.log(  c );
</script>
<script>
			var a = 10+10+10+"10";
			var b = 10+"10"+10+10;
			var c = "10"+10+10+10;
			
			console.log( a , b ,c);
</script>
 <script>
			var a = "张三";
			var sql =    "insert into student values student ('"  +  a  +    "',18,'北京')";
</script>

九、类型转换

有的时候 我们拿到的数据是字符串类型 但是想让其进行数学上的相加运算

所以  我们需要将字符串转换为数字类型

<script>
			
			var  a = prompt("请输入第一个数字");
			var  b = prompt("请输入第二个数字");
			
			// var  c = a+b;
			// var  c = parseInt( a )  +  parseInt( b );
			// var  c = parseFloat( a )  +  parseFloat( b );
			var c = Number(a)  + Number(b);
			
			document.write( c + "=" +  a + "你" + b );
			
</script>

十、流程控制

控制流程(也称为流程控制)是计算机运算领域的用语,意指在程序运行时,个别的指令(或是陈述、子程序)运行或求值的顺序。
不论是在声明式编程语言或是函数编程语言中,都有类似的概念。

通过某些语句控制代码的执行流程
条件语句  循环语句等

10.1  if判断

语法结构:

if(条件表达式){
   代码块
}

执行流程: 首先先执行if的条件表达式 如果条件成立 则执行大括号的代码块

练习:请输入令狐冲的java考试成绩 如果成绩大于90 则输出下山去旅游

<script>
            
            var  s = prompt("请输入令狐冲的考试成绩");
            
            if( s > 90 ){
                document.write("<h1>下山去旅游 并且打探消息</h1>");
            }
            
</script>

10.2  if-else语句

if如果 else 否则

语法结构:
if(条件表达式){
   代码块A
} else {
   代码块B
}

执行流程: 首先判断if条件表达式是否成立 如果成立 则执行代码块A 如果不成立则执行 代码块B
if和else 代码块中的代码有且只有一个能执行

练习: 请输入令狐冲的java考试成绩 ,如果成绩大于90 则输出 去竞选掌门 否则 思过崖思过

<script>
			
			var  s = prompt("请输入令狐冲的考试成绩");
			
			if( s > 90 ){
				document.write("<h1>奖励你 紫霞神功 </h1>");
			}else {
				document.write("<h1>思过崖思过 </h1>");
			}
			
</script>

10.3  多条件判断

&& 并且  连接两个判断条件 当两个条件都成立的时候 则整体成立
练习:请输入令狐冲的java考试成绩和音乐考试成绩。如果java大于90 并且 音乐大于80 则输出 奖励你 吸星大法  否则 补考

<script>
			
			var  java = prompt("请输入令狐冲的java考试成绩");
			var  music = prompt("请输入令狐冲的音乐考试成绩");
			
			if( java>90 && music > 80 ){
				document.write("<h1>奖励你 紫霞神功 </h1>");
			}else {
				document.write("<h1>思过崖思过 </h1>");
			}
			
</script>

|| 或者 连接两个判断条件 当两个条件只要有一个成立 则整体成立
练习:请输入令狐冲的java考试成绩和音乐考试成绩。如果java大于90 或者 音乐大于80 则输出 奖励你 吸星大法  否则 补考

<script>
			
			var  java = prompt("请输入令狐冲的java考试成绩");
			var  music = prompt("请输入令狐冲的音乐考试成绩");
			
			if( java>90 || music > 80 ){
				document.write("<h1>奖励你 紫霞神功 </h1>");
			}else {
				document.write("<h1>思过崖思过 </h1>");
			}
			
</script>

10.4  if-else   if-else

语句规则:

if(条件表达式1){
    代码块A
}else if(条件表达式2) {
    代码块B
}else if(条件表达式3) {
    代码块C
}else if(条件表达式4) {
    代码块D
}else if(条件表达式5) {
    代码块E
}else if(条件表达式6) {
    代码块F
}else {
    代码块G
}

执行流程 首先判断 条件表达式1 成立则执行if 代码块A ,不能则进入条件表达式2的判断

  <script>
			var java = prompt("请输入令狐冲的java考试成绩");

			if ( java>90 ) {
				document.write("优秀");
			} else if ( java>80 ) {
				document.write("良好");
			}else if ( java>70 ) {
				document.write("一般");
			}else if ( java>60 ) {
				document.write("及格");
			} else  {
				document.write("较差");
			}
  </script>

 练习

请输入某个人的身高和体重 ,输出 偏胖 偏瘦 正常
公式:   标准体重 =  身高-105 上下浮动五公斤

var s = prompt("请输入你的身高");
			var t = prompt("请输入你的体重");
			
			var b=s-105;
			var max=b+5;
			var min=b-5;
			if(t>max){
				document.write("太胖了");
			}else if(t<min){
				document.write("太瘦了");
			}else{
				document.write("正常");
        }

个人所得税 =(工资 - 工资*0.2|7662*0.2 - 3500)x 税率 - 速算扣除数  
  6000
其中小括号里的“工资 - 三险一金 - 个税起征点”通常被称为“应纳税所得额”或“应纳税额”

工资:即初始收入(合同上所写的收入)

起征点:自2011年起,起征点由2000元上调至3500元

起征点3500并不是工资超过3500就要交个人所得税
 而是 工资-三险一金之后 还超过3500 才交个人所得税
税率:由3%上涨到45%,有7个等级,分别与7个不同区间的应纳税所得额对应

速算扣除数:由0上涨到13505,也有7个等级,与不同税率相对应:
全月应纳税所得额                           税率        速算扣除数(元)
全月应纳税额不超过1500元                      3%         0
全月应纳税额超过1500元至4500元                 10%        105
全月应纳税额超过4500元至9000元                 20%        555
全月应纳税额超过9000元至35000元             25%        1005
全月应纳税额超过35000元至55000元             30%        2755
全月应纳税额超过55000元至80000元             35%        5505
全月应纳税额超过80000元                      45%         13505

注:①表中所列含税级距、不含税级距,均为按照税法规定减除有关费用后的所得额。
②含税级距适用于由纳税人负担税款的工资、薪金所得;不含税级距适用于由他人(单位)代付税款的工资、薪金所得。

工资不超过 7662  那么五险一金就按照工资*20%计算超过 7662 五险一金就按照 7662*20%
五险一金
养老:单位20%,个人8%。
失业:单位2%,个人1%。
医疗:单位6-4%,个人2-4%。
工伤:单位1%,个人0%。
生育:单位1%,个人0%。
各地可能略有变动。
一金一般是单位8%-12%,个人也一样。

举例说明:假设月工资为6000元,工作地点是广州(养老保险8%、医疗保险2%、失业保险1%、住房公积金 8%),那么“应纳税额”=6000 - 6000x(8%+2%+1%+8%) - 3500=1360元。查上表可知,与1360元对应的税率和速算扣除数分别为3%和0,因此个税=1360x3% - 0=40.8元。也就是说,在广州月工资6000元需要缴纳个人所得税40.8元。虽然最后实际到手只有4000多元,但至少知道了,“少了的钱”几乎都用来缴纳五险一金了,只有极少一部分用来缴纳个税而已。

var w= prompt("请输入你的工资");
			
			var s = w>7662?7662*0.2:w*0.2;
			
			var y=w-s-3500;
			
			if(y<0){
				document.write("不用交税");
			}else{
				if(y<=1500){
					var g = y*0.03-0;
				}else if(y<=4500){
					var g = y*0.1-105;
				}
				else if(y<=9000){
					var g = y*0.2-555;
				}else if(y<=35000){
					var g = y*0.25-1005;
				}else if(y<=55000){
					var g = y*0.3-2755;
				}else if(y<=80000){
					var g = y*0.35-5505;
				}else {
					var g = y*0.45-13505;
				}
				document.write("个人所得税:"+g);
			}

 十一、For循环

语法结构:
  for(初值表达式;条件表达式;步长表达式){
     代码块
  }

      for (i=0;i<=5;i++){
             document.write("八嘎");     
        }

 

执行流程:
   1 首先执行 初值表达式  var i = 0;
   2 执行条件表达式      i<3; 条件此时成立
   3 执行代码块代码
   4 执行步长表达式      i++;
   5 执行条件表达式      i<3; 条件此时成立
   6 执行代码块代码
   7 执行步长表达式      i++;
   8 执行条件表达式      i<3; 条件此时成立
   9 执行代码块代码
   10 执行步长表达式      i++;
   11 执行条件表达式      i<3; 条件此时不成立  循环结束

用来解决 连续出现的重复代码问题

10.1  循环输出奇数和偶数

for(i=0;i<=100;i+=2){
			document.write(i+"<br>");
		}


for(i=1;i<=100;i+=2){
			document.write(i+"<br>");
		}

10.2  图形输出

for(i=1;i<=5;i++){
			for(j=1;j<=5;j++){
				document.write("*");
			}
			document.write("<br>");
		}


for(i=1;i<=5;i++){
			for(j=1;j<=i;j++){
				document.write("*");
			}
			document.write("<br>");
		}

10.3  99乘法表

for(i=1;i<=9;i++){
			for(j=1;j<=i;j++){
				document.write(i+"*"+j+"="+i*j+"\n");
			}
			document.write("<br>");
		}

10.4  高斯累加

var a=1;
		for(i=2;i<=10;i++){
			a+=i;
		}
		document.write(a);

10.5  循环输入 求和 平均值 最大值  最小值

var sum = max = min = Number(prompt("请输入第一次成绩"));
		
		for(i=2;i<=5;i++){
			q=Number(prompt("请输入第"+i+"次成绩"));
			if(q>max){
				max=q;
			}else if(q<min){
				min=q;
			}
			sum+=q;
		}
		document.write("总和"+sum);
		document.write("平均值"+sum/5);
		document.write("最大值"+max);
		document.write("最小值"+min);

whlie循环和do{}whlie

var i=0;
		while(i<=10){
			document.write("八嘎"+"<br>");
			i++;
		}


var i=0;
		do{
			document.write("八嘎"+"<br>");
			i++;
		}while(i<=10);

brack和continue

for(i=0;i<=10;i++){
			if(i==5){
				break;
			}
			document.write(i+"\n");
		}
		
		
		for(i=0;i<=10;i++){
			if(i==5){
				continue;
			}
			document.write(i+"\n");
		}

switch...case

var a = Number(prompt("请输入0-3之间的数字"));
			switch(a){
				case 0:document.write("输入的是0");
					break;
				case 1:document.write("输入的是1");
					break;
				case 2:document.write("输入的是2");
					break;
				case 3:document.write("输入的是3");
					break;	
				default:document.write("其他");
				break;
			}

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值