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)。

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

"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语句：

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 语句标识符

访问对象属性

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 事件代码：

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

字符串长度

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

特殊字符

字符串可以是对象

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

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

字符串属性和方法

字符串属性

字符串方法

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>

posted @ 2017-05-15 11:07 西北野狼阅读(217) 评论(0) 编辑收藏举报

刷新页面返回顶部

西北野狼

我的github： https://github.com/soyoungboy
我的segmentfault： http://segmentfault.com/u/soyoungboy

【年华留不住，留住蹭诗酒】

JavaScript学习复习

JavaScript 输出

JavaScript 语法

JavaScript 语句标识符

访问对象属性

对象方法

调用带参数的函数

带有返回值的函数

局部 JavaScript 变量

全局 JavaScript 变量

JavaScript 变量的生存期

向未声明的 JavaScript 变量分配值

常见的HTML事件

字符串长度

特殊字符

字符串可以是对象

字符串属性和方法

字符串属性

字符串方法

JavaScript 比较和逻辑运算符

比较运算符

逻辑运算符

公告

西北野狼

我的github： https://github.com/soyoungboy 我的segmentfault： http://segmentfault.com/u/soyoungboy 【年华留不住，留住蹭诗酒】

JavaScript学习复习

JavaScript 输出

JavaScript 语法

JavaScript 语句标识符

访问对象属性

对象方法

调用带参数的函数

带有返回值的函数

局部 JavaScript 变量

全局 JavaScript 变量

JavaScript 变量的生存期

向未声明的 JavaScript 变量分配值

常见的HTML事件

字符串长度

特殊字符

字符串可以是对象

字符串属性和方法

字符串属性

字符串方法

JavaScript 比较 和 逻辑运算符

比较运算符

逻辑运算符

公告

我的github： https://github.com/soyoungboy
我的segmentfault： http://segmentfault.com/u/soyoungboy

【年华留不住，留住蹭诗酒】

JavaScript 比较和逻辑运算符