JavaScript入门

alin Wang

于 2021-01-19 21:43:17 发布

阅读量135

点赞数 1

文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_41775886/article/details/112853039

版权

JavaScript入门

1. JavaScript引入页面的三种方式

行间事件

<!-- 第一种页面引入js的方式：行间事件 不推荐使用 -->
<div onclick="alert('hello world')">这是一个div</div>

内嵌式

<!-- 第二种页面引入js的方式：内嵌式 部分推荐使用 -->
<script>
	alert("hello world again!!!")
</script>

外链式

<!-- 第三种页面引入js的方式：外链式 推荐使用 -->
<script src="js/hello.js">
	// 在这里写js代码无效
</script>

alert("hello world three!")

2. JavaScript的变量、数据类型及基本语法规范

2.1变量类型

5种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null

1种复合类型：
object

2.2 变量定义

JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。声明变量使用var关键字

var iNum = 123;
var sTr = 'asd';

2.3 变量命名

变量、函数、属性、函数参数命名规范

1、区分大小写
2、第一个字符必须是字母、下划线（_）或者美元符号（$）
3、其他字符可以是字母、下划线、美元符或数字

匈牙利命名风格：

对象o Object 比如：oDiv
数组a Array 比如：aItems
字符串s String 比如：sUserName
整数i Integer 比如：iItemCount
布尔值b Boolean 比如：bIsComplete
浮点数f Float 比如：fPrice
函数fn Function 比如：fnHandler
正则表达式re RegExp 比如：reEmailCheck

<script>  
    // 以下全部是JavaScript的作用范畴
    // 单行注释
    /*
            多行注释
        */

    // 定义变量
    /*var iNum01 = 12;
        var sTr = 'abc';
        var bIsMove = true;*/
    var iNum01 = 12, sTr = 'abc', bIsMove = true;
    // 变量声明但是没有赋值，它的值和类型的undefined
    var iNum02;

    alert(iNum01);
    alert(sTr);
    alert(bIsMove);
    alert(iNum02);

</script>

3. JavaScript函数与预解析

预解析：JavaScript中的函数和变量的定义和提前到代码的一开始，变量的值是undefined，变量的赋值不会提前。

函数使用方法：

<script>
    // 函数调用 -- 可以写在函数定义的前面
    // 函数预解析
    fnMyalert();

    // 定义函数
    function fnMyalert() {
        alert('hello');
    }

    // 在变量的定义前调用一个变量，会得到undefined
    alert(iNum01);
    var iNum01 = 12;
    alert(iNum01);

</script>

4. 获取元素的方法，操作标签

在JavaScript中通过使用内置对象document可以获取标签，并且操作标签的属性

操作元素属性
var 变量 = 元素.属性名读取属性
元素.属性名 = 新属性值改写属性

属性名在js中的写法

html的属性和js里面属性写法一样
“class” 属性写成 “className”
“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!--
    <script>
        // 代码是从上往下执行的，在这里无法找到下面写的div1对象
        document.getElementById("div1").style.color = 'blue';
    </script>
     -->

     <script>
         // 等整个页面加载完之后再执行其中的代码
         window.onload = function(){
             var oDiv1 = document.getElementById("div1");
             oDiv1.style.color = 'blue';
             oDiv1.style.width = '300px';
             oDiv1.style.height = '300px';
             oDiv1.style.background = 'gold';
             oDiv1.style.fontSize = '30px';
             alert(oDiv1.style.color);  // 读出属性的值
         }
    </script>

</head>
<body>
    <div id="div1" style="color: red;">这是一个div</div>

    
</body>
</html>

获取属性的值和操作属性的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .style01{
            font-size: 20px;
            color: red;
        }
        .style02{
            font-size: 30px;
            color: pink;
            text-decoration: none;
        }
    </style>

    <script>
        window.onload = function(){
            var oDiv1 = document.getElementById("div1");
            var oA = document.getElementById("link01");

            // 读取属性值
            var sId = oDiv1.id;
            // alert(sId);
            // 写属性，设置属性
            oDiv1.style.color = 'red';

            var sColor = oDiv1.style.color;
            // 标签里面没有写的属性，读取的是空字符串
            // var sSize = oDiv.style.fontSize;
            // alert(sColor);
            
            // 操作class属性
            oA.className = 'style02';

            // 操作标签包裹的内容
            // 读取标签包裹的内容
            var sTr = oDiv1.innerHTML;
            // alert(sTr);

            // 写标签包裹的内容 -- 给innerHTML赋值
            oDiv1.innerHTML = '改变的文字';
            oDiv1.innerHTML = '<a href="http://www.baidu.com">百度一下</a>';
            oDiv1.innerHTML = '<ul><li>列表文字</li><li>列表文字</li><li>列表文字</li></ul>'
        }
    </script>

</head>
<body>
    <div id="div1">这是一个div</div>
    <a href="#" class="style01" id="link01">这是一个链接</a>
</body>
</html>

5. 事件处理

实现点击按钮改变元素的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        window.onload = function(){
            var oBtn = document.getElementById("btn");
            var oDiv = document.getElementById("div1");

            // function fnChange(){
            //     oDiv.style.width = '200px';
            //     oDiv.style.height = '200px';
            //     oDiv.style.background = 'gold';
            // }
            // fnChange();

            // 在这里不能给函数名后面加()，如果加了括号代表是函数执行
            // 这里表示的是函数与标签的关联
            // oBtn.onclick = fnChange;

            // 匿名函数写法
            oBtn.onclick = function(){
                oDiv.style.width = '200px';
                oDiv.style.height = '200px';
                oDiv.style.background = 'gold';
            }
        }
    </script>

</head>
<body>
    <input type="button" value="改变样式" id="btn">
    <div id="div1">这是一个div</div>
</body>
</html>

6. 网页换肤练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="css/skin01.css" id="link01">

    <script>
        window.onload = function(){
            // 获取link标签的两个按钮标签
            var oLink = document.getElementById("link01");
            var oBtn1 = document.getElementById("btn01");
            var oBtn2 = document.getElementById("btn02");

            oBtn1.onclick = function(){
                oLink.href = 'css/skin01.css'
            }
            oBtn2.onclick = function(){
                oLink.href = 'css/skin02.css'
            }
        }
    </script>

</head>
<body>
    <h1>网页内容</h1>
    <input type="button" value="皮肤一" id="btn01">
    <input type="button" value="皮肤二" id="btn02">
</body>
</html>

7. 条件语句及判断

==号默认会发生隐式转换，即将符号左右两边的变量转换为数字形式再进行对比

var iNum01 = 12;
var sNum01 = '12';
// 此时的sNum01会被转换为数字类型
if(iNum01 == sNum01){
    alert("相等");
}else{
    alert('不相等');
}
// 相等

解决这个问题使用===，此时不发生隐式转换

var iNum01 = 12;
var sNum01 = '12';
// 此时的sNum01会被转换为数字类型
if(iNum01 === sNum01){
    alert("相等");
}else{
    alert('不相等');
}
// 不相等

8. 聊天对话框练习

<!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>Document</title>
    <style type="text/css">
        .talk_con{
            width:600px;
            height:500px;
            border:1px solid #666;
            margin:50px auto 0;
            background:#f9f9f9;
        }
        .talk_show{
            width:580px;
            height:420px;
            border:1px solid #666;
            background:#fff;
            margin:10px auto 0;
            overflow:auto;
        }
        .talk_input{
            width:580px;
            margin:10px auto 0;
        }
        .whotalk{
            width:80px;
            height:30px;
            float:left;
            outline:none;
        }
        .talk_word{
            width:420px;
            height:26px;
            padding:0px;
            float:left;
            margin-left:10px;
            outline:none;
            text-indent:10px;
        }        
        .talk_sub{
            width:56px;
            height:30px;
            float:left;
            margin-left:10px;
        }
        .atalk{
           margin:10px; 
        }
        .atalk span{
            display:inline-block;
            background:#0181cc;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
        .btalk{
            margin:10px;
            text-align:right;
        }
        .btalk span{
            display:inline-block;
            background:#ef8201;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
    </style>
    <script type="text/javascript">      
        // 写出对应功能代码  
        window.onload = function(){
            // 选中所有要操作的标签
            var oWords = document.getElementById("words");
            var oWho = document.getElementById("who");
            var oTalk = document.getElementById("talkwords");
            var oBtn = document.getElementById("talksub");

            // 给发送按钮绑定onclick事件
            oBtn.onclick = function(){
                // 读取下拉框的value属性值
                var sVal01 = oWho.value;
                
                // 读取输入框的值, 也是读取val属性值
                var sVal02 = oTalk.value;
                // 清空oTalk输入框
                oTalk.value = "";
                
                // 不能发空的内容，判断输入框是不是为空
                if(sVal02 == "")
                {
                    alert("发送内容不能为空!请输入聊天内容!");
                    // 结束函数运行
                    return;
                }

                var sTr = "";
                // 判断是A说还是B说
                if(sVal01==0){
                    // A说
                    sTr = '<div class="atalk"><span>A说：'+sVal02+'</span></div>';
                }else{
                    // B说
                    sTr = '<div class="btalk"><span>B说：'+sVal02+'</span></div>';
                }

                // 将拼接的结构的字符串放到words标签中
                oWords.innerHTML += sTr;
            }

        }

    </script>
</head>
<body>
    <div class="talk_con">
        <div class="talk_show" id="words">
            <div class="atalk"><span>A说：吃饭了吗？</span></div>
            <div class="btalk"><span>B说：还没呢，你呢？</span></div>
        </div>
        <div class="talk_input">
            <select class="whotalk" id="who">
                <option value="0">A说：</option>
                <option value="1">B说：</option>
            </select>
            <input type="text" class="talk_word" id="talkwords">
            <input type="button" value="发送" class="talk_sub" id="talksub">
        </div>
    </div>
</body>
</html>

alin Wang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript入门

JavaScript入门1. JavaScript引入页面的三种方式行间事件<div onclick="alert('hello world')">这是一个div</div>内嵌式<script> alert("hello world again!!!")</script>
复制链接

扫一扫