day 028 JavaScript入门

最新推荐文章于 2024-08-03 11:14:26 发布

VisionaryX

最新推荐文章于 2024-08-03 11:14:26 发布

阅读量214

点赞数

分类专栏：学习日志

本文链接：https://blog.csdn.net/Michael_Cool/article/details/79201060

版权

学习日志专栏收录该内容

72 篇文章 0 订阅

订阅专栏

前端三大块，HTML, CSS, JavaScript,今天是JavaScript入门。

介绍JavaScript的页面引入方式，Javascript变量，javaScript获取元素及操作元素属性，JavaScript函数的使用以及条件语句的基本使用。

JavaScript介绍

JavaScript试运行在浏览器的端的脚本语言。
JavaScript主要解决的时前端与用户交互的问题，包括使用交互与数据交互。

前端三大块

HTML:负责页面结构
CSS：负责页面表现
JavaScript：负责页面行为，部分动画效果，页面与用户的交互，页面功能。

JavaScript嵌入页面的方式

元素里属性栏嵌入

<input type="button" name="" onclick="alert('ok!');">

Script标签嵌入

<script type="text/javascript">
alert(‘ok!’);
</script>

外部嵌入

<script type="text/javascript" src="js/index.js"></script>

这里写图片描述

html代码

<!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 type="text/javascript" src="js/01js外部引入.js"></script>

    <!-- 方式2 使用script标签导入 -->
    <script type="text/javascript">
        alert('呵呵呵');
    </script>
</head>
<body>
    <!-- 方式1 在标签属性里写上事件 -->
    <div onclick="alert('嘿嘿嘿')">哈哈哈,点我啊</div>
</body>
</html>

js文件代码

alert('吼吼吼');

变量

JavaScript是一种弱类型的语言，JavaScript的变量类型由它的值来决定。
定义变量需要用到关键字 var

var iNum = 456;
var sStr = 'ABC';

// 同时定义多个变量可以用 ’，’隔开，共用一个‘var’关键字
var inNum = 789, sStr = "apple", bIsgood = true;

变量类型

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

JavaScript语句与注释

一条javascript语句以；结尾


<script type="text/javascript">
var iNum = 123;
var sStr = "123"
function fnAlert(){
    alert(sStr);
    }
fnAlert();
</script>

javascript注释

<script type="text/javascript">
// 单行注释
var iNum = 123;
/*
多行注释
1.。。。
2.。。。
*/
var sStr = 'apple'
</script>

变量，函数，属性，函数参数的命名规范

区分大小写
第一个字符必须是字母，下划线，或者美元符号
其他字母可以是字母，下划线，数字或者美元符号

推荐使用匈牙利命名风格

对象：o Object,如,oDiv
数组：a Array,如，aLtems
字符串：s String,如，sUserName
整数：i Interger,如，iNum
布尔值：b Boolean,如，BIsComplite
浮点数：f Float,如，fPrice
函数：fn Function,如，fnHander
正则表达式:re RegExg,如，reEmailCheck

函数

函数的预解析

javascript 解析过程分为两个阶段，先是编译阶段，然后是执行阶段，编译阶段会把函数定义解析了，所以，代码中可以将函数的调用语句写在函数定义语句之前，在执行阶段是可以执行这一行调用代码的。
变量不可以预编译

<script type="text/javascript">
 fnAlert(); // 弹出 hello！
 alert(iNum); // 弹出 undefined
 function fnAlert(){
    alert('hello!')
 }
 var iNum = 123;

</script>

函数传参

正常传参，一一对应
在javascriptz中，可以传递比形参个数少或者多的参数

<!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>
        function fnTestFun(num1,num2){
            var result = num1+num2;
            // 控制台打印
            console.log(result);
            // console.log(arguments)

        }
        fnTestFun(1,2);

        // 给函数传参可以传比形参个数多的参数，不会报错，函数会接受参数，放在
        // arguments列表中，可以在函数内调用
        fnTestFun(1,2,3);

        // 也可以给函数传递少于形参个数的参数，不会报错,没传值的形参是undifined
        fnTestFun(1)

    </script>
</head>
<body>

</body>
</html>

函数返回值

在js中，函数返回值的使用和普通函数并无两样

 <script>
        // 函数返回值的使用和普通函数一样
        var iAdd2Num = fnAdd(5,8);
        console.log(iAdd2Num);
        // 在控制台上打印：13
        function fnAdd(a1,a2){
            result = a1+a2;
            return result;
        }
    </script>

匿名函数

定义的函数可以不给名称，这个没名字的函数叫做匿名函数
可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用

<script type="text/javascript">
window.onload=function(){
 var oBtn = document.getElemrntById('btn1');
 // 可以把函数的引用传给事件
 /*
 oBtn.onclick = myalert;
 function myalert(){
 alert('ok!');
 }
 */
 // 也可以直接将匿名函数赋值给绑定的事件
 oBtn.onclick=function(){
    alert('ok!');
 }
}
</script>

条件语句

控制程序语句的执行方向的语句

运算符

条件关系运算符

> < >= <= == ===
=== 表示数据类型和值都相等才是true，如 12 === ‘12’ 是 false
== 表示只要值相等就是true，如 12 == ‘12’ 是true

逻辑运算符

&& ：与； || ：或；！：非

if/else

语句的执行方向只有两种时使用

   var iNum1 = 123, iNum2 = 456;
    if (iNum1>iNum1){
        console.log("iNum1>iNum2")
    }else{
        console.log("iNum1<=iNum2")
    } 
    // 浏览器控制台打印出： iNum1<=iNum2

“===”必须类型和值都相等才为true.”==”

<script>
        var iNum  = 123;
        var sStr = "123";
        if(iNum == sStr){
            console.log('iNum == sStr is true');
        }else{
            console.log('iNum == sStr is false');
        }
        // 浏览器控制台打印： iNum == sStr is true
        if(iNum === sStr){
            console.log('iNum === sStr is true');
        }else{
            console.log('iNum === sStr is false');
        }
        // 浏览器控制台打印：iNum === sStr is false
    </script>

if/else if

语句的执行方向超过两种时使用if/else if语句

<script>
        var iDay = 8;
        if (iDay == 1){
            alert('monday');
        }
        else if(iDay == 2) {
            alert('thuesday');
        }
        else if(iDay == 3){
            alert('wedsday');
        }
        else if(iDay == 4){
            alert('thursday');
        }
        else if(iDay == 5){
            alert('friday');
        }
        else {
            alert('weekends')
        }
    </script>

switch/case

用在对一个变量的值，不同的值，执行不同的语句的情况

script>
        var iDay = 7;
        switch (iDay){
          case 1:
            alert('monday');
             break;
        case 2:
            alert('tuesday');
            break;
        case 3:
            alert('wedsday');
            break;
        case 4:
            alert('thursday');
            break;
        case 5:
            alert('friday');
            break;
        case 6:
        case 7:
            alert('weekends');
            break;
        }
    </script>

&&，||，！


<script>
        var iNum = 123, iNum1 = 456;
        var sStr = "123";
        // 表示 && 两边的条件都为true时 才执行 if 里的语句
        if (iNum==sStr && iNum < iNum1){
            alert("true")
        }
        else{
            alert('false')
        }
        // 弹出： true

        // 表示 || 两边的条件只要有一个满足 就执行 if 下的语句
        if(iNum==sStr || iNum > iNum1){
            alert('true')
        }else{
            alert('false')
        }
        // 弹出： true

        // 表示 ！后的条件为false时，才执行if里的语句 
        if(!iNum==sStr){
            alert('true')
        }else{
            alert('false')
        }
        //弹出：false
    </script>`

三元运算符

\<条件>？<语句1>：<语句2>
表示条件结果为true时，执行语句1，条件结果为false时，执行语句2

 <script>
    var a = 123 > 567 ? "呵呵":"哈哈";
    alert(a)
    //弹出：哈哈
    </script>

获取页面的标签

在javascript中获取到HTML中的标签

获取方法

可以使用内置对象document上的getElementById来换取页面上设置了Id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量

    <script>
        var oDiv = document.getElementById('div')
    </script>
...
    <div id="div">这是一个div</div>

上面的语句会有一个错误，因为语句是从上到下执行的，在执行script语句的时候，还没有定义<div>标签，所以无法获得<div>标签
解决办法:

1.将script语句写在定义<div>标签的下方

 <script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>

    ....

<div id="div1">这是一个div元素</div>

2.将javascript语句放到windows.onload触发的函数里面，获取元素的语句会在页面加载完成后才执行，就不会出错了。

<script>

       window.onload = function(){ var oDiv = document.getElementById('div')；
      }
 </script>
。。。
    <div id="div">这是一个div</div>

操作元素的属性

对获取到的元素进行属性的读写操作

操作方法

‘.’ 操作
‘[]’操作

属性写法

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

通过‘.’操作属性

获取到元素对象之后，可用’.’读取/设置属性值

    <script>
       window.onload = function(){
       var oInput = document.getElementById('input1');
       var oA = document.getElementById('link1');

       // 读取属性值
       var sValue = oInput.value;
       var sType = oInput.type;
       var sName = oInput.name;
       var sLink = oA.href;

       //写（设置）属性
       oA.style.color = 'red';
       oA.style.fontSize = sValue; 
    }
    </script>
</head>
<body>
    <input type="text" name='setsize' id='input1' value='20px'>
    <a href="http://www.itcast.cn" id='link1'>传智播客</a>

通过‘[ ]’操作属性

<script type="text/javascript">

    window.onload = function(){
        var oInput1 = document.getElementById('input1');
        var oInput2 = document.getElementById('input2');
        var oA = document.getElementById('link1');
        // 读取属性
        var sVal1 = oInput1.value;
        var sVal2 = oInput2.value;
        // 写(设置)属性
        // oA.style.sVal1 = val2; 没反应
        oA.style[sVal1] = sVal2;        
    }

</script>

......

<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.itcast.cn" id="link1">传智播客</a>

获取class属性的值

需要使用.className来获取

<script>
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            var sClassName = oDiv.className;//读取class属性要使用 className
            alert(sClassName);
            // 弹出：d1
        }
 </script>
...
    <div id="div1" class="d1"></div>

innerHTML

innerHTML可以读取或者写入标签包裹的内容

    <script>
        window.onload = function(){
            var oDiv = document.getElementById('d1');
            // 使用<标签对象>.innerHTML可以读取到标签里的内容
            var sText = oDiv.innerHTML;
            alert(sText);
            // 弹出： 这是一个div

            // 写入内容
            oDiv.innerHTML = '这是通过innerHTML更改过内容的div'
        }
    </script>
</head>
<body>
    <div id="d1">这是一个div</div>

这里写图片描述

操作标签样式

对标签的style样式进行操作
js读取和设置的是标签的内联style样式

<script>
        window.onload = function(){
            var oDiv = document.getElementById('d1');
            // <对象名>.style.<属性>=’<属性值>‘ 可在js里修改标签的样式值
            oDiv.style.color = 'red';
            //oDiv 读取的标签样式属性是内联样式属性   
            console.log(oDiv.style.fontSize);

            //oDiv对象修改标签的内联样式属性
            oDiv.style.fontSize = '20px';
            console.log(oDiv.style.fontSize);
            //控制台打印：20px
        }
    </script>
    <style>
        div{
            color:green;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <!-- 内联样式的权重（blue）大于标签样式（green），所以显示blue -->
    <div id="d1" style="color:blue; font-size:100px">这是一个div</div>
</body>

事件

事件是能被javaScript检测到的动作
onclick 是一个点击事件，表示鼠标左键按下，抬起来这个动作

    <script>
        window.onload = function(){
            var oDiv1 = document.getElementById('d1')
            // 定义一个点击事件,执行点击事件函数
            oDiv1.onclick = fnAlert;
            // 弹出：让你点，你就点，真听话
            // 定义一个点击事件函数
            function fnAlert(){
                alert('让你点，你就点，真听话')
            }
        }
    </script>
</head>
<body>
    <input type="button" id="d1" value="点我">
</body>

VisionaryX

关注

0
点赞
踩
0

收藏

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

前端三大块，HTML, CSS, JavaScript,今天是JavaScript入门。介绍JavaScript的页面引入方式，Javascript变量，javaScript获取元素及操作元素属性，JavaScript函数的使用以及条件语句的基本使用。JavaScript介绍JavaScript试运行在浏览器的端的脚本语言。JavaScript主要解决的时前端与用户交互的问题，
复制链接

扫一扫