JavaScript简介:
web前端有三层:
- HTML:从语义的角度描述页面结构。
- CSS:从审美的角度,描述样式(美化页面)。
- JavaScript:从交互角度,描述行为(提升用户体验)。
JavaScript的组成:
- ECMAScript:JavaScript的标准语法。包括变量、表达式、运算符、函数、if语句、for语句等。
- DOM:操作网页上的元素API。比如让盒子移动、变色、轮播图等。
- BOM:操作浏览器部分功能的API。比如让浏览器自动滚动。
JavaScript的特点:
- 简单易用:可以使用任何文本编辑工具编写,只需要浏览器就可以执行。
- 执行语言(解释型语言):事先不编译,逐行执行、无需进行严格的变量声明。
- 基于对象:内置大量的现成对象,编写少量代码就可完成工作。
JavaScript程序
在页面中。我们可以在body标签中放入<script type=”text/javascript”></script>
标签对儿.
<script type="text/javascript"> </script>
1.alert语句
<script type="text/javascript"> alert(666) </script>
这样就会在页面上弹出窗口,显示 ’666‘ 了。
alert意思为警报,作用就是弹出警示框。
JavaScript语法规则
- JavaScript对换行、缩进、空格不敏感。
备注:每一条语句后面要加上分号,虽然不是必须的,但是为了程序以后要压缩,如果不加分号,程序可能会无法运行。 - 所有符号都必须是英文状态下的:比如括号,逗号,分号.....
- JavaScript的注释:
单行注释://
多行注释:/* 注释内容 */
JavaScript在网页中输出信息,可以使用alert以弹框方式输出,也可以输出到控制台,使用console.log();
控制台在元素审查(F12)中可以找到。控制台是前端调试程序的地方。
用户输入语句:prompt()
prompt就是让用户来数数据的对话框,也是以弹窗方式显示。
代码如下:
<script type="text/javascript"> var a = prompt('今天是什么天气?'); console.log(a); </script>
prompt不管用户输入的是什么内容,打印出来的都是字符串。
alert和prompt的区别
alert不需要定义变量就可以直接使用,prompt需要先定义一个变量才可以使用。
直接量:数字和字符串
直接量就是常量,也可以称作为 “字面量” 。看见什么就是什么。
简单的直接量有两种:数字和字符串
变量
变量的定义和赋值:
var a = 100;
var是英语variant(变量)的缩写。后面加上空格 空格后面的东西就是变量名。
- 定义变量:var就是一个关键字,用来定义变量,使用其他的字符串无效。所谓关键字,就是用特殊功能的小词语,关键词和var之间一定要使用空格隔开。
- 变量的赋值:等号表示赋值,将等号右边的值赋值给等号左边的变量名。
- 变量名的命名:需要遵守数字、字母、下划线,并且不能以数字开头,变量名不能和关键次重名。
在JavaScript中不论是什么类型的变量都可以使用var来定义这和c语言之类的一些语言是不一样的。
变量需要先进行定义,才能使用。
JavaScript对单词的大小写极为敏感,所以A和a是两个不同的变量名。
下列的单词,叫做保留字,就是说不允许当做变量名,不用记:
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
变量的类型
数值型:number
如果一个变量中存放的是数字,那么这个变量就是数值型的。
var a = 100; //定义了一个变量a,并且赋值100 console.log(typeof a); //输出a变量的类型
typeof()用来获取变量的类型,语法为:typeof 变量
在JavaScript中,只要是数就是数值型的,无论是浮点型还是整数、无论大小、无论正负都是数值型。
字符型:string
无论是什么类型的值,只要加上双引号或单引号,那么它就是字符型了,即使关键字被加上引号,那么他也是字符了。
连字符和加号的区别
键盘上的+可能是连字符也可能是数学运算中的加号。
console.log("我" + "爱" + "你"); //连字符,把三个独立的汉字,连接在一起了 console.log("我+爱+你"); //原样输出 console.log(1+2+3); //输出6
如果两边都是数值的话,他就是数学运算中的加号,否则就是连字符。
变量格式的转换
当我们使用prompt()来进行用户交互的时候,无论用户输入什么,那么打印出的值都是字符串,那么如何来将变量的格式来进行转换呢。
parseInt()将字符串转换为数字
parseInt(“5”);
parseInt()还具有以下特性:
(1)带有自动净化的功能;只保留字符串最开头的数字,后面的中文自动消失。例如:
console.log(parseInt("2018你真帅!!");
(2)自动带有截断小数的功能:取整,不四舍五入。
var a = parseInt(5.8) + parseInt(4.7); console.log(a);
var a = parseInt(5.8 + 4.7); console.log(a);
JavaScript中的基本数据类型
- number 数值类型
- string 字符串类型
- boolean 布尔值类型
- null 空对象
- underfined 未定义对象
number
var a = 123; //typeof 检查当前变量是什么数据类型 console.log(typeof a) //特殊情况 var a1 = 5/0; console.log(typeof e1) //Infinity 无限大. number类型
- string
var str = '123' console.log(typeof str)
- boolean
var b1 = false; console.log(typeof b1)
- null
var c1 = null;//空对象. object console.log(c1)
undefined
var d1; //表示变量未定义 console.log(typeof d1)
流程控制
if 、if-else、 if-else if-else
var ji = 20; if(ji >= 20){ console.log('恭喜你,吃鸡成功,大吉大利') } alert(666);//下面的代码还会执行
var ji = 20; if(ji>=20){ console.log('恭喜你,吃鸡成功,大吉大利') }else{ console.log('很遗憾 下次继续努力') }
if (true) { //执行操作 }else if(true){ //满足条件执行 }else if(true){ //满足条件执行 }else{ //满足条件执行 }
JavaScript中的逻辑与 && 、逻辑或 ||
//1.模拟 如果总分 >400 并且数学成绩 >89分 被清华大学录入 //逻辑与&& 两个条件都成立的时候 才成立 if(sum>400 && math>90){ console.log('清华大学录入成功') }else{ alert('高考失利') }
//2.模拟 如果总分>400 或者你英语大于85 被复旦大学录入 //逻辑或 只有有一个条件成立的时候 才成立 if(sum>500 || english>85){ alert('被复旦大学录入') }else{ alert('高考又失利了') }
switch
var gameScore = 'better'; switch(gameScore){ //case表示一个条件 满足这个条件就会走进来 遇到break跳出。break终止循环。如果某个条件中不写 break,那么直到该程序遇到下一个break停止 case 'good': console.log('玩的很好') //break表示退出 break; case 'better': console.log('玩的老牛逼了') break; case 'best': console.log('恭喜你 吃鸡成功') break; default: console.log('很遗憾') }
while循环
循环三步走:
1.初始化循环变量
2.判断循环条件
3.更新循环变量
var i = 1; //初始化循环变量 while(i<=9){ //判断循环条件 console.log(i); i = i+1; //更新循环条件 }
do-while语句
//不管有没有满足while中的条件do里面的代码都会走一次 var i = 3;//初始化循环变量 do{ console.log(i) i++;//更新循环条件 }while (i<10) //判断循环条件
for循环
for(var i = 1;i<=10;i++){ console.log(i) }