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>

JavaScript学习复习的更多相关文章

JavaScript学习记录三
title: JavaScript学习记录三 toc: true date: 2018-09-14 23:51:22 --<JavaScript高级程序设计(第2版)>学习笔记要多查阅M ...
JavaScript学习（一） —— 环境搭建与JavaScript初探
1.开发环境搭建本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...
Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
JavaScript学习（3）：函数式编程
在这篇文章里,我们讨论函数式编程. 什么是函数式编程?根据百度百科的描述,“函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus). ...
JavaScript学习（2）：对象、集合以及错误处理
在这篇文章里,我们讨论一下JavaScript中的对象.数组以及错误处理. 1. 对象对象是JavaScript中的一种基本类型,它内部包含一些属性,我们可以对这些属性进行增删操作. 1.1 属性 ...
JavaScript学习13 JavaScript中的继承
JavaScript学习13 JavaScript中的继承继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...
JavaScript学习12 JS中定义对象的几种方式
JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...
JavaScript学习11 数组排序实例
JavaScript学习11 数组排序实例数组声明关于数组对象的声明,以前说过:http://www.cnblogs.com/mengdd/p/3680649.html 数组声明的一种方式: va ...
JavaScript学习10 JS数据类型、强制类型转换和对象属性
JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...

随机推荐

boot.img的修改
个文件:boot.img.system.img.userdata.img.其中boot.img 存放着内核以及Android系统的配置信息,比如android系统各文件夹的读写权限,adb 的权限.所 ...
调用聊天机器人 -小I机器人
public static string sendMsg2(string msg) { try { msg = Uri.EscapeDataString( msg); string sUrl = &q ...
20155321 《网络攻防》 Exp5 MSF基础应用
20155321 <网络攻防> Exp5 MSF基础应用基础问题用自己的话解释什么是exploit,payload,encode 关于exploit,我觉得exploit是利用一些工具 ...
service手动实例化（new）导致类中的spring对象无法注入的问题解决
下面说的这个画横线的可能是错误的,因为我之前用controller继承父类的注解对象的时候成功了,所以可能这次的唯一原因就是不该把本该从ioc容器中拿出的对象通过new的方式实例化,至于继承注解对象 ...
[BZOJ3809]Gty的二逼妹子序列[莫队+分块]
题意给出长度为 \(n\) 的序列,\(m\) 次询问,每次给出 \(l,r,a,b\) ,表示询问区间 \([l,r]\) 中,权值在 \([a,b]\) 范围的数的种类数. \(n\leq 10 ...
json-server+mockjs 模拟REST接口
前言: 项目开发中,影响项目进程的常常是由于在前后端数据交互的开发流程中停滞,前端完成静态页面的开发后,后端迟迟未给到接口.而现在,我们就可以通过根据后端接口字段,建立一个REST风格的API接口,进 ...
C语言中指针占据内存空间问题
以前一直有个疑问,指向不同类型的指针到底占用的内存空间是多大呢? 这个问题我多次问过老师,老师的答案是"指向不同类型的指针占据的内存空间大小不同",我一直很之一这个答案,今天我就做 ...
vue基础项目安装教程
安装node.js 从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了. 安装完成之后,打开命令行工具,输入 node -v,如下图,如果出现相应的版本号,则说明安装成功. ...
Jmeter(二十二)_jenkins配置gitlab插件与ant插件
Docker部署接口自动化持续集成环境第四步,代码上传到远程仓库! 接上文:脚本上传Gitlab 服务器中的Jenkins通过Gitlab插件读取远程Git远程仓库中的代码,然后通过ant插件进行构建 ...
Salesforce随笔: 将Visualforce Page渲染为PDF文件(Render a Visualforce Page as a PDF File)
参照 : Visualforce Developer Guide 第60页 <Render a Visualforce Page as a PDF File> 你可以用PDF渲染服务生成一 ...

JavaScript学习复习