js 概述

1、JavaScript 概述


1、什么是Javascript


JavaScript 简称为 JS，是一种运行于专门的JS解释器/引擎中（嵌入html中在浏览器的脚本语言具有java和c类似的语法）的 解释型脚本语言

一种网页编程技术，用来向html页面 添加交互行为

直接嵌入html页面，由 浏览器解释执行代码，不进行预编译

2、JS发展史


1、1992年Nombas开发了一款脚本语言，可以运行在网页中的，名称C--，更名为 ScriptEase


2、1995年Netscape(网景)为自己的Navigator2.0浏览器开发了另一款脚本语言-LiveScript，更名为 JavaScript


3、1996年，Microsoft，为自己的IE3.0发布了JavaScript克隆版本 JScript


4、1997年，Netscape找到了ECMA(欧洲计算机制造商协会)，将JS的核心部分提交给了ECMA，从此JS的核心更名为 ECMA Script，简称：ES






JS的组成：


1、核心 - ECMAScript


包含了最基本的JS的语法规范


2、文档对象模型


Document Object Model -> DOM


允许JS操作HTML网页上的内容


由W3C制定规范


3、浏览器对象模型


Browser Object Model -> BOM


允许JS操作浏览器


2、使用JS


1、使用元素的事件执行JS脚本代码


事件：用户在元素上所激发的一些行为操作


onclick:当用户点击元素时要做的操作


语法：


<ANY οnclick="JS脚本代码">


JS脚本代码：


console.log("向控制台输出一句话");


练习：


1、创建一个网页


2、创建 button，div 元素


3、分别为 button 和 div 处理 onclick 的事件


点击button时：控制台上打印输出 "点击了Button"






点击div时：控制台上打印输出 "我的第一个JS程序"


2、嵌入在网页中的<script></script>


语法：


<script></script>


特点：


网页加载时即开始执行


document.write("...");向网页内容区域输出一句话


注意：如果将document.write放在按钮中执行的话，则会刷新网页的内容区域(清空)


3、将JS脚本写在外部的JS文件中


1、创建一个js文件(***.js),并编写JS脚本


2、在使用JS文件的网页上，对js文件进行引入


<script src="js文件路径"></script>


注意：


在引入JS文件的标记中，不能编写JS代码


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


console.log();


</script>


以上写法是错误的!!


练习：（5分钟）


1、使用元素事件方式，向控制台中输出一句话："我的第一个JS练习"


2、使用<script></script>方式，向网页中输出一句话"我的第一个JS练习"


3、使用外部JS文件的方式，执行一个操作   window.alert('我的第一个JS练习')


3、JS的基础语法


1、语法规范


1、JS都是由语句来组成的


1、由运算符，表达式，关键字 来组成


2、严格区分大小写


console.log();


Console.log();//错误


3、每一条语句必须以 ; 表示结束


console.log();


console.log();


a=3+5;


b=7+3;


2、注释


单行：//


多行：/* */


4、JS中的变量 和 常量


1、变量


1、什么是变量


表示的是JS中一个可以变化的数据


2、声明变量


声明：var 变量名;


赋值：变量名 = 值;


声明并赋值：var 变量名=值;






注意：


1、在声明变量时，尽量使用var关键字，如果省略，也可以，但容易出问题


2、声明变量如果未赋值的话，默认值为 undefined


3、变量的命名规范


1、不能是JS中的关键字或保留关键字


2、由字母，数字，下划线 _ 以及$组成


var _name;


var $;


var u_name;


var u-name; //错误


3、不能以数字开头


4、尽量不要重复


5、尽量见名知意


var a;


var age;


6、如无特殊需求的话，尽量使用小驼峰命名法


var name;


var age;


var userName;


2、常量


1、什么是常量


一经声明就不允许被修改的数据就是常量


2、语法


const 常量名=值;


注意：


1、常量声明好之后不允许修改，所以一定要赋初始值


2、常量名一般采用全大写形式






练习：


1、创建一个网页05-const-exercise.html


2、声明一个常量PI，赋值为 3.14


3、声明一个变量r，表示一个圆的半径，随意赋值


4、通过PI和r计算圆的周长，并打印输出


l = 2*PI*r


5、通过PI和r计算圆的面积，并打印输出


s = PI * r * r






输出格式(控制台)：


半径为...的圆的周长是...


半径为...的圆的面积是...


四舍五入保留小数：


var l = 3.1415926;


l=l.toFixed(2);


5、数据类型


1、存储空间单位


1、bit - 位       8bit = 1byte


2、byte - 字节    1024byte = 1kb


3、kb - 千字节    1024kb = 1mb


4、mb - 兆        1024mb = 1gb


5、gb             1024gb = 1tb


6、tb


2、数据类型的作用


约束了数据在内存中所占的空间大小


3、JS数据类型分类


1、基本数据类型


1、number类型


数字类型，可以表示32位(4字节)的整数以及64位(8字节)的浮点数


范围 ：-2147483648 ~ 2147483647(不确定)


整数：


表示十进制，八进制，十六进制


十进制：var num = 10;


八进制：var num = 010;


十六进制：var num = 0x10;


小数：


小数点计数法：var num = 123.456;


指数计数法：var num = 1.5e2


2、string


字符串


由Unicode字符，数字，标点符号组成


1、查看字符的Unicode码


var str = "张";


var uCode=str.charCodeAt().toString(16);


2、如何将Unicode码转换成对应的字符？？


已知Unicode码：5f20


var str = "\u5f20";


console.log(str);


3、中文范围


"\u4e00" ~ "\u9fa5"


4、转义字符


\n : 换行


\t : 制表符


\" : "


\' : '


\\ : \


3、boolean类型


布尔类型，只用于表示(true)或(false)


注意：


在参与到数字运算时，true当作1运算，false当作0运算


var r = 1 + true; // 结果为 2


var r = 25.786 * false; // 结果 0


4、查看数据类型


使用 typeof() 或 typeof 都可以查看变量的数据类型


2、引用数据类型


4、数据类型转换


JS是属于弱类型的编程语言


var str="字符串";//str 是 string 类型的


str = 15;//str 是 number 类型


1、隐式转换


不同类型的数据在做加法运算时，会进行自动转换


1、数字 + 字符串 ：将数字转换为字符串


var num = 15; // number


var str = "18"; // string


var r = num + str; //1518






var result = "15"+18+15;//151815


var result = 15+18+"15";//3315


2、数字 + 布尔 ：将布尔类型转换为数字


true 当 1 运算


false当 0 运算


var r = 35 * false; // 0


3、字符串 + 布尔：将布尔转换为字符串


var result = "你好"+false;


结果：你好false


4、布尔 + 布尔 ：将布尔转换为数字


var r = true + false;


结果为：1


2、强制转换(转换函数)


1、toString()


将任意类型的数据转换成字符串，并返回转换后的结果


语法：


var r = 变量.toString();


2、parseInt()


作用：将指定的数据尽量转换成整数，如果实在无法转换的话，则返回NaN(Not a Number)


ex:


1、var r = parseInt("13");


r : 13


2、var r = parseInt(13.5);


r : 13


3、var r = parseInt("13你好!!");


r : 13


4、var r = parseInt("你好13");


r : NaN


3、parseFloat()


作用：将指定的数据转换为小数


转换原理与parseInt相同，能够多转换 . 以及 .后面的数字


1、var num = parseFloat("35.57");


num : 35.57


2、var num = parseFloat("Hello35.5");


num : NaN


3、var num = parseFloat("35.5Hello");


num : 35.5


4、Number()


作用：将指定的数据转换为数字，只要包含非法字符，结果就为 NaN


1、var r = Number("35.52");


r : 35.52


2、var r = Number("35ABC");


r : NaN


3、var r = Number("ABC35");


r : NaN


练习：(5分钟)


1、创建一个网页08-dateType-exercise.html


2、弹出一个输入框


var input = prompt("请输入一个数据");


input变量中，保存的就是用户输入的数据


3、将输入的数据 +10 ，打印出计算后的结果


4、使用 typeof 函数查看输入的数据的数据类型是什么


5、将输入的数据转换为数字，再+10查看结果


6、运算符


1、算数运算符


1、+，-，*，/，%


5 / 2 : 2.5


5 % 2 : 1


2 % 5 : 2






var num = 1234;


var ge = num % 10;






num = parseInt(num / 10); //num = 123


var shi = num % 10;


2、++，--


++：自增运算符，在本身数据基础上做+1操作


--：自减运算符，在本身数据基础上做-1操作


前后缀：


var num = 10;


num++;


++做后缀,先使用num的值,使用完成后再自增


ex:


var num = 10;


console.log(num++); //输出：10


//先输出num的值，再做自增操作


console.log(num);//输出：11


++num;


++做前缀,先对num进行自增，再使用num的值


ex:


var num = 10;


console.log(++num);//输出：11


console.log(num);//输出：11





var num = 5;


          5     (6)6    6(7)    (8)8    8


var result=num+ ++num + num++ + ++num + num;


结果：33


2、关系运算符


>,<,>=,<=,==,!=,===,!==


1、10 > 5 : true


2、"10" > 5


运算符两端如果有一个数字的话，另外一个自动会通过Number()进行转换，然后再比较大小






"3">5 : false


3、"10a" > 5 : false


4、"10a" < 5 : false


NaN 除了 != 以外，其他的比较都是 false


5、"10" > "5" : false


比较 "1" 与 "5" 的Unicode码


6、"张三丰">"张无忌" ：false


比较 "三" 与 "无" 的Unicode码


三：19977


无：26080


=== ： 


判断数据类型 和 数值 必须都相等时，结果为true


3、逻辑运算符


!:非，对现有条件取反 等同于Python not


&&:逻辑与 等同于Python and


||:逻辑或 等同于Python or






条件1 && 条件2


1、条件1为true，条件2为true


整体结果为 true


2、条件1为true，条件2为false


整体结果为 false


3、条件1为false，条件2为true


整体结果为 false


4、条件1为false，条件2为false


整体结果为 false


条件1 || 条件2


1、条件1：true，条件2：true


结果：true


2、条件1：true，条件2：false


结果：true


3、条件1：false，条件2：true


结果：true


4、条件1：false，条件2：false


结果：false






练习：


闰年条件：


能被4整除，但不能被100整除的年份，或能被400整除


1、从弹框中录入一个数字表示年份


2、判断该年是否为闰年


如果是闰年的话：输出 true


否则 ：输出 false


4、条件运算符


语法：? :


条件表达式 ? 表达式1 : 表达式2;






判断条件表达式的结果，如果结果为true，则运行表达式1的内容，否则运行表达式2的内容


7、流程控制


1、程序的结构


1、顺序结构


2、分支结构


3、循环结构


2、分支结构


1、if结构


1、if结构


语法：


if(条件){


语句块


}


2、if ... else 结构


if(条件){


语句块1


}else{


语句块2


}


3、else...if结构


语法：


if(条件1){


语句块1


}else if(条件2){


语句块2


}... else if(条件n){


语句块n


}else{


语句块n+1


}


2、switch结构


等值判断


语法：


switch(变量){


case 值1:


语句块1...


break; //可选，跳出 switch 结构


case 值2:


语句块2...


break; //可选






... ...


default:


语句块n;


所有的case都未匹配上时，才执行default


}






注意：


1、如果不增加break的话，则从匹配的case开始，向下依次执行，直到结束或碰到break为止






练习：


从弹框中录入 1-7 任意一个数字表示星期1~星期日


输入 1：输出 今天吃红烧肉


输入 2：输出 今天吃红烧鱼


输入 3：输出 今天吃红烧排骨


输入 4：输出 今天吃红烧甲鱼


输入 5：输出 今天红烧皮皮虾


输入 6：输出 今天休息


输入 7：输出 今天休息










作业：


1、从弹框中录入一个字符，判断该字符是否为数字，是否为汉字，是否为英文


ex:


从弹框中录入：5


控制台输出：输入的字符是数字






从弹框中录入：k


控制台输出：输入的字符是英文






从弹框中录入：你


控制台输出：输入的字符是汉字


2、从弹框中分三次输入 年，月，日


判断该日是该年的第多少天