参考资料:

  1. http://www.w3school.com.cn/js/

  2. http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

  3. http://www.javascriptcn.com/

   ☂ 简介:

  ☞ Javascript是一种轻量级的解释型脚本语言。

   HTML中的脚本必须位于<script>与</script>标签之间。

  ☞ 脚本可被放置在HTML页面的<body>和<head>部分中。

  ☞ 引用外部.js文件的方式:

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

☞ Javascript对大小写敏感。

☞ 可在文本字符串中使用反斜杠“\”对代码进行换行。

☞ Javascript拥有动态类型。

☞ 未初始化的变量的值为undefined。

☞ 重新申明变量,该变量的值不会丢失。

  

  • 写入HTML输出
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>

效果:

  • 对事件作出反应
<button type="button" onclick="alert('Welcome!')">Click me</button>

效果:

  • 改变HTML内容
<p id="demo">JavaScript 能改变 HTML 元素的内容。</p>

<script>
function myFunction()
{
  x=document.getElementById("demo"); // 找到元素
  x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script> <button type="button" onclick="myFunction()">Click me</button>

点击前:

点击后:

  • 改变HTML图像
<script>
function changeImage()
{
  element=document.getElementById('myimage');
  if (element.src.match("bulbon"))
 {
  element.src="bulboff.gif";
 }
  else
{
  element.src="bulbon.gif";
}
}
</script> <img id="myimage" onclick="changeImage()" src="bulboff.gif">

点击前:

点击后:

  • 改变HTML图像
<p id="demo">JavaScript 能改变 HTML 元素的样式。</p>

<script>
function myFunction()
{
  x=document.getElementById("demo") // 找到元素
  x.style.color="#ff0000"; // 改变样式
}
</script> <button type="button" onclick="myFunction()">Click me</button>

点击前:

点击后:

  • 验证输入
<input id="demo" type="text">

<script>
function myFunction()
{
  var x=document.getElementById("demo").value;
  if(x==""||isNaN(x))
  {
    alert("Not Numeric");
  }
}
</script> <button type="button" onclick="myFunction()">Click me</button>

JS学习笔记(一) 概述的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  3. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  4. WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  5. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  6. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  7. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  8. 2019-4-29 js学习笔记

    js学习笔记一:js数据类型   1:基本数据类型       number类型(整数,小数)      String类型          boolean类型        NaN类型其实是一个nu ...

  9. 一点感悟:《Node.js学习笔记》star数突破1000+

    写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...

  10. JS学习笔记5_DOM

    1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...

随机推荐

  1. windows prompt personalize 设置cmd提示的相关

    由于有一篇随笔种我说要引用这篇文章,所以不得已也出来了,就像你说大话『我明天去吃屎』,结果你做到了. 我这记录一下有关windows prompt这是的变量,我不知道这算不算变量,因为windows变 ...

  2. CentOS6.5系统软件仓库及挂载NTFS

    第一步:下载rpmforge,下载对应的版本,就是对应CentOS版本,还有32位与64位也要对应上.rpmforge拥有4000多种CentOS的软件包,被CentOS社区认为是最安全也是最稳定的一 ...

  3. zabbix监控phpfpm

    php-fpm status详解 pool – fpm池子名称,大多数为wwwprocess manager – 进程管理方式,值:static, dynamic or ondemand. dynam ...

  4. Linux和Windows远程桌面互连

    1.Ubuntu 连 windows    W.1 Windows设置允许远程桌面连接    U.1 Ubuntu设置 apt-get install rdesktop    U.2 Ubuntu连接 ...

  5. Linux环境变量的修改(永久,暂时)以及修改ls显示的时间格式

    本文转自:http://blog.sina.com.cn/s/blog_8e21864f01014u9h.html Linux修改环境变量,很简单但很重要 一.Linux的变量种类 按变量的生存周期来 ...

  6. 安装使用RESTful 框架SLIM方法

    相关框架: http://www.golaravel.com 是一个PHP框架,内置名为LUMEN的RESTful API框架,有中文文档, http://lumen.golaravel.com/do ...

  7. HDU 5961:传递(暴搜)

    http://acm.hdu.edu.cn/showproblem.php?pid=5961 题意:中文题意.给出两个图,判断这个两个图是否都是传递的.注意一下传递的定义要看清,一开始没看清连样例都看 ...

  8. phpize的深入理解

    安装(fastcgi模式)的时候,常常有这样一句命令:/usr/local/webserver/php/bin/phpize一.phpize是干嘛的?phpize是什么东西呢?php官方的说明:htt ...

  9. 判断listview是上滑还是下滑的方法

    方法一: 用setOnScrollListener(new AbsListView.OnScrollListener())来实现,判断滑动后显示的第一个条目 ,与滑动前的第一个条目的大小来判断, 这种 ...

  10. VI 命令简介

    1.打开一个文件  vi 文件路径 2.命令模式转换  输入模式 i  命令模式  esc 3.复制 和 粘贴 1)将光标移动到将要复制的行处,按yy进行复制当前行(按nyy复制n行),再移动到粘贴位 ...