JavaScript介绍

Posted 礁之

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript介绍相关的知识，希望对你有一定的参考价值。

文章目录

一. javascript介绍

  • 定义: 运行在浏览器端的脚本语言
  • 作用: 行为标准, 负责和用户的交互
  • 使用场景: 需要和用户交互时

二. JavaScript的引入方式

  • 行内式
  • 内嵌式
  • 外链式

三. JavaScript的变量与数据类型

  • python中的数据类型
int float str bool list tuple set dict 自定义类(对象)
  • 语言的强弱

语言的强弱: 可以查看不同数据类型之间的变量是否可以直接进行加法运算
Python: 强类型语言, 字符串 + 数字 会报错
JavaScript: 弱类型语言, 字符串 + 数字 = 字符串

  • JavaScript中的变量
// 定义需要使用关键字 var
// 一行的结尾需要一个分号  ;
// 变量的数据类型由存储的数据值决定
var 变量名 = 数据值;
  • JavaScript的注释
// 单行注释, 快捷键 Ctrl + /

/* 
多行注释
多行注释
*/
  • JavaScript的常用数据类型
// 变量的定义, var 变量名 = 数据值;
// 变量名, 由字母 数字 下划线 $ 组成, 不能以 数字开头, 匈牙利命名风格(开头型简写)
// 1. 数字类型  number
// 1.1 整数  开头简写(i)
var iAge = 10;
// alert(iAge);  // 打印数据值
// alert(typeof(iAge)); // typeof(变量)  查看变量的数据类型
console.log(iAge);   // console.log() 在浏览器的控制台输出 
console.log(typeof(iAge));
// 1.2 小数  开头简写(f)
var fHeight = 174.4;
console.log(fHeight, typeof(fHeight));

// 2. 字符串类型 string   
// 开头简写(s)
var sName = 'isaac';
console.log(sName, typeof(sName));

// 3. 布尔类型 boolean 值(true, false)
// 开头简写(b)
var bIsTrue = true;
console.log(bIsTrue, typeof(bIsTrue));

// 4. 未定义的类型 undefined
// object 开头简写(o)
var oA;
console.log(oA, typeof(oA));

// 5. null
var oObject = null;
console.log(oObject, typeof(oObject));

四. JavaScript中的函数

  • python中函数的定义和调用
# 函数定义后,不会自动执行函数中的代码, 需要调用后才会执行
def 函数名(参数):  # 形参
    函数体
    return

函数名(参数)   # 实参
  • JS中函数的定义和调用
// 函数定义
function 函数名(参数) 
    函数体
    return


// 函数调用
函数名(参数)

五. JavaScript变量的作用域

局部变量, 全局变量

  1. 在函数内部能否直接读取全局变量的值 ====> 可以直接读取
  2. 在函数内部能否直接修改全局变量的值 ====> 可以直接修改
  3. 函数外部能否使用局部变量 ====> 函数外部不能访问局部变量的值
  4. 在函数内部定义变量, 如果不加 var 变量, 那么定义的变量是全局变量

六. JavaScript运算符

  • 算数运算符

+ - * / % ++ --
a++ —> a = a + 1
a-- —> a = a - 1

  • 赋值运算符

+= -= *= /= %=

  • 比较运算符

== 判断值是否相同, 只判断值, 不判断数据类型
=== 判断值和类型是否都相同
!= 不等于
> 大于
>= 大于等于
< 小于
<= 小于等于

  • 逻辑运算符

&& 逻辑与
|| 逻辑或
! 取反

  • 运算符优先级
  1. () 优先级最高
  2. 一元运算符 ++ – !
  3. 算数运算符, 先 * / % 后 + -
  4. 关系运算符 > >= < <=
  5. 相等运算符 == != ===
  6. 逻辑运算符 先 && 后||
  7. 赋值运算符 =

七. JavaScript判断语句

- 单分支
if (判断条件)
    条件成立执行的代码


- 双分支
if (判断条件)
    条件成立执行的代码
else
    条件不成立执行的代码


- 多分支
if (判断条件1)
    条件1成立时执行的代码
else if (判断条件2)
    条件1不成立, 条件2成立时执行的代码
else if(判断条件n)
    条件n-1不成立,条件n成立执行的代码
else
    以上条件都不成立,执行的代码

八. JavaScript数组

// 1. 数组的定义
// 1.1 使用 Array 类进行创建
var aArray = new Array(1, 2, 'hello');
console.log(aArray, typeof(aArray));
// 1.2 使用自变量方法进行创建
var aList = [1, 2, 3.14, 'isaac', [3, 6, 9]];
console.log(aList, typeof(aList));

// 2. 求数组中元素的个数, 数组的长度, 数组.length属性
console.log('元素的个数为: ', aList.length);

// 3. 数组支持下标操作, 但是没有负数下标
// 访问不存在的下标, 得到的值是 undefined
console.log(aList[0], aList[3], aList[100]);
// 可以通过下标修改数组中的数据
aList[3] = 'hello world';
console.log(aList);
// 直接修改不存在下标值, 在指定的下标位置添加数据, 其余位置为 空 ,使用 empty 来表示
aList[10] = 10;
console.log(aList, typeof(aList));

// 4. 根据数据值, 找到元素在数组中的第一个下标   indexOf
// 找到的话返回元素的下标, 没有找到则返回 -1
console.log(aList.indexOf('hello world'), aLisindexOf(1000));

// 5. 尾部添加和删除
aList.push('lang');
console.log(aList);
aList.pop();
console.log(aList);

// 6. 根据下标, 删除添加数据
// splice(下标, 删除元素的个数, 添加的元素)
aList.splice(2, 3); // 只删除, 不添加
console.log(aList);
aList.splice(2, 0, 3, 4, 5);
console.log(aList); // 只添加, 不删除
aList.splice(2, 2, 'hello', 'world'); // 删除后, 添加
console.log(aList);

九. JavaScript循环语句

// 1. while循环
while (判断条件)
    循环中的代码


// 2. for 循环
for(表达式1; 表达式2; 表达式3)
    循环中的代码


// 3. do while 循环, 不管条件是否成立, 至少循环一次
do
    循环代码
while(判断条件)

十. JavaScript获取页面标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script>
        // getElementById通过id找到对应的标签, 找到了就返回对象,没有就返回 null
        var oDiv = document.getElementById('box');
        alert(oDiv + '----' +typeof(oDiv));
    </script> -->
    <script>
        // 解决方法二: 让标签全部定义完成之后, 在执行 js 代码
        // 标签全部定义之后, 会触发一个事件, window.onload 事件
        // 当前标签全部加载后, 执行函数中的代码 , JS 的入口函数
        window.onload = function()    // 匿名函数    
            var oDiv = document.getElementById('box');
            alert(oDiv + '----' +typeof(oDiv));
        
    </script>
</head>
<body>
    <div id="box">
        这是一个 div
    </div>

    <!-- 解决方案一, 把 script 写在标签后面,不建议使用 -->
    <!-- <script>
        // getElementById通过id找到对应的标签, 找到了就返回对象,没有就返回 null
        var oDiv = document.getElementById('box');
        alert(oDiv + '----' +typeof(oDiv));
    </script> -->
</body>
</html>

十一. JavaScript操作页面标签的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 获取页面标签, 在入口函数中定义
        window.onload = function()
            // 1. 获取input标签
            var oInput = document.getElementById('name');
            // 获取标签的各属性
            console.log('标签的name属性为: ', oInput.name);
            console.log('标签的class属性为: ', oInput.className);
            console.log('标签的value属性为: ', oInput.value);
            console.log('标签的style属性为: ', oInput.style.fontSize);  // 只能获取行内式的css属性
            // 设置标签的各属性
            oInput.value = 100;
            oInput.name = 'python';
            console.log('修改后标签的name属性为: ', oInput.name);

            // 获取div标签
            var oDiv = document.getElementById('div1');
            console.log(oDiv.innerHTML);    // 获取标签内容, 会连html标签一起获取
            console.log(oDiv.innerText);    // 只获取内容, 不获取html标签
            oDiv.innerHTML = '好好学习'    // 修改标签内容
        
    </script>
</head>
<body>
    <input type="text" name="aaa" class="box" id="name" value="10" style="font-size: 30px;">
    <div id="div1">
        <p>
            这是一个div
        </p>
    </div>
</body>
</html>

十二. 定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var oT = null;
        function fnClick()
            oT = setInterval(alert, 2000, '好好学习');
        

        function fnCalc()
            clearInterval(oT);
        
    </script>
</head>
<body>
    <div>
        <p>点击单次定时器, 3s后弹出 hello</p>
        <!-- setTimeout(执行函数名, 时间间隔, 第一个函数参数的参数) -->
        <input type="button" value="单词定时器" onclick="setTimeout(alert, 3000, 'hello')">
    </div>
    <div>
        <p>点击多次定时器, 间隔 2s 弹出好好学习, 点击停止不再弹出</p>
        <input type="button" value="多次定时器" onclick="fnClick()">
        <input type="button" value="停止" onclick="fnCalc()">

    </div>
</body>
</html>

十三. JAvaScript的对象

  • 类似于Python中的字典
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // JS 对象的两种创建方式
        // 方式一: new Object
        var oPersion = new Object();
        oPersion.name = 'zhangsan';
        oPersion.age = 22;
        //  添加方法
        oPersion.sayName = function()
            alert(this.name);
        ;
        // 调用属性
        alert(oPersion.age);
        // 调用方法
        oPersion.sayName();


        // 方式二: 使用字面量, 推荐使用
        oStudent =
            name: 'lisi',
            age: 23,
            sayName: function()
                alert(this.name);
            
        
        // 调用
        alert(oStudent.age);
        oStudent.sayName();
    </script>
</head>
<body>
    
</body>
</html>

以上是关于JavaScript介绍的主要内容，如果未能解决你的问题，请参考以下文章

前端之JavaScript

前端--javaScript之简单介绍

前端开发之JavaScript基础篇一

前端学习之路-CSS介绍，Html介绍，JavaScript介绍

从零开始学习前端JAVASCRIPT — 4JavaScript基础Math和Date对象的介绍

从零开始学习前端JAVASCRIPT — 3JavaScript基础string字符串介绍