Javascript入门

一.Javascript的简介

1.web前端有三层:

　　HTML:从语义的角度,描述页面结构

　　CSS:从审美的角度,描述样式(美化页面)

　　JavaScript:从交互的角度,描述行为(提升用户体验)

2.JavaScript入门易学性

　　JavaScript对初学者比较友好

　　JavaScript是有界面效果的(比如C语言只有白底黑字)

　　JavaScript是弱变量类型的语言,变量只需要var来声明,而Java中变量的声明,要根据变量的类型来定义

var a;

　　JavaScript不用关心其他的一些事情(比如内存的释放,指针等),更关心自己的业务

3.JavaScript的组成

(1).JavaScript基础分为三个部分

　　ECMAScript:JavaScript的语法标准,包括变量,表达式,运算符,函数,if语句,for语句等..

　　DOM:操作网页上的元素API,比如让盒子移动,变色,轮播图等

　　BOM:操作浏览器部分功能的API,比如让浏览器自己滚动

(2).注意:JS机械重复性的劳动几乎为0, 基本都是创造性的劳动,而不像HTML,CSS中margin,padding都是机械重复劳动

4.JavaScript的特点

(1).简单易用:可以使用任何文本编辑工具编写,只需要浏览器就可以执行程序

(2).解释执行(解释语言):事先不编译,逐步执行,无需进行严格的变量声明

(3).基于对象:内置大量现成对象,编写少量程序可以完成目标

二.第一个JavaScript代码

1.在页面中,我们可以在body标签中放入<script type="text/javascript"></script>标签对儿, <script type="text/javascript"></script>标签对

<script type="text/javascript">

</script>

2.alert语句

<script type="text/javascript">
    alert("娃哈哈");
</script>

alert(英文翻译为"警报")的用途:弹出"警告框"

3.语法规则

(1).JavaScript对换行,缩进,空格不敏感

注意:每一条语句末尾要加上分号,虽然分号不是必须加的,但是为了程序今后要压缩,如果不加分号,压缩之后将不能运行

(2).所有的符号,都是英文的,比如括号,引号,分号

(3).JavaScript的注释:

单行注释://
多行注释:/**/

注意:sublime中,单行注释的快捷键是Ctrl+/, 多行注释的快捷键是Ctrl+shift+/

4.控制台输出:console.log("")

console.log(" ")表示在控制台中输出,console表示"控制台", log表示"输出"

5.用户输入:prompt()语句

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

F12打开控制台产看结果

prompt()语句中,用户不管输入什么内容,都是字符串

alert和prompt的区别

<script type="text/javascript">
    alert("娃哈哈");    // 直接使用
    var a = prompt("吃了吗");    // 必须用一个变量,来接收用户输入的值
</script>

6.直接量:数字和字符串

"直接量"即常量,也称为"字面量",看见什么,它就死什么

简单的直接量有两种:数字,字符串

(1).数值得直接量的表达非常简单,写上去就行了,不需要任何的符号,例如:

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

(2).字符串也很简单,但一定要加上引号,可以使单词,句子等

三.变量 

 1.变量的定义和赋值

var a = 666;

var是英语"variant"变量的缩写,后面要加一个空格,空格后面的东西就是"变量名"

　　定义变量: var就是一个关键字,用来定义变量,所谓的关键字,就是有特殊功能的小词语; 关键字后面一定要有空格隔开

　　变量的赋值: 等号表示赋值,将等号右边的值,赋给左边的变量

　　变量名: 我们可以给变量任意的取名字

注意:在JavaScript中,永远都是用var来定义变量,这和C, JAVA等语言不同

变量要先定义才能使用,比如,我们不设置变量,直接输出:

<script type="text/javascript">
    console.log(a);
</script>

控制台将会报错:

正确写法应为:

<script type="text/javascript">
    var a = 666;
    console.log(a);
</script>

2.变量的命名规范

变量名有命名规范: 只能由英语字母 ,数字, 下划线, 美元符号$构成,且不能以数字开头,并且不能是JavaScript保留字

3.下列单词,叫做保留字,就是说不允许当做变量名(不用记):

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

区分大小写:

var A = 666;    // 变量1
var a = 666;    // 变量2

四.变量的类型

变量中能够存储数字,字符串等; 变量会自动的根据存储内容的类型不同, 来决定自己的类型

1.数值型: number

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

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

2.typeof 变量: 表示"获取变量的类型",语法:

typeof 变量

在JavaScript中, 只要是数, 就是数值型(number)的, 无论整数, 浮点数(即小数), 无论大小, 无论正负, 都是number类型的

3.字符串类型: string

<script type="text/javascript">
    var a = "娃哈哈";
    var b = "乳娃娃";
    var c = "爽歪歪";
    var d = "";
    
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(d);
</script>

4.连字符和加号的区别

键盘上的+可能是连字符，也可能是数字的加号。如下：

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

总结:如果加好两边都是数值,此时是加, 否则,就是连字符(用来连接字符串)

五.变量值得传递(赋值)

语句:

a = b;

把b的值赋给a，b不变。将等号右边的值，赋给左边的变量；等号右边的变量，值不变

举个特殊的例子:

<script type="text/javascript">
    // 特殊:字符串 - 数值 = 数值
    var a = "5"
    var b = 2
    console.log(a - b)
</script>

注意: 字符串 - 数值 = 数值

六. 变量格式转换

1.用户的输入

prompt()就是专门用来弹出能够让用户输入的对话框。重要的是：用户不管输入什么，都是字符串。

2.parseInt(): 字符串转数字

parseInt()可以将字符串转数字, parse表示"转换", Int表示"整数"(注意Int的拼写),例如:

字符串转数字的方法:

 parseInt(“5”);

3.parseInt()还具有以下特性:

(1).带有自动净化的功能: 只保留字符串最开头的数字,后面的中文自动消失,例如:

console.log(parseInt("666无敌!"))

(2).自动带有截断小数的功能: 取整, 不四舍五入

 var a = parseInt(5.8 + 4.7);
 console.log(a);