此篇为学习笔记

JS 简介

JavaScript 是一种轻量级的脚本编程语言JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JS 定义函数和调用函数

<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">

<script>

    function changeImage()

    {

        //document代表页面，获取某个元素，元素可定义 id

        element=document.getElementById('myimage')

        if (element.src.match("bulbon"))

        {

            element.src="/images/pic_bulboff.gif";

        }

        else

        {

            element.src="/images/pic_bulbon.gif";

        }

    }

</script>

定义方法也很简单 ： 

     function 方法名（参数）{

         方法体

     }

定义数据类型

JavaScript 有多种数据类型：数字，字符串，数组，对象等等：

var length = 16;                                  // Number 通过数字字面量赋值

var points = x * 10;                              // Number 通过表达式字面量赋值

var lastName = "Johnson";                         // String 通过字符串字面量赋值

var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值

var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

JS条件判断

if (time<20)

{

    x="Good day";

}

else

{

    x="Good evening";

}

JS 定义对象及属性

var person = {

    firstName:"John",

    lastName:"Doe",

    age:50,

    eyeColor:"blue"

};

JS 事件

发生某个事件调用某个 JS 函数，这是常见的场景

JS for 循环

for (var i=0;i<cars.length;i++)

{

    document.write(cars[i] + "<br>");

}

JS 简易表单认证

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<h1>JavaScript 验证输入</h1>

<p>请输入 1 到 10 之间的数字：</p>

<input id="numb">

<button type="button" onclick="myFunction()">提交</button>

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

<script>

function myFunction() {

    var x, text;

    // 获取 id="numb" 的值

    x = document.getElementById("numb").value;

    // 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10

    if (isNaN(x) || x < 1 || x > 10) {

        text = "输入错误";

    } else {

        text = "输入正确";

    }

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

}

</script>

</body>

</html>

持续更新..

JavaScript 学习（一）的更多相关文章

  1. JavaScript学习（一） —— 环境搭建与JavaScript初探

    1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...

  2. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  3. JavaScript学习（3）：函数式编程

    在这篇文章里,我们讨论函数式编程. 什么是函数式编程?根据百度百科的描述,“函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus). ...

  4. JavaScript学习（2）：对象、集合以及错误处理

    在这篇文章里,我们讨论一下JavaScript中的对象.数组以及错误处理. 1. 对象 对象是JavaScript中的一种基本类型,它内部包含一些属性,我们可以对这些属性进行增删操作. 1.1 属性 ...

  5. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

  6. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  7. JavaScript学习11 数组排序实例

    JavaScript学习11 数组排序实例 数组声明 关于数组对象的声明,以前说过:http://www.cnblogs.com/mengdd/p/3680649.html 数组声明的一种方式: va ...

  8. JavaScript学习10 JS数据类型、强制类型转换和对象属性

    JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...

  9. JavaScript学习09 函数本质及Function对象深入探索

    JavaScript学习09 函数本质及Function对象深入探索 在JavaScript中,函数function就是对象. JS中没有方法重载 在JavaScript中,没有方法(函数)重载的概念 ...

  10. JavaScript学习08 Cookie对象

    JavaScript学习08 Cookie对象 JavaScript Cookie Cookie对象: Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cooki ...

随机推荐

  1. C# 调用微信接口的代码

    调用微信接口前需要准备的内容. 1.微信公众平台的appid 2.微信公众平台的secret 3..获取tokenid 4.获取ticket 5.生成签名的随机串 6.生成签名的时间戳 7.生成签名 ...

  2. winform npoi excel 样式设置

    IWorkbook excel = new HSSFWorkbook();//创建.xls文件 ISheet sheet = excel.CreateSheet("sheet1") ...

  3. windows下redis安装及应用

    一.下载安装Redis(windows版本) 1.下载地址:https://github.com/MicrosoftArchive/redis/releases 2.安装: 1)打开运行窗口,输出cm ...

  4. 学习《精通数据科学从线性回归到深度学习》PDF+代码分析

    数据科学内容广泛,涉及到统计分析.机器学习以及计算机科学三方面的知识和技能.学习数据科学,推荐学习<精通数据科学从线性回归到深度学习>. 针对技术书籍,最好的阅读方法是对照每一章的示例代码 ...

  5. jzoj5832. 【省选模拟8.20】Emotional Flutter

    tj:我們發現,每一次走過的步長都是k,設當前走的步數是x,走到了一個白條 那麼,每一次走就是把所有黑條都向前移k位,我們可以考慮把所有黑條的左邊界不斷的向前移動k,直到下一次移動時,其左邊界小於0, ...

  6. 哈夫曼树——c++

    哈夫曼树的介绍 Huffman Tree,中文名是哈夫曼树或霍夫曼树,它是最优二叉树. 定义:给定n个权值作为n个叶子结点,构造一棵二叉树,若树的带权路径长度达到最小,则这棵树被称为哈夫曼树. 这个定 ...

  7. 微信小程序与vueJs的异同

    简而言之,所有的框架都是建立在原生javascript基础之上的,所以对于有一定js基础的同学来说,各种框架都是比较容易入手的,但不同的框架之间又有一定的差别,有时候切换使用时就会掉入坑了. 一.微信 ...

  8. 酷！美国国家安全局（NSA）开源了逆向工程工具 Ghidra

    简评:2019 RSA 大会期间,NSA 正式发布了这个工具.免费 + 开源,真的有吸引力,据说体验可以和 IDA 一较高下. Ghidra 是由美国国家安全局(NSA)研究理事会创建和维护的软件逆向 ...

  9. [BZOJ2758] [SCOI2012]Blinker的噩梦 扫描线+set

    题目大意:有n个圆或凸多边形,这些图形不会相交,每当走入或走出一个图形时需要异或上一个代价,有m组操作: 询问操作,每次询问从一个点走到另一个点时,需要的代价(初始代价为0) 修改操作,每次修改一个图 ...

  10. Nginx Web服务(一)

    一.Nginx原理介绍 1.1:什么是Nginx Nginx是一个开源的,支持高性能.高并发的WWW服务和代理服务软件 1.2:Nginx的功能特点及应用场合 ① 支持高并发:能支持几万并发连接,特别 ...