您的位置：首页 > Web前端 > JavaScript

Web前端— JavaScript篇（一）

2020-01-15 11:31 1816 查看

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 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

  • 点赞
  • 收藏
  • 分享
  • 文章举报
刘憨憨的小可爱 发布了28 篇原创文章 · 获赞 2 · 访问量 626 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航