JavaScript 学习（二）

最新推荐文章于 2024-07-20 23:54:17 发布

MIREBELLE

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量57

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/MIREBELLE/article/details/117706269

版权

一、JavaScript语法应用方式

1、内嵌式：JavaScript直接写在标签内。

2、内部式：在body标签内用<script></script>写JavaScript。

3、外部式：单独写一个JavaScript文件，后缀名.js，再用<script></script>引入.js文件。

二、JavaScript 程序流程控制

1、分支结构：if结构、switch-case结构

if结构：
if(表达式1){
语句1;
}else if(表达式2){
语句2;
}else{
语句n;
}

switch-case结构：
switch(表达式){
    case 常量表达式1：
        执行代码块1;
        break;         //跳出
    case 常量表达式2：
        执行代码块2;
        break;
    case 常量表达式3：
        执行代码块3;
        break;
    default:
        执行代码块 n+1;
}

2、循环结构：for循环、while循环、do-while循环

循环的四要素：
循环的初始化条件
循环的初始化条件
迭代条件
循环体
for循环：
for(变量=初始值;变量<=结束值;变量=变量加步长){

循环语句；

}

while循环：

while(条件){

循环体语句；

}

do-while循环：
do{

循环语句；

}while(条件)

break与continue：
break:跳出循环

continue:终止本次循环

三、JavaScript 数组

1、数组创建

var array11 = new Array(); //空数组
var array12 = new Array(5); //指定长度，可越界
var array13 = new Array("a","b","c",1,2,3,true,false); //定义并赋值
var array14=[]; //空数组，语法糖
var array15=[1,2,3,"x","y"]; //定义并赋值2、

2、访问与修改

array12[8]="hello array12"; //赋值或修改
console.log(array12[8]);   //取值
            //遍历
            for (var i = 0; i < array13.length; i++) {
                console.log("arrayl3["+i+"]="+array13[i]);
            }
            //枚举
            for(var i in array15){
                console.log(i+"="+array15[i]); //此处的i是下标
            }

3、截取：

var array51=[1,2,3,4,5,6];
            var array52=[7,8,9,0,"a","b","c"];
            //截取，切片
            var array53=array51.slice(2); //从第3个元素开始截取到最后
            console.log("被截取："+array53+"——"+array51);
            var array54=array51.slice(1,4); //从第3个元素开始截取到索引号为3的元素
            console.log("被截取："+array54+"——"+array51);
            //合并
            var array55=array51.concat(array52,["d","e"],"f","g");
            console.log("合并后："+array55);

四、JavaScript 的DOM操作

1、获取dom元素的方法：

document.getElementById() 方法
document.getElementsByName() 方法
document.getElementsByTagName() 方法
document.getElementsByClassName() 方法
2、dom树：

3、dom示例：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>dom</title>
<style>
#box{
width:180px;
height:180px;
background-color:#a81414;
border:1px dashed white;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="btn">按钮</button>
<script>
/*dom操作：*/
/*dom查询*/
/*dom修改*/
/*dom删除*/
var btn=document.getElementById("btn");
console.log(btn);
btn.οnclick=function(){
/*找到id=box的元素 */
var box=document.getElementById("box");
/*给box元素改变背景颜色的样式 */
box.style.backgroundcolor="blue";
/*改变box元素的长宽样式 */
box.style.width=400+"px";
box.style.height=400+"px";
/* 删除*/
box.parentNode.removechild();
}
</script>
</body>
</html>

MIREBELLE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 学习（二）

一、JavaScript语法应用方式1、内嵌式：JavaScript直接写在标签内。<button οnclick="alert('你好 JS');">点我</button> 2、内部式：在body标签内用<script></script>写JavaScript。<script type="text/javascript"> alert(“你好 JS”); </script&gt...
复制链接

扫一扫