1.JavaScript学习的内容
2.JavaScript简介
2.1简介:
2.2组成:
3.JS基本用法
基本使用:
JS的三种使用方式
1.行内JS
在html标签上直接写js代码
2.内部JS
在script标签中写js代码,script标签可以放在head中或者body中(建议放在body标签最后)
3.外部JS
定义JS文件,通过script标签的src属性引入对应的JS文件
注:如果script标签设置了src属性,则在script双标签之间的JS代码不会生效
JS的基础语法
语句:
1.JS代码一行为单位,代码从上往下执行,一行一条语句
2.语句不加分号结尾,如果一行定义多条语句,每句语句必须以分号结尾。(建议都加分号)
3.表达式不需要以分号结尾,如果加了文化则JavaScript引擎会当做语法执行,生成无用的语句
注释:
//单行注释
/* 多行注释 */
标识符:
规则:
由Unicode字母、_、数字组成、中文组成
(1)不能以数字开头
(2)不能是关键字和保留字
(3)严格区分大小写
规范:
(1)见名知意
(2)驼峰命名或下划线规则
关键字(保留字):
声明变量时,不要使用关键字
变量:
JS是一种弱类型语言,在声明变量时不炫耀指明数据类型,直接用var修饰符进行声明
注:也可以不用var修饰符,直接声明并赋值
变量的声明:
1.先声明在赋值
2.声明并赋值
变量的注意点:
1.如果变量只声明而未赋值,则显示undefined
2.如果变量为声明就使用,则会报错
3.可以使用var同时定义多个变量
4.如果重新声明一个已存在的变量,则无效
5.如果重新声明一个已存在的变量并赋值,则会覆盖
6.JS是一种动态的弱类型语言,可以声明任意数据类型的变量
*变量名提升:
JavaScript引擎的工作方式是先解析代码,获取所有被声明的变量,然后再一行行地运行。
这造成的结果就是,所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量名提升
注:变量名提升只对var命令声明的变量有效,如果变量不是用var声明的,就不会发送变量名提升
数据类型:
定义函数使用function
调用方法:方法名(【参数】)
数据类型
JS是弱类型语言,变量没有数据类型,数据有类型
undefined
值不存在
出现的情况:
1.变量只声明未赋值,值为undefined
2.当定义函数需要形参,调用函数未传递实参时,参数的值为undefined
3.当函数没有返回值,接收值为undefined
null类型
表示空值
注意点:
1.使用typeof操作符测试null返回object字符窜
typeof操作符:判断变量的类型
2.undefined派生自null,所以等值比较返回值是true。未初始化的变量和赋值为null
布尔类型
true和false
数值型
数值型包含两种数值:整型和浮点型
1.所以数字(整型和浮点型)都是以64位浮点数形式储存。
2.在储存数值型数据时自动将可以转换为整型的浮点数值转换为整型
字符窜
1.使用''或""引起来
2.可以使用"+"对字符窜进行拼接
对象类型
数组
var 数组名 = []
对象
var 对象名 = {}
函数
function 方法名(){
}
类型转换:
1.自动类型转换
1.转字符窜型:所有的值转字符窜都是加引号
2.转布尔型:有值为true,无值为false(0位false,非0位true)
3.转数值型:空值是0,非空的数值型字符窜能转换,非数值字符窜转换为NaN
2.函数转换
parseInt() 转整数型
parseFloat() 转浮点型
注:转换时会从值的第零个位置开始找有效数字,直到找到无效数字的位置
parseFloat在转换时会比parseInt多识别一个小数点
3.显示转换
toString() 将值转换成字符窜
toFixed() 保留指定小数位
注:值不能为null
JS为number、boolean、string对象提供了构造方法,用于强制转换数据类型,转换的是值的全部,不是部分
注:可以转换null值
代码:
<button onclick="alert('Hello World!')">按钮</button><br />
<!-- 内部JS -->
<script type="text/javascript">
//alert("这是一个按钮!")
</script>
<!-- 引入外部JS文件 -->
<script src="js/test.js" type="text/javascript" charset="UTF-8"></script>
<script>
//单行注释
/* 多行注释 */
console.log("hello");
console.log("haha");
</script>
<script type="text/javascript">
/* 变量名提升 */
console.log(flag);
console.log(name);
/* 变量的声明 */
var a;
a=1;
console.log(a);
var b=2;
console.log(b);
/* 变量的注意点 */
var c;
console.log(c);
// console.log(d);
var aa,bb,cc=10;
console.log(aa);
console.log(bb);
console.log(cc);
var a;
console.log(a);
var a=10;
console.log(a);
var str="hello word";
var flag="true";
console.log(str);
console.log(flag);
console.log("true");
name = "zhangsan";
console.log(name);
console.log(parseInt("123abc"));
console.log(parseInt("abc123"));
console.log(parseInt("123.4abc"));
console.log(parseInt("123"));
console.log("123");
var a=1;
var b="2";
console.log(a+b);
console.log(a+parseInt(b));
console.log(parseFloat("123abc"));
console.log(parseFloat("abc123"));
console.log(parseFloat("123.4abc"));
console.log(parseFloat("123"));
console.log(parseFloat("123.4.5"));
console.log("=============");
var aa=10;
console.log(aa);
console.log(aa.toString());
var bb=null;
// console.log(bb.toString());
var cc=1.346;
console.log(cc.toFixed(2));
var q= "1";
var w= "a";
var e="123abc";
var r = "123.4";
var t="123.4.5abc";
console.log(Number(q));
console.log(Number(w));
console.log(Number(e));
console.log(Number(r));
console.log(Number(t));
console.log(Boolean("a"));
console.log(Boolean(0));
console.log(Boolean("1"));
console.log(Boolean(null));
console.log(10);
console.log(String(10));
console.log(null);
console.log(String("null"));
/* undefined */
var a;
console.log(a);
function fn01(str){
console.log(str);
}
fn01();
function fn02(){
console.log("fn02...");
}
var b=fn02();
console.log(b);
console.log("===========")
/* null */
var num=1;
var flag=true;
var str= "hello";
console.log(typeof num)
console.log(typeof flag)
console.log(typeof str)
var aa=null;
console.log(typeof aa);
console.log(undefined == null);
var bb;
var cc=null;
console.log(bb == cc);
console.log("===========")
/* 数值型 */
console.log(1==1.0);
var n=1+1.0;
console.log(n);
console.log(1.0);
console.log("===========")
/* 字符窜 */
var s1="hello";
var s2="world";
console.log(s1,s2);
console.log(s1+s2);
</script>
实例: