javascript

最新推荐文章于 2024-09-13 08:33:26 发布

zundujia

最新推荐文章于 2024-09-13 08:33:26 发布

阅读量528

点赞数 10

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/zundujia/article/details/139708525

版权

1、JavaScript简介
一门客户端脚本语言，运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎，不需要编译，直接就可以被浏览器解析执行了。

1.2、JavaScript的发展史
起源问题：上世纪末1995年时，Netscape（网景）公司推出Navigator浏览器。发布后用的人不多，这咋整啊？这家公司就想了一个好方案，不仅在浏览器实现静态HTML，还想要有动态效果，比如：在前端处理表单验证。

发明诞生：有目标就去做，网景公司大牛多，Brendan Eich（布兰登·艾奇）据说就用了10天就把JavaScript搞了出来，刚出来时叫LiveScript，为了蹭蹭当红明星Java热度，就改成JavaScript了（瞬间就火了），事实上他们两没啥关系。

竞争对手：看到网景公司有了js，微软感觉不行啊，我的IE要被干掉啊，同时也感到js的前途无量，于是参考JavaScript弄了个名为JScript浏览器脚本语言。

标准制定： Netscape和微软竞争出现的js导致版本的不一致，随着业界的担心，JavaScript的标准化被提上议事日程。ECMA（欧洲计算机制造商协会）组织就去干这事，最后在1997年弄出了ECMAScript作为标准。这里ECMAscript和JavaScript可以看做表达的同一个东西。

1.3、JavaScript的功能
可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。

1.4、JavaScript的特点
1、js源码不需要编译，浏览器可以直接解释运行。

2、js是弱类型语言，js变量声明不需要指明类型。

1.5、JavaScript组成
组成部分   作用
ECMA Script   构成了JS核心的语法基础
BOM   Browser Object Model 浏览器对象模型，用来操作浏览器上的对象
DOM   Document Object Model 文档对象模型，用来操作网页中的元素（标签）
2、JavaScript基础语法
2.1、HTML引入JS
2.1.1、内部引入
定义script标签，标签体内容就是js代码

2.1.2、外部引入
<script src="js/文件名.js"></script>
1、script标签不能自闭合。

2、如果script标签使用src属性，那么浏览器将不会解析此标签体的js代码。

2.2、JS输出数据的三种方式
2.2.1、浏览器弹窗
<script>
alert('浏览器弹框输出字符');
</script>

2.2.2、输出HTML页面

<script>
document.write('输出html内容到页面');
</script>

2.2.3、输出浏览器控制台

<script>
console.log('输出到浏览器控制台');
</script>

2.3、JS注释
2.3.1、单行注释
//注释内容
2.3.2、多行注释
/*注释内容*/
2.4、JS变量声明
java是强类型语言，注重变量的定义，所以在定义变量时都需要指定数据类型。

js是弱类型语言，不注重变量的定义，所以在定义变量时不需要指定数据类型。

2.4.1、定义变量
//局部变量用let定义
let 变量名 = 值;
//全局变量用var定义
var 变量名 = 值;
2.4.2、定义常量
//常量定义 const
const 常量名 = 值;
       <script>
           //整数类型
           var a=3;

           // Boolean类型
           var b=true;

           // 定义小数类型小数和整数类型统称为number类型
           var score=2.333;

           // 定义常量类型常量类型一旦被定义就不能被改变
           const PI=3.1415926

       //boolean类型
           var f=true;

           var m;
           console.log(m);
           // undefined; 表示变量未被定义

           // 字符串类型 string
           var o="dd";
       </script>

注意事项：

1、ECMAScript6之前定义变量使用var 但是会有很多坑，所以ECMAScript6之后开始推出let声明变量，const声明常量。

2、在js中，末赋值的变量，也是可以使用的，但是这个值是undefined,末定义的变量。

2.5、JS的数据类型
属性   描述
number   数字类型，不区分小数整数
string   字符串类型，不区分单双串
boolean   布尔类型，true/false
object   对象（function null）
undefined   未定义
2.5.1、类型判断 typeof变量
<script>
           // 使用let关键字定义字符串
           let str1 = "你好JS!";
           let str2 = 'a';
           console.log(typeof str1);
           console.log(typeof str2);

           // 定义整数
           let num1 = 1314;
           let num2 = 13.14;//四舍五入，保留2位
           console.log(typeof num1);
           console.log(typeof num2);

           // 定义boolean类型
           let flag = true;
           console.log(typeof flag);

           // 末定义类型
           let a;
           console.log(typeof a);

           // 引用数据类型
           let obj = new Object();
           console.log(typeof obj);

       </script>

2.6、JS的运算符

2.6.1、算数运算符
在js中数值可与字符串进行数学运算，底层实现隐式转换。

注意：字符串类型与数字类型的运算中，只有相加会进行字符串拼接，而减、乘、除运算中，字符串中的数值可与字符串进行数学运算。

2.6.2、比较运算符
==、===（全等于）之间的区别？

== : 只比较内容是否相同根本不比较数据类型
===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false

如果表达式运算的结果是true,把结果1返回
如果表达式运算的结果是false,把结果2返回

//定义一个变量为3
let a = 3;

//定义一个变量为4
let b = 4;

//页面输出
//如果满足的非0 ，非null，非undefined 为true
//如果满足的是0 ，是null , 是undefined 为false
document.write(a>b ? a : b);
2.7、JS流程控制语句
2.7.1、if结构
<script type="text/javascript">
if (条件表达式) {
代码块;
} else if(条件表达式){
代码块;
} else {
代码块;
}
</script>
JS的条件语句和Java语法基本一样,但是对数据类型的真假判断有些区别。

JS中对各种数据类型作为布尔值有以下特点：

类型   用法
boolean   true为真、false为假
number   非0为true
string   除了空字符串("")，其他都是true
null&undefined   都是false
对象   所有对象都是true
无意义的数据都为false 反之都为true。

在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)。

在JS中,switch语句可以接受任意的原始数据类型。

2.8 、循环结构
2.8.1、for循环
普通for循环

for(let 初始化语句; 条件表达式; 条件控制语句){
循环体;
}
增强for循环

for(let 变量名 of 对象){
需要执行的代码;
}
索引for循环

for(let 变量 in 对象){
需要执行的代码;
}
代码演示

forof 与 forin之间的区别

1. forin可以遍历对象,forof不能遍历对象
2. forin遍历出数组中的索引,forof遍历出数组中的元素

2.8.2、while循环
for一般用在某一个范围中循环
while一般用在一个确定范围中循环

for中的 var i = 1;这个只能在for循环中使用
while中的 var i = 1; 可以全局中使用

普通for 与 java一样
forin：遍历出数组的索引
遍历出对象中的属性名key
forof: 遍历数组中的元素

2.9、 JS函数
js函数是执行特定功能的代码块，也可以称为js方法。与java中的方法的功能是一样的。

function 函数名(参数列表){
函数体;
[return 返回值;]
}
2.9.1、函数的第一种定义方式
   function demo(){
       let a = 3;
       let b = 4;
       alert(a+b);
   }
   //方法必须调用，不调用不执行
       demo();
//===============================================

   //有参无返回值的方法
   function demo2(a,b){
       alert(a+b);
   }
   demo2(4,6);
//===============================================

   //无参有返回值的方法
   function demo3(){
       return 4+4;
   }
       let sum = demo3();
       alert(sum);
//===============================================

   //有参有返回值的方法
       function demo4(a , b , c){
       return a+b+c;
   }
       let d = demo4(2,3,4);
       alert(d);

2.9.2、函数的第二种定义方式
   <script>
       /*
           比较复杂，只需要了解，开发很少使用
       */
       var demo = new Function("a,b", "alert(a+b)");
       demo(4,4);
   </script>
2.9.3、函数的第三种定义方式
       <script>
           /* 匿名函数: 了解 */
           var demo = function(){
               alert(77);
           }

           demo();
       </script>
2.9.4、绑定一个函数
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script>
           function demo(){
               alert("点我干嘛？");
           }
       </script>
   </head>
   <body>

       <input type="button" value="点我哦" οnclick="demo()" />

   </body>
</html>