学习JavaScript基础

JavaScript基础

1.JavaScript简介

1.1 什么是JavaScript？

• JavaScript是一种客户端脚本语言（脚本语言是一种轻量级的编程语言）。
• JavaScript通常被之前嵌入HTML页面，有浏览器执行。
• JavaScript是一种解释性语言（就是说，代码执行不进行预编译）。
• 特点：弱类型和基于对象（因为面向对象需要具有封装、继承、多态的特征）。
• JavaScript语言包括三个核心：ECMAScript基本语法、DOM、BOM.

1.2 前端web页面是由HTML、CSS、JavaScript这三种语言组成。

• html是一种标记语言，用来结构化我们的网页内容并赋予内容含义。
• CSS是一种层叠样式表，可将样式应用于HTML内容。
• JavaScript是一种脚本语言，可以用来创建动态更新内容，控制多媒体，制作动画等等。

2 JavaScript的使用方法

2.1 在HTML中如何使用JavaScript（三种）

2.1.1 内部导入

在<script>标签中编写JavaScript代码

<script type="text/javascript">
        //内部JavaScript使用
        var str = "Hello JavaScript！";
        console.log(str);
    </script>

2.1.2 外部导入

使⽤外部导⼊js会使代码更加有序，更易于复⽤，且没有了脚本的混合，HTML也会更加易读。

scr参数值为js文件的相对路径

<script type="text/javascript" src="./my.js"></script>

2.1.3 内联导入

就是将js代码写⼊html代码中，如在html标签的事件中或超级链接⾥。

<button onclick="alert('Hello JavaScript！');">点击我</button>

3 JavaScript的基本语法

3.1 JavaScript的输出

JavaScript的输出主要有三种：

• window.alert() 弹出警告【偶尔使用】
• document.write()方法将内容到网页中【偶尔使用】
• document.getElemenntById().innerHTML更改获取标签里面的内容。【经常使用】
• console.log()写到浏览器的控制台【经常使用】

<script>
        //  先进行网页提示再加载页面信息
        window.alert('你好呀！');
        //  控制台输出
        console.log('锄禾日当午,汗滴禾下土!');
        //  文档输出
        document.write('谁知盘中餐，粒粒皆辛苦!');

    </script>

<script>
	//	通过写⼊HTML标签中，完成⻚⾯中的输出
    document.getElementById('did').innerHTML="bbbbbb";
</script>

如果一个<script>中的代码出错，那么出错位置下面的代码可能会不执行。JavaScript代码与HTML代码不同，HTML代码出错时，页面的样式不显示，不会报错。

3.2 变量

格式：var 变量名 = 变量值；
可以同时声明多个变量
在javascript中可以一次赋值相同值的多个变量：var a = b = c = 20;
在javascript中可以一次赋值不相同的值的多个变量：var a=10,b=20,c=30;
使用单引号或者双引号都可以定义字符串

3.3 变量命名规范

规则 （ 必须遵守的，不遵守会报错）

• 由字⺟、数字、下划线、$符号组成，不能以数字开头
• 不能是关键字和保留字，例如：for、 if、while。
• 区分⼤⼩写

规范 （建议遵守的，不遵守不会报错）

• 变量名必须有意义
• 遵守驼峰命名法。⾸字⺟⼩写，后⾯单词的⾸字⺟需要⼤写。例如：userName、userPassword

3.4 语句和注释

语句使用要用分号（；）结尾。虽然语句写完换行也可以实现语句结束，但是不建议使用。
注释分为两种：单行注释 // 多行注释 /**/

4 JavaScript数据类型

4.1 JavaScript中的数据类型：

• 值类型：
  字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
  【注意：Symbol 是 ES6 引⼊了⼀种新的原始数据类型，表示独⼀⽆⼆的值。】
• 引用数据类型：
  对象(Object)、数组(Array)、函数(Function)。
  
  利用instanceof()方法来判断变量是否是数组。

进制转换

• 十进制转化为二进制（toString(进制类型（2，8，16）)方法）
• 其他进制转化为十进制（parseInt(“其他进制数”，进制类型)）;

不同类型的赋值形式：

• 值类型理解：变量之间的互相赋值，是指开辟⼀块新的内存空间，将变量值赋给新变量保存到新开辟的内存⾥⾯；之后两个变量的值变动互不影响。
• 引⽤类型理解：变量之间的互相赋值，只是指针的交换，⽽并⾮将对象（普通对象，函数对象，数组对象）复制⼀份给新的变量，对象依然还是只有⼀个，只是多了⼀个指引。

类型转换
JavaScript变量可以转换为新变量或者其他数据类型

• 通过JavaScript函数
• 通过JavaScript自身自动转换
  

<script>
       console.log(typeof Number("2345"));  //字符串转化为数字
       console.log(Boolean(0));     //  数值转化为boolean
       console.log(String([10,23,65]));     //  数组类型转化为字符串

       console.log(parseInt("234abc"));     //  将字符串强行转换成数值类型  前提:必须是数字开头
       console.log(parseFloat("36.6abc"));  //  将字符串强行转换成浮点型
       console.log(parseInt("ad1293"));     //  NaN错误

       console.log("----------JavaScript自身自动转换------------")
       console.log(true+1);    //  true会自动转换为1,进行计算
       console.log("12"+100);  //  100自动转化为字符类型
    </script>

5 JavaScript运算符

1. 按照操作元数的个数不同分为：⼀元运算符、⼆元运算符和三元运算符
2. 按照种类划分⼜分为如下运算符

• 算数运算符
  （+ ，-， *， /， %， ++， --）
  注意：其中加号有两种意思，字符串连接和数值求和【加号”+“两侧都是数值则求和，否则做字串连接】

• 赋值运算符
  （=，+= ，-=，*=，/=，%=）

• 比较运算符
  

• 逻辑运算符
  

• 位运算【了解即可】

  • 位运算符处理 32 位数
  • 该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。
    
    ⽆符号位移（>>>）和有符号位移（>>）的区别是
    有符号位移运算时如果数字为正数时位移后在前⾯补0，为负数时则在位移后在前⾯补1

• 条件运算符
  语法：
  variablename = (condition) ? value1:value2

• 逗号运算符
  ⽤逗号运算符可以在⼀条语句中执⾏多个运算。
  var iNum1=1, iNum2=2, iNum3=3;

• 类型运算符
  
  instanceof 运算符与 typeof 运算符相似，⽤于识别正在处理的对象的类型。
  与 typeof ⽅法不同的是，instanceof ⽅法要求开发者明确地确认对象为某特定类型。

3 运算符的优先级

6 JavaScript流程控制

JavaScript流程控制值和Java流程控制大致相同。就不一一进行解释了。

• 顺序结构
  • 程序会按照⾃上⽽下的顺序执⾏

6.1 分⽀结构（选择结构）

- 单分支语句 if(条件语句){语句块} 【条件不符合，可以不执行语句块】
- 双分支语句  if(条件语句){语句块1}else{语句块2}【必定执行一个语句块】
- 多分支语句if(条件1){语句块1}-else if(条件2){语句块2}-else if(条件3){语句块3}
- 条件分支语句 switch...case 

• 循环结构
  • for循环代码块⼀定的次数
  • for/in - 循环遍历对象的属性
    这里的（for/in）类似于foreach就是格式有点差别；
    示例：

	var ob = {"name":"张三","age":22,"sex":"男"};
	//遍历对象ob中的每个属性
	for(key in ob){
 	//输出属性和对应的属性值
	console.log(key+":"+ob[key]);
}

• while - 当指定的条件为 true 时循环指定的代码块
• do/while - 同样当指定的条件为 true 时循环指定的代码块
• 循环中的 break break 和 continue continue 语句
  • break语句用于跳出循环
  • continue用于跳出循环中的一个迭代。

7 JavaScript函数

在 JavaScript中有两种函数：自定义函数和系统函数

• 格式：
  function 函数名（）{
  函数体
  返回值…
  }
• JavaScript函数定义方式

	   //函数的定义方式：
       //1.标准式
       function demo1(){
           console.log("Hello Demo1");
       }

       demo1();

       //2.使用Function()构造函数定义
       var demo2 = new Function('console.log("Hello Demo2");');

       demo2();

       //3.使用表达式方式定义（匿名）
       var demo3 = function(){
            console.log("Hello Demo3"); 
       }

       demo3();
    </script>

• 函数使用：
  通过函数名直接调用函数
  函数名（参数1，参数2）

       //4. 函数自调用定义
       (function(){
            console.log("Hello Demo4");
       })();

系统函数

系统中常用的内置函数

escape() //字串编码
unescape() //字串反编码
*eval() //将参数字符串作为脚本代码来执⾏。
*isNaN() // is not a number (不是⼀个数值)
*parseInt()
*parseFloat()

本文地址：https://blog.csdn.net/weixin_43072239/article/details/109303516