JavaScript简介:
JavaScript是一门跨平台,面向对象的脚本语言,
来控制网页行为的,它能使网页可交互
W3C标准:网页主要由三部分组成
结构:HTML 表现:CSS 行为:JavaScript
JavaScript和java是完全不同的语言,无论是概念还是设计,但是基础的语法是相似的
JavaScript(简称JS)在1995年由Brenddan发明,并于1997年称为一部ECMA标准,ECMAScript 6(ES6)是最新的JavaScript版本(发布于2015年)
JavaScript引入方式:
内部脚本:
将JS代码定义在HTML页面中
在HTML中,JavaScript代码必须位于<script>与</script>
标签之间
<script> alert("hello JS~"); </script>
提示:
在HTML文档中可以在任意地方,放置任意数量的<script>
一般把脚本置于<body>
元素的底部,可改善显示速度,因为脚本执行会拖慢显示
举例:
<script> alert("hello js"); </script>
右击选择显示的浏览器:
显示如下:
外部脚本:
将JS代码定义在外部JS文件中,然后引入到html页面中
外部文件
:demo.js
alert("hello JS~")
引入外部js文件
:
<script src="../js/demo.js></script>
举例:
创建外部脚本myjs.js:
第一步:书写js代码
alert("hello myjs");
第二步:引入外部脚本
<script src="../js/myjs.js"></script>
显示如下:
注意:
外部脚本不能包含<script>
标签
<script>
标签不能自闭和,如下所示:
若出现srcipt标签自闭和,那么页面效果将无法显示
<srcipt src="../js/myjs.js"/>
书写语法:
1:区分大小写:与java一样,变量名,函数名以及其他一切东西都是区分大小写的
2:每行结尾的分号可有可无
3:注释:
单行注释://注释内容 多行注释:*/注释内容*/
4:大括号表示代码块
if(count==3){ alert(count); }
输出语句:
1:使用window.alert()
写入警告框,window可省略
举例:
<script> window.alert("hello,js1"); </script>
显示如下:
2:使用document.write()
写入HTML输出
举例:
<script> document.write("hello,js2"); </script>
显示如下:
3:使用console.log()
写入浏览器控制台
举例:
<script> console.log("hello,js3"); </script>
在网页右击,然后点击检查:
显示如下:
变量:
JavaScript中用var关键字(varable的缩写)来声明变量
var test=20; test="张三";
JavaScript是一门弱类型语言,变量可以存放不同类型的值
举例:
<script> var test=19; alert(test); </script>
显示如下:
<script> var test=19; test="小明"; alert(test); </script>
显示如下:
变量名需要遵循如下规则:
1:组成字符可以是任意字母,数字,下划线(_)或者美元符号($) 2:数字不能开头 3:建议使用驼峰命名
变量的特点:
1:var的作用域范围很广泛,相当于是一个全局变量
在Java中,定义的变量只在代码块中有效,但JavaScript并非如此
举例:
<script> { var test="你好"; } alert(test); </script>
显示如下:
即使我们在代码块外部访问该变量,也依然可以
2:变量可以重复定义
在Java中同一个变量是不允许重复定义的,但JavaScript并非如此
如下所示:
<script> { var test="你好"; var test=1; } alert(test); </script>
显示如下:
它不但没有报错,而且输出的var变量为第二次定义的,因为第二次定义的把第一次定义的覆盖了
ECMAScript 6新增关键字:
let关键字:
ECMAScript 6新增了let关键字来定义变量
,它的用法类似于var,但是所声明的变量,只在let关键字所在的代码块内有效,且不允许重复声明
举例:
如下所示,在浏览器中打开,会发现页面一片空白,并无警示框出现
<script> { let test=100; } alert(test); </script>
右击点击检查—>控制台,如下所示:
如下所示,在浏览器中打开,会发现页面一片空白,并无警示框出现
<script> { let test=100; let test=10; } alert(test); </script>
右击点击检查—>控制台,如下所示:
const关键字:
ECMAScript 6新增了const关键字
,用来声明一个只读的常量,一旦声明,常量的值就不能改变
举例:
如下所示,在浏览器中打开,会发现页面一片空白,并无警示框出现
<script> { const test=100; test=20; } alert(test); </script>
右击点击检查—>控制台,如下所示:
数据类型:
我们上面所讲的通过var/let/const关键字定义变量是不需要指定数据类型的,但并不代表JavaScript就没有数据类型
JavaScript中分为:原始类型[类似于java中的基本类型]和引用类型
number:数字[整数,小数,NaN(Not a Number)] string:字符,字符串,单双引皆可 boolean:布尔,true,false null:对象为空 undefined:当声明的变量未初始化时,该变量的默认值是undefined
使用typeof运算符可以获取数据类型
number举例:
alert(typeof age);
举例:
<script> //当变量为整型时: var age=10; //当变量为浮点数时: var price=3.14; alert(typeof age); alert(typeof price); </script>
在JavaScript中,无论是整数还是浮点数,其类型均为number类型
显示如下:
string举例:
<script> //当变量为单个字符时: var ch='a'; //当变量为字符串时:既可以使用单引号,也可以使用双引号 var name="张三"; var address='北京'; alert(typeof ch); alert(typeof name); alert(typeof address); </script>
在JavaScript中,无论是单个字符还是字符串,其类型均为string类型
显示如下:
boolean举例:
<script> var a=false; var b=true; alert(typeof a); alert(typeof b); </script>
输出:
null举例:
<script> var obj=null; alert(typeof obj); </script>
显示如下:
注:typeof运算符对于null值会返回"Object",这实际上是JavaScript最初实现中的一个错误,然后被ECMAScript沿用了,现在,null被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值
undefined举例:
<script> var a; alert(typeof a); </script>
显示如下: