JS学习笔记（一） 概述
参考资料：
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学习笔记（一） 概述的更多相关文章
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- 2019-4-29 js学习笔记
js学习笔记一:js数据类型 1:基本数据类型 number类型(整数,小数) String类型 boolean类型 NaN类型其实是一个nu ...
- 一点感悟：《Node.js学习笔记》star数突破1000+
写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...
- JS学习笔记5_DOM
1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...
随机推荐
- Respond.js – 让 IE6-8 支持 CSS3 Media Query
Respond.js 是一个快速.轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width ...
- 去除冗余 – 精简您的CSS样式代码
讲讲常见的一些没有必要使用CSS代码情况,而这些不起作用可以去掉的CSS代码可能是我们经常忽视的.越是对CSS理解不够,越容易出现这些问题. 二.一些常见不必要CSS样式 1.与默认CSS样式一致 我 ...
- 如何通过ps -ef|grep tomcat只获得你需要的查询进程，排除掉grep本身的进程信息
执行命令:ps -ef|grep tomcat|grep /opt/upay3/application/dispatcherTomcat/bin输出的进程信息会显示2个:包括grep本身的进程+你查询 ...
- linux curl用法详解
linux curl用法详解 curl的应用方式,一是可以直接通过命令行工具,另一种是利用libcurl库做上层的开发.本篇主要总结一下命令行工具的http相关的应用, 尤其是http下载方面 ...
- Oracle PL/SQL之LOOP循环控制语句
在PL/SQL中可以使用LOOP语句对数据进行循环处理,利用该语句可以循环执行指定的语句序列.常用的LOOP循环语句包含3种形式:基本的LOOP.WHILE...LOOP和FOR...LOOP. LO ...
- PHP的数据类型、常量、时间
[数据类型之间相互转换] ◆ 一种是强制转换: setType( 变量, 类型); // 类型 int, integer, float, double,real, bool, boolena, st ...
- thinkphp模板中截取中文字符串的方法分享
前段用thinkphp写了一个系统,感觉thinkphp学起来比较容易,开发起来了比较顺手,其中一个关键的因素就是它的模版引擎相当强大,使用方法跟smarty类似,在模版中还可以用php代码,有模版包 ...
- 如何修改ECShop发货单查询显示个数
使用ecshop的朋友都知道,商城首页调用的发货单查询,默认显示的10个.很多朋友想修改它的数量,可是在后台管理却找不到相应的地方,这个修改和显示排行榜的数量修改方法不一样.排行榜是可以在后台修改的, ...
- Mysql ibdata 丢失或损坏如何通过frm&ibd 恢复数据
mysql存储在磁盘中,各种天灾人祸都会导致数据丢失.大公司的时候我们常常需要做好数据冷热备,对于小公司来说要做好所有数据备份需要支出大量的成本,很多公司也是不现实的.万一还没有做好备份,数据被误删除 ...
- ACM题目————Anagram
Description You are to write a program that has to generate all possible words from a given set of l ...