Web前端— JavaScript篇(一)

1、简述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 或者ES6

严格检查格式

在编写JavaScript代码之前要将IDEA的设置成如下所示:
IEDA 需要设置支持ES6语法
‘use strict’; 严格检查模式,预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行!
局部变量建议都使用 let 去定义
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        'use strict';
        // 全局变量
        let i = 1;
        // ES6   let
        
    </script>

</head>
<body>

</body>
</html>

2、JavaScript的引入语法

1、内部标签

<script>
    //......
</script>

实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--script标签内,写Javascript代码-->
    <script>
       alert('hello,world');
    </script>

</head>
<body>

<!--这里也可以存放-->
</body>
</html>

在这里插入图片描述
2、外部引入方式

abc.js

//。。。

test.html

<script src="abc.js"></script>

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

   
    <!--外部引入-->
    <!--注意:script标签必须成对出现-->
    <script src="js/abc.js"></script>
</head>
<body>

<!--这里也可以存放-->
</body>
</html>

在这里插入图片描述

3、JavaScript的基本语法

JavaScript在很大程度上和JavaSE相似。所以很大的降低了我们的学习的成本。
注意

  • JavaScript严格区分大小写!
  • 定义变量 变量类型 变量名 = 变量值;
  • console.log(score) 在浏览器的控制台打印变量!相当于Java中的 System.out.println();
  • 浏览器必备调试须知:认识每个是什么意思。
    在这里插入图片描述
<!--JavaScript严格区分大小写!-->
<script>
    // 1. 定义变量    变量类型  变量名  = 变量值;
    var score = 71;
    // alert(num);
    // 2. 条件控制
    if (score>60 && score<70){
        alert("60~70")
    }else if(score>70 && score<80){
        alert("70~80")
    }else{
        alert("other")
    }

    //console.log(score) 在浏览器的控制台打印变量! System.out.println();
    /*
        * asdasdasd
        * */

</script>

4、JavaScript的数据类型

值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。

引用数据类型:对象(Object)、数组(Array)、函数(Function)。
注意:Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值。

  • 字符串
    字符串可以是引号中的任意文本。您可以使用单引号或双引号;
    实例:
var carname="Volvo XC60";
var carname='Volvo XC60';

您可以在字符串中使用引号,只要不匹配包围字符串的引号即可:
实例:

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';
  • 数字(Number)
    js不区分小数和整数,Number
123 //整数123
123.1 // 浮点数123.1
1.123e3 //科学计数法
-99    //复数
NaN    // not  a  number
Infinity //表示无限大
  • 布尔值
    布尔(逻辑)只能有两个值:true 或 false。
var x=true;
var y=false;
  • null 和 undefined
    null 空
    undefined 未定义
  • 逻辑运算
&&   两个都为真,结果为真

||   一个为真,结果为真
 
!    真即假,假即真
  • 比较运算符!!!!重要!
=
==  等于(类型不一样,值一样,也会判断为true)
===   绝对等于(类型一样,值一样,结果true)

注意这是一个JS的缺陷,坚持不要使用 == 比较
须知:

  • NaN===NaN ,这个与所有的数值都不相等,包括自己
  • 只能通过 isNaN(NaN) 来判断这个数是否是 NaN
    在这里插入图片描述
  • 浮点数问题:
console.log((1/3) === (1-2/3))

尽量避免使用浮点数进行运算,存在精度问题!

Math.abs(1/3-(1-2/3))<0.00000001
  • 数组
    Java的数值必须是相同类型的对象~,JS中不需要这样!
//保证代码的可读性,尽量使用 []
var arr = [1,2,3,4,5,'hello',null,true];

new Array(1,12,3,4,4,5,'hello');

在这里插入图片描述
注意:取数组下标:如果越界了,就会出现

undefined
  • 对象
    对象是大括号,数组是中括号~~

每个属性之间使用逗号隔开,最后一个不需要添加

var person = {
    name: "haha",
    age: 3,
    tags: ['js','java','web','...']
}

在这里插入图片描述
取对象的值:
在这里插入图片描述

  • 声明变量类型
    当声明新变量时,可以使用关键词 “new” 来声明其类型:
var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

注意:JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章