Javascript入门

最新推荐文章于 2025-02-09 23:16:16 发布

Always_Love

最新推荐文章于 2025-02-09 23:16:16 发布

阅读量148

点赞数

分类专栏： JS 入门

本文链接：https://blog.youkuaiyun.com/Always_Love/article/details/103354094

版权

入门同时被 2 个专栏收录

33 篇文章

订阅专栏

15 篇文章

订阅专栏

最近几天开始了Javascript的学习，从最基础的语句语法入手，边学习边实践，效果还不错。
一、基本知识
输出：
alert() 弹框输出
confirm() 带确定取消按钮的弹框
document.write() 在文档流中输出
document.getElementById.innerHTML修改页面中的html元素
console.log() 在调试平台中输出

输入：
1、prompt(“提示信息”,默认值)；弹框输入
2、页面表单元素输入值；innerHTML提取

声明变量
var x=值；多个变量之间逗号间隔
+相加，连接

数据类型
数字（number），字符串(string)，布尔(boolean)，数组(array)，对象(object)，空NULL ，未字义类型(undefined)

对象：
document.getElementById(“id名”)；
document.getElementsByClassName(“类名”)[索引值]；

对象.innerHTML=新值；
获取值方式：
针对html元素
对象.innerHTML;
对于表单元素:
对象.value

innerText 提取文本值
innerHTML 提取中间内容包含标签元素

函数：
定义语法：
function 函数名(){
//函数体
}
函数调用：
< 事件＝“javascript:函数”></>
触发事件＝函数名（）

对象.事件＝function(){}

事件：
onclick 点击事件
onmouseover 鼠标悬停事件
onmouseout 鼠标离开事件
onload事件页面加载时调用
onfocus事件获取焦点时
onblur事件失去焦点时
onchange事件 HTML元素发生改变时触发

更改样式：
修改属性值
对象.属性名＝属性值
修改CSS样式
对象.style.样式名＝样式值样式名（驼峰式写法 font-size:fontSize）

变量的作用域
局部变量在函数体内，函数结束，局部变量消失
全局变量在函数外部，页面关闭，全局变量消失

算术运算符
+－*/ % ++ －－
a++和++a区别：a++先赋值，后自加，++a先自加，后赋值
赋值运算符
＝ +＝－＝ *＝ /= %=
比较运算符
== 相等
=== 绝对相等
！＝！＝＝ > < >= <= 结果都为布尔值
逻辑运算符
&& || !
与运算：当两边都为true时，结果为true
或运算：当有一边为true时，结果为true
非运算：你为true,结果为flase

条件运算符
语法：
条件?条件成立时输出内容：条件不成立时输出内容

条件判断语句：
if(条件){
条件成立时执行语句
}else{
条件不成立时执行语句
}

switch语句
语法：
switch(判断条件){
case 值：
执行语句；
break;
default:
其他情况下执行语句；}

break跳出循环
continue 跳出当前循环

for循环
语法：
for(初始条件;终止条件;变量变化的条件)
{
执行语句；
}

for嵌套
语法：
for(初始条件;终止条件;变量变化的条件)
{
执行语句；
      for(初始条件;终止条件;变量变化的条件)
         {
                  执行语句；
                     }
}
循环：
while

do while
区别：当条件不成立时，do while至少会执行一遍

DOM(文档对象模型)
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。通过 DOM，你可以访问所有的 HTML 元素，连同它们所包含的文本和属性。

getAttribute(属性名) 获取元素属性
setAttribute(属性名，属性值) 设置元素属性

获取子节点方式
childNodes 包含空白节点
children 不包含空白节点

子节点个数
.childNodes.length
.children.length

获取对应节点方式
childNodes[索引号]
children[索引号]

父节点：
parentNode

第一个子元素 firstChild
最后一个子元素 lastChild
前一个兄弟元素 previousSibling
后一个兄弟元素 nextSilbling
添加元素 appendChild 添加到内部后面
创建元素 ps=document.creatElement(“p”);
赋属性值方式
1）ps.属性名＝属性值
2）ps.setAttribute(属性名，属性值)
在节点前插入元素 insertBefore(新节点，参考的节点)
父元素.insertBefore(新元素，参考元素)

删除元素
父元素.removeChild(子元素)
替换元素
父元素.replaceChild(替换的新元素，被替换的旧元素)

二、练习
1、简易留言板
代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        h1{
            text-align: center;
        }
        .one,.two{
            width:70%;
            margin:auto;
        }
        .con{
            width:100%;
            height:100px;
            border:solid 5px orange;
        }
        .savebtn{
            float:right;
        }
        .two p{
            height:50px;
            border-bottom:dotted 1px #aaa;
        }
        .two p span{
            float:right;
            color:red;
        }
    </style>
</head>
<body>
<h1>留言板</h1>
<div class="one">
    <textarea name="" id="" cols="30" rows="10" class="con"></textarea>
    <br/>
    <button class="savebtn">提交</button>
    <br/>
</div>
<hr/>
<div class="two"></div>
<script>
    var btn=document.getElementsByClassName("savebtn")[0];
    var show=document.getElementsByClassName("two")[0];
    btn.onclick= function () {
        var con=document.getElementsByClassName("con")[0].value;
        var ps=document.createElement("p");
        var twos=document.getElementsByClassName("two")[0].children;
        var i=twos.length+1;
        ps.innerHTML=i+"<i class='lou'>楼</i>"+"<br/>"+"<span class='del'>删除</span>"+con;
        show.appendChild(ps);
        document.getElementsByClassName("con")[0].value="";
        var dels=document.getElementsByClassName("del");
        for(var x=0;x<dels.length;x++){
            dels[x].onclick= function () {
                show.removeChild(this.parentNode);
            }
        }
    }
</script>
</body>
</html>

效果：
在这里插入图片描述 2、简易信息登记系统
代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        h1,h2{
            text-align: center;
        }
        div{
            width:50%;
            margin: auto;
        }
        table{
          border:solid 1px #000;
            margin: auto;
        }
    </style>
</head>
<body>
<h1>登记</h1>
<div>
姓名：<input type="text" id="username"/>
年龄：<input type="number" id="age"/>
电话：<input type="tel" id="tel"/>
<input type="button" value="提交" id="btn"/><br/>
</div>
<hr/>
<h2>信息表</h2>
<table border=1 cellpadding="0" cellspacing="0" width="90%">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>电话</th>
        <th>备注</th>
    </tr>
</table>
<script>
    var i=1;
var btn=document.getElementById("btn");
    var tabels=document.getElementsByTagName("table")[0];
    btn.onclick=function(){

        var names=document.getElementById("username");
        var ages=document.getElementById("age");
        var tels=document.getElementById("tel");

        var trs=document.createElement("tr");
        trs.innerHTML="<td>"+i+"</td><td>"+names.value+"</td><td>"+ages.value+"</td><td>"+tels.value+"</td><td><span class='del'>删除</span></td>"
        i++;
        tabels.appendChild(trs);
       names.value=null;
       ages.value=null;
       tels.value=null;

        var dels=document.getElementsByClassName("del");
        for(var x=0;x<dels.length;x++){
            dels[x].onclick=function(){
                console.log(1);
             tabels.removeChild(this.parentNode.parentNode);
            }
        }
    }
</script>
</body>
</html>

效果：
在这里插入图片描述三、总结
刚入门JS，对这些语句的使用和语法的理解需要循序渐进，对于脚本语言来说反馈性还是挺不错的，可以边学边实践，有助于及时发现问题和加深记忆，多使用就能更好地掌握。