Web全栈~09.JavaScript入门

缺乏、安全感 2023-01-05 15:26 223阅读 0赞

# Web基本笔记~09.JavaScript入门 #

## [上一期][Link 1] ##

JavaScript是由Netscape（网景）公司研发出来的一种在它的Navigator浏览器上执行的程序语言。

## JavaScript简介 ##

JavaScript是诞生于1995年,很多没接触过JavaScript的人可能会认为这个语言一定和Java有关系,然而事实并不是这样。

JavaScript刚诞生的时候,主要目的还是为了处理以前由服务器端语言比如说Perl负责的一些输入验证操作。再此之前,必须把表单数据发送到服务器端才能确定用户是否没有填写某个必填域,学过JavaWeb的人一定是很容易理解这个概念的。如果说表单的每次请求都要发给后端才能验证判断是否遗漏哪些必填项的话,响应的速度肯定是会慢很多的。所以现在JavaScript也逐渐成为市面上常见浏览器的必备功能。

现如今呢,JavaScript已经变成了一个功能非常全面的编程语言,它从一个简单的输入验证器发展到现在确实非常出乎人的意料。你可以说它是一个非常简单的编程语言,也可以说它是一个非常难学的编程语言。说它简单,是因为它可以很快学会使用,但是如果要深入掌握,那就需要很多年的时间了。

## JavaScript基本语法 ##

JavaScript的语法很多都借鉴了C语言或者类C语言。在JavaScript中是区分大小写的,第一个字符必须是一个字母、下划线(\_)或者美元符号($)符号。注视这一块也是C语言风格的注释，可以是//也可以是/\*\*/。

typeof 操作符可以让用户知道变量是什么数据类型。

<!DOCTYPE html>
    <html>
        <head>
           <meta charset="utf-8" />
    	   <title>网页标题</title>
    	   <script type="text/javascript"> var flag = true; console.log(typeof flag); //返回结果是 boolean </script>
        </head>
        <body>
            
        </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70]

使用console.log可以把结果打印到前端控制台上,而前端控制台则可以在浏览器中按F12进行查看，一般建议使用谷歌浏览器。

##### NAN #####

NAN是英文Not a Number的缩写，从英文意思就知道是非数值。这个数值主要表示本来要返回一个数值的操作数未返回数值的情况。(这样就不会抛错误了)。就举个例子,当 9 / "hello" 的时候,返回的则是NAN。因为9是数值但是"hello"不是数值而是字符串。isNAN()函数就是用来判断一个值到底是不是数值

alert(isNaN(NaN));	//true
    	 alert(isNaN(666)); //false

### 数值转换 ###

在JavaScript里面有三个函数可以把非数值转换成数值: Number()、parseInt()、parseFloat()。第一个函数Number可以用于任何数据类型、另外两个函数就是专门给字符串用的,在Java语言里面也见过这样的方法。

使用Number转化成数值的时候,字符串必须完全是数字,否则返回NAN。使用parseInt的时候,如果第一个字符是数值那么它会判断第二个字符是不是数值。直到遇见非数值的时候,后面的就不会再判断直接返回前面的内容了。就比如num3只返回了15一个道理。

var num1 = Number("helloworld");	//NAN
    var num2 = parseInt("hello");		//NAN
    var num3 = parseInt("15asf96");		//15
    var num4 = parseInt("4546465");		//4546465
    var num5 = Number("asf45448f4sa86");	//NAN
    var num6 = Number("15464");			//15464
    var num7 = Number("15asfasf");		//NAN
    alert(num1 + " " + num2 + " " + num3 + " " + num4 + " " + num5 + " " + num6 + " " + num7);

![在这里插入图片描述][20210113113757966.png]

--------------------

## JavaScript数据类型 ##

Javascript中有六大基本数据类型，这六种数据类型也就是我们声明变量的类型。

number 数字类型

string 字符(串)类型

boolean 布尔类型

Array 数组类型（不是基本数据类型）

undefined&null 未定义类型&空类型

object 对象类型

### number 数字类型 ###

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带

var x1=34.00; //使用小数点来写

var x2=34; //不使用小数点来写

极大或极小的数字可以通过科学（指数）计数法来书写

var y=123e5; // 12300000

var z=123e-5; // 0.00123

### String类型 ###

字符串是存储字符（比如 “Frankenstein"）的变量。字符串可以是引号中的任意文本。可以使用单引号或双引号

var userName =“Frankenstein";

var userName =‘Ma Yun';

可以在字符串中使用引号，只要不与包围字符串的引号冲突即可

var answer = "Nice to meet you!";

var answer = “He is called 'Frank'”;//外层是双引号，内层是单引号

var answer = 'He is called "Frank"';

##### 字符串面量 #####

<table> 
 <tbody> 
  <tr> 
   <td>\n</td> 
   <td>换行</td> 
  </tr> 
  <tr> 
   <td>\t</td> 
   <td>制表 tab</td> 
  </tr> 
  <tr> 
   <td>\b</td> 
   <td>退格</td> 
  </tr> 
  <tr> 
   <td>\r</td> 
   <td>回车</td> 
  </tr> 
  <tr> 
   <td>\\</td> 
   <td>斜杠</td> 
  </tr> 
  <tr> 
   <td>\'</td> 
   <td>单引号</td> 
  </tr> 
  <tr> 
   <td>\""</td> 
   <td>双引号</td> 
  </tr> 
  <tr> 
   <td>\xnn</td> 
   <td>以十六进制代码 nn 表示一个字符</td> 
  </tr> 
  <tr> 
   <td>\unnn</td> 
   <td>以十六进制代码表示一个uniCode字符</td> 
  </tr> 
 </tbody> 
</table>

### boolean类型 ###

布尔（逻辑）只能有两个值：true 或 false,布尔常用在条件测试中，表示真假值。

### undefined&null 未定义类型&空类型 ###

Undefined类型表示数据类型未知或者存在类型错误。如果变量的值为undefined，并不代表变量没有类型！

var name;
    console.log(name);  //此时变量name的类型就是undefined类型

null类型表示数据类型存在，但是并没有给变量(对象)赋值。一般null类型用于对象类型的初始化。如果变量(对象)的值为null，并不代表变量(对象)没有类型

var name;
    name = null；
    console.log(name);  //此时name就不再是变量，而是一个对象。类型就是null类型。

[Link 1]: https://blog.csdn.net/qq_41424688/article/details/112519001
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70]: /images/20221119/fb22180de7a845f4af95a6a909216b8d.png
[20210113113757966.png]: https://img-blog.csdnimg.cn/20210113113757966.png