前端修炼——JavaScript入门！

其他 2018-10-12 15:05:02 阅读次数: 0


今日内容概述：
JavaScript 概述
变量、数据类型、变量的命名
函数
if 选择语句
js 代码操作标签的样式
点击事件

JavaScript概述

弱类型语言

在网页中 js 主要用于做页面中的动效和用户交互

通过 js 代码操作页面标签的样式、增删改查页面标签

<!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>
    <!-- 第三种页面引入 javascript 方式：外链式 -->
    <script src="js/hello.js"></script>

    <!-- 第二种页面引入 javascript 方式：内嵌式 -->
    <script>
        alert('hello world  hahaha')

    </script>


</head>
<body>
    <!-- 第一种页面引入 javascript 方式：行间事件 -->
    <!-- input 事件属性 onclick 可以以行间的方式写入 js 代码 -->
    <input type="button" value="弹出弹框" onclick="alert('hello world')">


</body>
</html>


变量 、数据类型、变量的命名

var name = “小黑”； 定义变量

alert(name); 输出， 浏览器会弹窗，不推荐使用

console.log(name); 在浏览器控制台输出，推荐使用

数据类型

基本数据类型：

string: 字符串

number: int float 数字类型

​ NAN(not a number): 不是一个数字，字符串除以数字

Boolean： true false 布尔类型

undefined： undefined 类型，变量只声明，不赋值，就是 undefined 类型

null ： 表示空对象

复合数据类型：

数组： []

对象： obj

注释

// 单行注释

/*

多行注释

*/

命名规范

区分大小写

第一个字符必须是字符、下划线 (_) 或者美元符号($)

其他字符可以是字母、下划线、美元符或数字

匈牙利命名风格：

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

<!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>
    <script>
        // 单行注释
        /* 
            多行注释
        */
    
        // 定义变量
        /*
        var iNum01  = 12;  // 整数型
        var sTr = 'asdf';  // 字符串型
        var bIsMove = true;  // 布尔型
        */

        // 三句合成一句，执行效率更高
        var iNum01 = 12,sTr = 'abc',bIsMove = true;
        var iNum02;  // 变量申明，定义时不赋值，它的类型和值都是 undefined

        alert(iNum01);
        alert(sTr);
        alert(bIsMove);
        alert(iNum02)
    
    </script>
</head>
<body>
    
</body>
</html>


函数

// 封装一段具有独立功能的代码，方便复用
// 定义
function 函数名(参数1， 参数2){
	代码。。。。。
	return 返回值；
}

window.onload = function(){}
btn.onclick  = function(){}

预解析: 代码在执行之前，扫描一遍 js 代码中所有的变量和函数

函数中可以直接修改全局变量

return 返回值

一样可以传递参数

<!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>
    <script>
        // 调用函数
        // 函数在下面定义，在上面调用，这个叫做函数的预解析
        fnMyalert();

        // 定义函数
        function fnMyalert(){
            alert('hello');
        }
    
        /* 变量在下面定义，在上面调用，变量的申明会提前，
        此时它的值是 undefined，这个叫做变量的预解析。 */
        alert(iNum01);

        var iNum01 = 12;

        alert(iNum01);  
    </script>

</head>
<body>
    
</body>
</html>


if 选择语句

条件运算符

比较运算符

==、===、>、>=、<、<=、!=、

==：在比较是时候再判断数据值，而不判断数据类型

===：在 比较的时候即判断数据类型也判断数据的值

逻辑运算符：

&&(而且)、||(或者)、!(否)

and or not

switch case default 也可以实现判断

switch (key) {
	case value:                    
		break;
	
	default:
		break;
	}


<!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>
    <script>
        var iNum01 = 12;
        var sNum01 = '12';


        /* if(iNum01==12){
            alert('相等！')
        }
        else{
            alert('不相等。')
        } */
    
        // "==" 默认会将符号两边的变量转换成同一类型，这个叫隐式转换。
        /* if(sNum01==12){
            alert('相等！')
        }
        else{
            alert('不相等。')
        } */
    

        // "===" 不会转换符号两边的变量类型。
        if(sNum01===12){
            alert('相等！')
        }
        else{
            alert('不相等。')
        }

        // && and 与 ，   || or 或,   ! not 非,
        if(6>3 && 10>11){
            alert('都大于')
        }
        else{
            alert('至少有一个不大于')
        }
    
        if(6>3 || 10>11){
            alert('至少有一个大于')
        }
        else{
            alert('都不大于')
        }
    
        if(!6>3){
            alert('6大于3')
        }
        else{
            alert('6不大于3')
        }

    </script>
</head>
<body>
    
</body>
</html>


js 代码操作标签的样式

获取页面中的标签

img = document.getElementById(“id”)

获取标签的属性，给标签设置属性值

动态的改变标签的样式

​ style：行内样式， js 操作麻烦，优先级高

​ className: 类选择器， js 写法简单

给页面中设置标签

​ innerHTML

console.dir 可以获得对象中的所有属性和方法

<!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>
        .style01 {
            font-size: 20px;
            color: #666;
        }
    
    
    </style>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById('div01')
            var oA = document.getElementById('link01')

            // 读取属性值
            var sId = oDiv.id;
            // alert(sId);

            // 写属性值，也叫做设置或者修改属性值
            oDiv.style.color = 'red';
            // 属性名中带 '-' 的要写成驼峰式
            oDiv.style.fontSize = '20px';

            // 操作class属性, class 要写成 className
            oA.className = 'style01';

            // 操作元素包裹的内容
            // 读取元素包裹的内容
            var sTr = oDiv.innerHTML;
            // alert(sTr);

            // 写入也叫作设置或者修改元素包裹的内容
            oDiv.innerHTML = '改变的文字';

            oDiv.innerHTML = '<a href="http://www.jandan.net/ooxx">煎蛋</a>'
        }
    
    </script>
</head>
<body>
    <div id="div01">这是一个div</div>
    <a href="#" id="link01">这是一个链接</a>

</body>
</html>


点击事件

当鼠标在标签上点击时，执行函数中代码

事件源.事件名 = 事件处理函数

onclick() 鼠标单击事件

onload() 整个页面事件

border-radius: 25px; 给边框设置圆角

<!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>换网页背景颜色</title>
    <style type="text/css">
        .set_bg_con{
            width:440px;
            height:40px;
            border:1px solid #ddd;
            margin:40px auto 0;
            background-color:#fff
        }
        .set_text{
            line-height:40px;
            float:left;
            margin:0 20px 0 10px;
            color:#666;
        }
        .style01,.style02,.style03,.style04,.style05,.style06{
            width:30px;
            height:26px;
            float:left;
            margin:8px 5px;
            background: gold;
            cursor:pointer;
        }
        .style01{
            background:#0181cc;
        }
        .style02{
            background:#00b9f1;
        }
        .style03{
            background:#ef8201;
        }
        .style04{
            background:#8fc320;
        }
        .style05{
            background:#e84191;
        }
        .style06{
            background:#ee87b4;
        }
    </style>
    <script type="text/javascript">
    // 点击色块改变网页的背景色，请写出对应的功能代码
    window.onload = function(){
        var s1 = document.getElementById('s1');
        var s2 = document.getElementById('s2');
        var s3 = document.getElementById('s3');
        var s4 = document.getElementById('s4');
        var s5 = document.getElementById('s5');
        var s6 = document.getElementById('s6');

        var bg_con = document.getElementById('bg_con');

        s1.onclick = function(){
            bg_con.style.background = "#0181cc";
        }

        s2.onclick = function(){
            bg_con.style.background = "#00b9f1";
        }

        s3.onclick = function(){
            bg_con.style.background = "#ef8201";
        }

        s4.onclick = function(){
            bg_con.style.background = "#8fc320";
        }

        s5.onclick = function(){
            bg_con.style.background = "#e84191";
        }

        s6.onclick = function(){
            bg_con.style.background = "#ee87b4";
        }
        
    }

    </script>
</head>
<body id="bg_con">
    <div class="set_bg_con">
        <div class="set_text">请选择网页的背景色：</div>
        <div class="style01" id="s1"></div>
        <div class="style02" id="s2"></div>
        <div class="style03" id="s3"></div>
        <div class="style04" id="s4"></div>
        <div class="style05" id="s5"></div>
        <div class="style06" id="s6"></div>
    </div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qyf__123/article/details/82749317
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022