一、<script>标签的使用
JavaScript可以直接嵌入网页中,也可以进行网页分离。
直接嵌入时,用<script type="text/javascript"></script>标签标记,其中的type=”text/javascript”属性可以省略。
引用外部文件进行网页分离时,使用<script src="js/index.js" type="text/javascript"></script>进行连接。
为了防止出现乱码的情况,在js的编写中尽量少出现或者不出现中文。
二、js的基本语法
js变量分为局部变量和全局变量,要了解局部变量和全局变量的区别之前,要先了解js的数据类型、变量声明和方法声明。
1.js的6种基本数据类型
1)boolean简称bool,即布尔类型,用于判断真假的类型。
2)undefined,未定义类型。
3)null,空值类型。
4)object,对象类型。
5)number,数字类型。
6)string,字符串类型。
在这6种基本数据类型中,object类型和null类型为引用类型,其余四中均为值类型。
2.声明变量
变量的声明格式是:关键字+“空格”+变量名称
js里声明变量的关键字是var(需要注意的是在js的编写中是区分大小写的)
在使用变量之前,一定要进行变量初始化,也就是我们常说的赋值。赋值有两种方式,1)直接赋值。如“var stu=100;”。2)使用前赋值。如“var sum;sum=0;”。
js的6种基本数据类型的声明举例:
var a=true;
var b=undefined;
var c=null;
var d=new Studen();
var e=20;
var f="abcd";
在变量里,我们可以使用typeof操作符检测所写变量是否为以上6种基本数据类型,但不能检测它们属于值类型还是引用类型。还可以使用instanceof判断两边的类型是否一致,检测的是原型链里的构造函数。
检测使用的代码:
console.log(typeof(a));
console.log(a instanceof b);
3.声明方法
方法的声明格式是:关键字+“空格”+方法名称(){}
function student(){
console.log("本校学生");
}
student();
student();是调用该方法,console.log指在控制台输出。
4.全局变量与局部变量
通过目前所学习的知识,我们可以用变量的位置来区分全局变量和局部变量。
var sex="性别";
name();
function name(){
var people="kiki";
console.log(people);
console.log(sex);
}
function abc(){
console.log(people);
console.log(sex);
}
sex的变量是在外部定义,两个方法均可以使用该变量,但是people的变量只在name方法中被定义,运行后的结果中,abc方法无法使用people的变量值。
通过这些,我们将在<script>中直接定义的变量称为全局变量,在function内部中定义的变量称为局部变量。全局变量在任何方法中都可以使用,而局部变量只限方法自己使用,其他方法在未给予权限时不能使用。
在调用方法时要注意,确保调用的方法中变量是初始化的。
name();
var people="kiki";
var sex="性别";
function name(){
console.log(people);
console.log(sex);
}
在上述语句中,调用方法时,系统直接进行方法的读代码,中间的两句变量定义是未被执行的,所以此时的运行结果是没有值的,输出会显示undefined。
三、函数(方法)及其带参和返回值
1.函数不带参和带参
//不带参函数
function hanshu(){
console.log("abc");
}
hanshu();
//带参函数
function Stu(name,sex,age){
console.log(name);
console.log(sex);
console.log(age);
}
Stu("kiki","女","18");
2.两种匿名函数的不带参和带参
匿名函数分为两种,我们按照其运行方式称之为调用函数和自执行函数。
1)调用函数
//调用函数不带参
var a= function () {
console.log("koko");
}
a();
//调用函数带参
var b= function (x,y,z) {
console.log(x);
console.log(y);
console.log(z);
}
b("one","two","three");
2)自执行函数
//自执行不带参
(function () {
console.log("121")
})();
//自执行带参
(function(yi,er,san){
console.log(yi);
console.log(er);
console.log(san);
})("一","二","三");
3.函数的返回值
函数都可能存在返回值,使用return语句。
//函数返回值
function one(){
return "123";
}
console.log(one());
//调用函数返回值
var two=function (){
console.log("1");
return "10";
}
console.log(two());
//函数返回值,可进行变量定义,而后输出该变量
var x;
function three(){
x=100;
return x;
}
var y=three()
console.log(y);
//自执行函数返回值
var z;
var four = (function () {
z = 10 + 5;
return z;
})();
console.log(four);
四、js的操作运算符
1.算数运算符:+、 - 、*、 / 、% 、++、 --
其中要注意a++是先使用后自增,++a是先自增后使用;a--是先使用后自减,--a是先自减后使用。
2.类型的强制转换:parseInt强制转换为整型,parseFloat强制转换为小数点型。
3.比较运算符:> 、< 、>= 、<=、== 、!=
在比较运算符中还要了解=、==、===的区别,=表示赋值,==表示判断两边值是否相等,===表示判断两边值是否相同切类型是否相同。
4.逻辑运算符:||(或)、&&(与)、!(非)
5.三元运算符:条件?true:false;即若条件为真则运行true中所写的代码,否则运行false中所写的代码。
3<6?document.write("正确"):document.write("错误");
document.write()表示在页面上输出。
五、循环结构
循环结构分为for循环、while循环和do while循环。
//for循环
var s=0;
for(var i= 0,a=10;i+a<20;i++){
s+=(i+a);
console.log(s);
}
//while循环
var a=0;
while(a<10){
a++;
console.log(a);
}
//do while循环
var a=0;
do{
a++;
console.log(a);
}while(a<10);
其中,while循环是先判断后执行,若条件不符合,可能执行0次;do while循环是先执行后判断,所以至少会执行一次。
在循环语句中,break表示跳出当前循环并终止整个循环;continue表示跳出并终止当前循环,进入下一次循环。