JavaScript学习复习

时间：2023-03-09 01:21:09
JavaScript学习复习

JavaScript 输出

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>菜鸟教程(runoob.com)</title>

    </head>

    <body>

        <h1>我的第一个 Web 页面</h1>

        <p id="demo">我的第一个段落。</p>

        <button onclick="testAlert()">testAlert</button>

        <button onclick="testinnerHtml()">innerHTML</button>

        <button onclick="myFunction()">myFunction</button>

        <button onclick="testConsole()">console</button>

        <script src="test.js"></script>

    </body>

</html>

js代码：

test.js

function myFunction() {

    document.getElementById("demo").innerHTML = "我的第一个 JavaScript 函数";

}

function testinnerHtml() {

    document.getElementById("demo").innerHTML = "段落已修改。";

    document.write(Date());

}

function testConsole() {

    a = 5;

    b = 6;

    c = a + b;

    console.log(c);

}

function testAlert(){

    window.alert("testAlert");

}

JavaScript 语法

数字：可以是整数或者是小数，或者是科学计数(e)。

3.14

1001

123e5

字符串:可以使用单引号或双引号。

"John Doe"

'John Doe'

数字表达式：

5 + 6

5 * 10

数组：

[40, 100, 1, 5, 25, 10]

对象：

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数：

function myFunction(a, b) { return a * b;}

变量：

JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值。

var x, length

x = 5

length = 6

操作符：使用 算术运算符 来计算值。

JavaScript学习复习

JavaScript语句：

var x = 5 + 6;

var y = x * 10;

例子：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <p id="demo"></p>

        <button onclick="testVar()">testVar</button>

        <button onclick="testArithmeticOperators()">testArithmeticOperators</button>

        <script src="test.js"></script>

    </body>

</html>

对应的js代码：

function testVar() {

    var length;

    length = 6;

    document.getElementById("demo").innerHTML = length;

}

/**

 * 算數操作符

 */

function testArithmeticOperators() {

    document.getElementById("demo").innerHTML = (5 + 6) * 10;

}

JavaScript 语句标识符

JavaScript学习复习

访问对象属性

person.lastName;

对象方法

name = person.fullName();

demo:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <p id="demo">test</p>

        <button onclick="testObjectPropertie1()">调用对象属性方法1</button>

        <button onclick="testObjectPropertie2()">调用对象属性方法2</button>

        <button onclick="testObjectPropertie2()">调用对象方法fullName</button>

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

    </body>

</html>

对应的Js代码：

/**

 * 调用对象属性1

 */

function testObjectPropertie1() {

    var person = {

        firstName: "John",

        lastName: "Doe",

        id: 5566

    };

    //调用firstName，lastName

    document.getElementById("demo").innerHTML =

        person.firstName + " " + person.lastName;

    document.getElementById("demo").innerHTML =

        person["firstName"] + " " + person["lastName"];

}

/**

 * 调用对象属性

 */

function testObjectPropertie2() {

    var person = {

        firstName: "张",

        lastName: "小丽",

        id: 5566

    };

    document.getElementById("demo").innerHTML =

        person["firstName"] + " " + person["lastName"];

}

/**

 * 调用person对象的方法fullName

 */

function testObjectMethod() {

    var person = {

        firstName: "张",

        lastName: "小丽",

        id: 5566,

        fullName: function() {

            return this.firstName + " " + this.lastName;

        }

    };

    document.getElementById("demo").innerHTML =

        person.fullName();

}

调用带参数的函数

声明：

function myFunction(var1,var2)

{

代码

}

带有返回值的函数

通过使用 return 语句就可以实现。

在使用 return 语句时，函数会停止执行，并返回指定的值。

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕，本地变量就会被删除。

全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

向未声明的 JavaScript 变量分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

carname="Volvo";

例子：

界面代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Js函数</title>

    </head>

    <body>

        <p>点击这个按钮，来调用带参数的函数。</p>

        <button onclick="jsMethod('Harry Potter','Wizard')">调用带参数的函数</button>

        <button onclick="showReturn(100,200)">带有返回值的函数</button>

        <p>简单计算器:</p>

        <table border="1" style="position:center;">

            <tr>

                <td>第一个数：</td>

                <td><input type="text" id="first" /></td>

            </tr>

            <tr>

                <td>第二个数：</td>

                <td><input type="text" id="twice" /></td>

            </tr>

            <tr>

                <td colspan="2">

                    &nbsp;

                    <button style="width:inherit" onclick="add()">+</button> &nbsp;

                    <button style="width:inherit" onclick="subtract()">-</button> &nbsp;

                    <button style="width:inherit" onclick="ride()">*</button> &nbsp;

                    <button style="width:inherit" onclick="devide()">/</button>

                </td>

            </tr>

            <tr>

                <td colspan="2" rowspan="2">

                    <p id="result"></p>

                </td>

            </tr>

        </table>

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

    </body>

</html>

js代码：

/**

 * 有参数的js方法

 * @param {Object} name 名字

 * @param {Object} job 工作

 */

function jsMethod(name, job) {

    alert("Welcome " + name + ", the " + job);

}

/**

 * 有返回值的js方法

 * @param {Object} a 参数1

 * @param {Object} b 参数2

 */

function jsMethod2(a, b) {

    return a * b + a / b;

}

function showReturn(a, b) {

    alert(jsMethod2(a, b))

}

/**

 * 加

 */

function add() {

    var first = document.getElementById("first").value;

    var twice = document.getElementById("twice").value;

    var result = Number(first) + Number(twice);

    setResult(result);

}

/**

 * 减

 */

function subtract() {

    var first = document.getElementById("first").value;

    var twice = document.getElementById("twice").value;

    var result = Number(first) - Number(twice);

    setResult(result);

}

/**

 * 乘

 */

function ride() {

    var first = document.getElementById("first").value;

    var twice = document.getElementById("twice").value;

    var result = Number(first) * Number(twice);

    setResult(result);

}

/**

 * 除

 */

function devide() {

    var first = document.getElementById("first").value;

    var twice = document.getElementById("twice").value;

    var result = Number(first) / Number(twice);

    setResult(result);

}

/**

 * 加 减 乘 除 结果显示

 * @param {Object} result

 */

function setResult(result) {

    document.getElementById("result").innerHTML = result;

}

主要是加减乘数运算和有参函数，有返回值函数调用

常见的HTML事件

JavaScript学习复习

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

  • 页面加载时触发事件
  • 页面关闭时触发事件
  • 用户点击按钮执行动作
  • 验证用户输入内容的合法性
  • 等等 ...

可以使用多种方法来执行 JavaScript 事件代码：

  • HTML 事件属性可以直接执行 JavaScript 代码
  • HTML 事件属性可以调用 JavaScript 函数
  • 你可以为 HTML 元素指定自己的事件处理程序
  • 你可以阻止事件的发生。
  • 等等 ...

字符串长度

可以使用内置属性 length 来计算字符串的长度。

特殊字符

JavaScript学习复习

字符串可以是对象

通常， JavaScript 字符串是原始值，可以使用字符创建： var firstName = "John"

但我们也可以使用 new 关键字将字符串定义为一个对象： var firstName = new String("John")

字符串属性和方法

字符串属性

JavaScript学习复习

字符串方法

JavaScript学习复习

JavaScript 比较 和 逻辑运算符

比较运算符

JavaScript学习复习

逻辑运算符

JavaScript学习复习

例子：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <h2>比较运算符</h2>

        <p>x=5</p>

        <button onclick="comparisonOperators()">比较运算符</button>

        <p id="demo">x==8</p>

        <p id="demo1">x == 8</p>

        <p id="demo2">x == 5</p>

        <p id="demo3">x === 5</p>

        <p id="demo4">x != 8</p>

        <p id="demo5">x !== "5"</p>

        <p id="demo6">x!== 5</p>

        <p id="demo7">x > 8</p>

        <p id="demo8">x < 8</p>

        <p id="demo9">x >= 8</p>

        <p id="demo10">x <= 5</p>

        <h2>逻辑运算符</h2>

        <p> x=6 以及 y=3</p>

        <button onclick="logicalOperators()">比较运算符</button>

        <p id="comparisonOperatorsdemo">(x < 10 && y > 1)</p>

        <p id="comparisonOperatorsdemo1">(x==5 || y==5) </p>

        <p id="comparisonOperatorsdemo2">!(x==y)</p>

        <script>

            function comparisonOperators() {

                var x = 5;

                //等于

                document.getElementById("demo").innerHTML = x == 8;

                document.getElementById("demo1").innerHTML = x == 5;

                //绝对等于（值和类型均相等）

                document.getElementById("demo2").innerHTML = x === "5";

                document.getElementById("demo3").innerHTML = x === 5;

                //不等于

                document.getElementById("demo4").innerHTML = x != 8;

                // 不绝对等于（值和类型有一个不相等，或两个都不相等）

                document.getElementById("demo5").innerHTML = x !== "5";

                document.getElementById("demo6").innerHTML = x!==5;

                //大于

                document.getElementById("demo7").innerHTML = x>8;

                //小于

                document.getElementById("demo8").innerHTML = x < 8;

                //大于或等于

                document.getElementById("demo9").innerHTML = x >= 8;

                //小于或等于

                document.getElementById("demo10").innerHTML = x <= 5;

            }

            function logicalOperators(){

                var x = 6;

                var y = 3;

                document.getElementById("comparisonOperatorsdemo").innerHTML = (x < 10 && y > 1);

                document.getElementById("comparisonOperatorsdemo1").innerHTML = (x==5 || y==5);

                document.getElementById("comparisonOperatorsdemo2").innerHTML = !(x==y);

            }

        </script>

    </body>

</html>

相关文章