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