Javascript基础知识（一）

web前端可以从三个层面来描述：

1 . 结构层 HTML 从语义的角度，描述页面结构。2 . 样式层 CSS 从审美的角度，美化页面。3 . 行为层 JavaScript 从交互的角度，提升用户体验。

JavaScript运行在客户的电脑里面，而不是服务器上，所以我们称为“前台语言”。JavaScript就是一个简单的制作页面效果的语言，不能操作数据库。它服务于页面的交互效果、美化、绚丽。

今天开始学习一些Javascript的基础知识。

1.Javascript的历史背景介绍

布兰登•艾奇（Brendan Eich，1961年～），1995年在网景公司，发明的JavaScript。一开始JavaScript叫做LiveScript，但是由于当时Java这个语言特别火，所以为了傍大牌，就改名为JavaScript。 同时期还有其他的网页语言，比如VBScript、JScript等等，但是后来都被JavaScript打败，所以现在的浏览器中，只运行一种脚本语言就是JavaScript。 Javascript和ECMAScript的关系 JavaScript是由公司开发而成的，公司开发而成的一定是有一些问题，不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。 Ecma国际前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association。ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）。 Javascript发展历程 2003年之前，JavaScript被认为“牛皮鲜”，用来制作页面上的广告，弹窗、漂浮的广告。 2004年JavaScript命运开始改变。人们逐渐开始提升用户体验，谷歌公司带头使用Ajax异步交互技术（搜索框智能感应）。（Ajax技术就是JavaScript的一个应用）。 2007年，用户就多了上网的途径——移动设备上网。JavaScript在移动页面中，也是不可或缺的。并且这一年，互联网开始标准化，按照W3C规则三层分离，人们越来越重视JavaScript了。 2010年，人们更加了解HTML5技术了，HTML5推出了一个东西叫做Canvas（画布），工程师可以在Canvas上进行游戏制作，利用的就是JavaScript。 2011年，Node.js诞生，使JavaScript能够开发服务器程序了。

2. JS 语法格式

Js 的书写位置非常的自由。

行内式 <button onclick="alert('哈哈哈')">点击我</button> 内嵌式 <script type=”text/javascript”> </script> 任何一个地方 外链式 <script type=”text/javascript” src=”hh.js”></script>

跟链入css一样，写在head里面。

1.书写在body里面任何一个地方。

<script type="text/javascript"> 内容 </script>

3.JS语句

1.alert语句

alert就是英语里面的“警报”的意思。用途就是弹出“警告框”：

<script type="text/javascript"> alert("警报：密码含有大写字母！"); </script>

代码截图：

效果：

JavaScript对换行、缩进、空格不敏感，但最后一定要加分号，否则压缩代码后，就会出问题。

2.控制台输出语句——console

例：

<script type="text/javascript"> console.log("警报：密码含有大写字母！"); </script>

在网页上右键，点击检查，找到console。

3. document.write() 文档打印输出

document.write() 直接在文档中显示。

4.直接量——数字和字符串

“直接量”也称为“字面量”，就是看见什么，它就是什么。简单的直接量有2种：数字、字符串。 数值的直接量的表达非常简单，它不需要任何的符号：

alert(666); //666是数字，所以不需要加引号。

字符串就是人说的话，比如单词、句子，一定要加上引号。

5.变量

计算机的程序中，用字母来表示数字、字符串等其他东西的，称为“变量”。跟小学数学代数差不多。

<script> var a = 100;//把数字100赋值给a，用var来定义一个变量。 console.log(a);//在控制台输出a </script>

效果：

var就是英语“variant”变量的缩写。后面要加一个空格，空格后面的东西就是“变量名”。

1. 变量名有命名规范：

只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字。 下列的单词，叫做保留字，就是说不允许当做变量名： abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

输出变量，一定不要加引号

2.变量的类型

变量里面能够存储数字、字符串。变量会自动的根据存储的东西类型不同，来决定自己的类型。

-数值型 如果一个变量中，存放了数字，那么这个变量就是数值型的。

var a = 100; //定义了一个变量a，并且赋值100 console.log(typeof a); //输出a变量的类型

typeof表示“某某的类型”

3.字符串型

1 var a = "abcde"; 2 var b = "回家吃饭"; 3 var c = "123123"; 4 var d = "哈哈哈哈哈"; 5 var e = ""; //空字符串

4.布尔值

布尔类型的值，就两个，true、false，用的时候千万不要加上引号。

var a = true; var b = false;

5.连字符和加号

“+”号有两种含义： 1） 连字符 2） 加

console.log("我" + "爱" + "你"); //连字符，把三个独立的汉字，连接在一起了 console.log("我+爱+你"); //原样输出 console.log(1+2+3); //输出6

如果加号两边都是数值，此时是加。否则，就是连字符。

5.变量值的传递

语句： 1 a = b; 将等号右边的值，赋给左边的变量；等号右边的变量，值不变。 把b的值赋给a，b不变。

var a = 1; //定义a，并且赋值1 var b = 2; //定义b，并且赋值2 a = b; //就是将b的值给a，b的值不变。所以a就是2了，b是2不变。 console.log(a); //2 console.log(b); //2

6.变量的分类

根据变量的作用范围 可以分为全局变量和局部变量 全局变量： 1. 在最外层声明的变量。 2. 在函数体内部，但是没有声明var 的变量也是全局变量 局部变量： 在函数体内部声明的变量。

6.运算符和表达式

运算符有很多分类：数学运算符、逻辑运算符、自增运算符等等。

1.数学运算符：

运算顺序跟数学中学的一样，只是没有中括号和大括号，全部都是小括号。 语法：

Math.pow(a,b);

1.乘方：

var a = Math.pow(3,4); console.log(a);

可以嵌套：

var a = Math.pow(3,Math.pow(2,2)); console.log(a);

2.开根号：

var a = Math.sqrt(81); console.log(a);

3.关系运算符

> 大于号 < 小于号 >= 大于或等于 <= 小于或等于 == 等于 === 全等于 != 不等于 !== 不全等于

注意：在JS中=符号只有一个意思！表示赋值！！如果想判断两个东西，是否相等，需要使用符号==。==和===的区别是：一个判断值是否相等,一个是判断值及类型是否完全相等。

console.log("5" == 5); //true console.log("5" === 5); //false

关系运算符的意思和数学上学得一样。它们得到的结果都是布尔值，要么是true，要么是false。 示例：

<script type="text/javascript"> //得到用户的成绩 var chengji = parseInt(prompt("请输入成绩")); //输出结果： alert(chengji >= 60); </script>

4.逻辑运算符

逻辑运算符有三个：

&& 与（且） || 或 ! 非

只有true、false才能参与逻辑运算，得到的答案，仍然是布尔值。

// &&表示“且”的意思，都真才真 console.log(true && true); //true console.log(true && false); //false console.log(false && true); //false console.log(false && false); //false //或，都假才假 console.log(true || true); //true console.log(true || false); //true console.log(false || true); //true console.log(false || false); //false 连比要分开写

应该拆开，中间用一个&&连接。

console.log(1< 2 && 2 < 4);//true

7.变量格式转换

1.用户输入 prompt

<script type="text/javascript"> var a = prompt("请输入点什么"); console.log(a); </script>

prompt就是专门用来弹出能够让用户输入的对话框：

alert(“哈哈哈”); //直接使用，不需要变量 var a = prompt(“请输入一个数字”); // 必须用一个变量，来接收用户输入的值

2.字符串→数字 parseInt parseFloat

parseInt是一个非常多功能的东西，可以将字符串转为数字，也可以将数字取整，也可以转换进制。

console.log(parseInt("365天做10000个娃娃"));

只保留开头的数字：365

console.log(parseInt(5.8));

浮数取整：5 parseInt(值, 进制); parseInt(110,2) 把110 这个2进制转换为 10进制

parseFloat将它的字符串参数解析成为浮点数并返回。 Number函数把对象的值转换为数字。

3.Null undefined

Null 空的 没有值 。 Undefined 未定义的 应该有值，但是没有给。