JavaScript(1)：基础语法

dawn

已于 2022-10-11 21:04:32 修改

阅读量112

点赞数 1

分类专栏： JavaScript 文章标签： javascript html

于 2021-09-28 22:06:57 首次发布

本文链接：https://blog.csdn.net/dawn0718/article/details/120538555

版权

JavaScript 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

1、注释

　　单行注释： // 注释语句

　　多行注释： /* 注释语句 */

2、数据类型

　　数值型：number，凡是数字都是数值型，不区分整数和小数。

　　字符串：string，凡是用单引号或者双引号包裹起来的内容全是字符串

　　布尔：boolean（true、false）

　　对象类型：object（特殊取值null）

　　未定义型：undefined

3、变量名区分大小写！！！（重点）

　　①只能由字母、数字、_（下划线）、$（美元符号）组成。

　　②不能以数字开头。

　　③命名中不能出现-（减号），不能和关键字冲突。

4、查看数据类型命令

　　typeof(value); 或者typeof value; 返回这个变量的类型。

　　说明 : 同一个变量, 可以进行不同类型的数据赋值.

5、比较符号

　　> 　>=　 <　 <=　 !=

　　== 等于（只比较内容）

　　=== 恒等于（比较内容的同时还要比较数据类型）

　　注意：关系运算符返回的结果只有两个：true / false

6、逻辑比较符号

　　&& 　与　true&&false结果为false

　　|| 　或　true||false结果为true

　　! 　非　!true结果为false

　　false（理解）：false, 0,null, undefined

　　true（理解）：true, 非0,非null,非undefined

7、三元运算符

　　条件？表达式1：表达式2

　　如果条件为true，返回表达式1的结果

　　如果条件为false，返回表达式2的结果

　　举例：

　　　　console.log(9? "true" : "false");       // true
　　　　console.log(0? "true" : "false");       // false
　　　　console.log(1? "true" : "false");       // true
　　　　console.log(-1? "true" : "false");       // true
　　　　console.log(''? "true" : "false");       // false
　　　　console.log(""? "true" : "false");       // false
　　　　console.log("0"? "true" : "false");       // true

8、if条件判断

　　if(条件){……};

　　if(条件){……} else {……};

　　if(条件1){……} else if(条件2) {……} else if(条件3) {……} else {……};

　　测试代码：

　　var MathScore = 77;
　　if (MathScore >= 95) { console.log("优秀"); } else
　　if (MathScore >= 85) { console.log("良好"); } else
　　if (MathScore >= 60) { console.log("及格"); } else
　　{ console.log("不及格"); }

　　注意编写格式：

　　var MathScore = 77;
　　if (MathScore >= 95) { 
        console.log("优秀");
    } else if (MathScore >= 85) { 
        console.log("良好");
    } else if (MathScore >= 60) { 
        console.log("及格"); 
    } else { console.log("不及格"); }

　　其实，这样都不方便查看，我采用下面的格式：

		var MathScore = 77;
		var txtResult='不及格';
		if(MathScore >= 95) { txtResult="优秀"; }
		if(MathScore >= 85 && MathScore<95) { txtResult="良好"; }
		if(MathScore >= 60 && MathScore<85) { txtResult="及格"; }		
		console.log(txtResult);

9、switch分支结构

　　基本语法：

　　switch(表达式){
	　　case 常量表达式1:
	　　　　语句块1
	　　　　break;
	　　case 常量表达式2:
	　　　　语句块2
	　　　　break;
	　　　　......
	　　default:
	　　　　语句块n
	　　　　break;
　　}

　　测试代码①：

        var Act = 4;
        switch(MathScore){
            case 4:
                console.log("4");
                break;
            case 3:
                console.log("3");
                break;
            case 2:
                console.log("2");
                break;
            case 1:
                console.log("1");
                break;
            default:
                console.log("无效操作");
                break;
        }

　　测试代码②：

		switch(strCondition){
			case "情况1":
				console.log('这是第一种情况：1');
				break;
			case "情况2":
				console.log('这是第二种情况：22');
				break;
			case "情况3":
				console.log('这是第三种情况：333');
				break;
			default:
				console.log('例外情况：others');
				break;
		}

　　switch的注意事项:

　　1、常量表达式的类型(case语句后的值)必须是整型或可以转变为整型的值(short、char和int类型)。（这个是误导，我测试字符型也是可以的）

　　2、break关键字的意思是中断，指结束switch语句，break语句为可选，最好写上。

　　3、default语句可以写在switch语句中的任意位置，最好还是写在最后。

　　4、case语句可以有任意多句，可以不用加括号“{}”。

10、循环结构 while、do-while、 for

　　while(循环条件){循环体;}

　　do{循环体;}while(循环条件);

　　for(循环变量赋初值;循环条件;循环变量增值){循环语句;}

11、自定义函数

　　function 函数名(形式参数){函数体}

　　调用函数：函数名(实际参数);

　　①函数只有被调用后才会执行

　　②如果函数需要返回值可直接使用return返回。

　　③如果函数需要传递参数，不需要指定参数的类型。

　　④出现二个重名的函数名，后者会把前面的覆盖掉。

12、匿名函数

　　function(形式参数){函数体}

　　调用方式：将匿名函数赋值给一个变量，通过变量名调用函数。

　　定义函数并赋值给变量：var fn = function(形式参数){函数体}

　　调用函数：fn(实际参数);

13、JavaScript事件

　　事件三要素：

　　①事件源：被监听的html元素；

　　②事件类型：具体动作，例如鼠标点击事件，敲击键盘事件等；

　　③执行指令：事件触发后执行的代码

　　语法格式：事件源.事件类型=执行指令（一般使用函数）

14、常用事件

　　页面事件

　　载入页面onload

　　卸载页面onunload

　　<body οnlοad="函数名()">　　或者　　window.onload = 函数名;

　　事件名称　　描述

　　onabort　　图像的加载被中断

　　onblur　　元素失去焦点

　　onchange　　域（元素）的内容被改变

　　onclick　　当用户点击某个对象时调用的事件

　　ondblclick　　当用户双击某个对象时调用的事件

　　onerror　　在加载文档或图像是发生错误

　　onfocus　　元素获得焦点

　　onkeydown　　某个键盘按键被按下

　　onkeypress　　某个键盘按键按下并松开

　　onkeyup　　某个键盘按键被松开

　　onload　　页面或者图片完成加载

　　onmousedown　　鼠标按钮被按下

　　onmousemove　　鼠标被移动

　　onmouseout　　鼠标从某元素移开

　　onmouseover　　鼠标移到某元素之上

　　onmouseup　　鼠标按键被松开

　　onreset　　重置按钮被点击

　　onresize　　窗口或框架被重新调整大小

　　onselect　　文本被选中

　　onsubmit　　确认按钮被点击

　　onunload　　用户退出页面

测试代码：（获取鼠标在div中的位置信息）

<div id="demo1" style="width:300px;height:300px;left: 12px;right: 19px;background-color: cadetblue;">123</div>
<div id="demo2" style="width:300px;height:300px;left: 12px;right: 19px;background-color: coral;">456</div>

<script>
    var div1 = document.getElementById('demo1');
    //var div1 = document.getElementsByTagName('div')[0];
    div1.onmousemove = function (event) {  
        event = event || window.event;  
        //获取鼠标在整个页面的位置  
        var pagex = event.pageX || scroll().left + event.clientX;  
        var pagey = event.pageY || scroll().top + event.clientY;  
        //获取盒子在整个页面的位置  
        var DivX = div1.offsetLeft;  
        var DivY = div1.offsetTop  
        //获取最终位置  
        var MouseX = pagex - DivX;  
        var MouseY = pagey - DivY;  
        this.innerHTML = '鼠标X：'+MouseX+'px\n鼠标Y：'+MouseY+'px';
    }
</script>

15、this

　　window是JavaScripts中的"老大"，这里的内容很多，要多练习掌握。

16、setTimeout与setInterval

　　setTimeout(表达式,延时时间)，意思是在载入后，在延迟时间后执行一次表达式。
　　setInterval(表达式,交互时间)，意思是在载入后，每隔交互时间就执行一次表达式。