JavaScript的介绍和初步使用

ゝ一纸荒年。 2023-10-03 19:37 1阅读 0赞

**目录**

一、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

## 四、变量的使用与赋值 ##

> 1.代码的执行顺序 由上而下
> 
> 2.变量的使用 定义之后 直接写变量名字代表使用的是变量的值
> 
> 3.变量定义之后可以重复使用·
> 
> 4.阅读代码

## 五、js中的输出语句 ##

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

## 六、js中的数据类型 ##

## 七、js中的运算符 ##

#### 7.1:一目运算符 ++ -- ####

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

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

## 八、字符串拼接 ##

> \+ 运算符有两层含义
> 
> A 数学相加运算 参与运算的变量都是Number类型
> 
> B 字符串拼接运算 参与运算的变量有一个是string类型

## 九、类型转换 ##

> 有的时候 我们拿到的数据是字符串类型 但是想让其进行数学上的相加运算
> 
> 所以 我们需要将字符串转换为数字类型

## 十、流程控制 ##

> 控制流程（也称为流程控制）是计算机运算领域的用语，意指在程序运行时，个别的指令（或是陈述、子程序）运行或求值的顺序。  
> 不论是在声明式编程语言或是函数编程语言中，都有类似的概念。
> 
> 通过某些语句控制代码的执行流程  
> 条件语句 循环语句等

#### 10.1 if判断 ####

> 语法结构：
> 
> if(条件表达式)\{  
> 代码块  
> \}
> 
> 执行流程： 首先先执行if的条件表达式 如果条件成立 则执行大括号的代码块
> 
> 练习：请输入令狐冲的java考试成绩 如果成绩大于90 则输出下山去旅游

#### 10.2 if-else语句 ####

> if如果 else 否则
> 
> 语法结构：  
> if(条件表达式)\{  
> 代码块A  
> \} else \{  
> 代码块B  
> \}
> 
> 执行流程： 首先判断if条件表达式是否成立 如果成立 则执行代码块A 如果不成立则执行 代码块B  
> if和else 代码块中的代码有且只有一个能执行
> 
> 练习： 请输入令狐冲的java考试成绩 ，如果成绩大于90 则输出 去竞选掌门 否则 思过崖思过

#### 10.3 多条件判断 ####

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

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

#### 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的判断

### 练习 ###

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

> 个人所得税 =（工资 - 工资\*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多元，但至少知道了，“少了的钱”几乎都用来缴纳五险一金了，只有极少一部分用来缴纳个税而已。

## 十一、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 循环输入 求和 平均值 最大值 最小值 ####

#### 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;
    			}