2016.3.17__ JavaScript基础_1__第十二天
Javascript基础
首先说声抱歉。
今日涉及内容难易度不统一，所以很多比較基础的属性直接通过思维导图展示了。
同一时候须要注意，今日思维导图中的内容和笔记中并非一一相应的，请读者自行对比查看。
对您造成的困扰。万分抱歉。
假设您认为这篇文章还不错。能够去H5专题介绍中查看很多其它相关文章。
今日课程预览
1. JS 介绍
js(javascript)和java没有不论什么关系。仅仅只是名称看起来有些同样;
这里能够了解一下网景公司的兴衰史。同一时候也能够了解第一代浏览器的故事。大家能够了解一下“浏览器大战”。
首先大家在学习前要明确几点。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后。可由全部的现代浏览器运行。
注意：
HTML 中的脚本必须位于 标签之间。
脚本可被放置在 HTML 页面的 和 部分中。
<script> 标签
如需在 HTML 页面中插入 JavaScript。请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处開始和结束。
JS的组成：（此处请參考思维导图中内容）
- ECMAScript
- 文档对象模型（DOM）
- 浏览器对象模型（BOM）
JS的特点：
- 弱类型的变量类型
- 事件驱动
- 跨平台
那我们学习 JS 能够做什么？
- 写入 HTML 输出
- 对事件作出反应
- 改变 HTML 内容
- 改变 HTML 图像
- 改变 HTML 样式
- 验证输入
2. JS事件和函数的使用
通常，我们须要在某个事件发生时运行代码，比方当用户点击button时。
假设我们把 JavaScript 代码放入函数中，就能够在事件发生时调用该函数。
同一时候我们也能够将<head> 或 <body> 中的 JavaScript放在 HTML 文档中，而且我们的放入的脚本是不限量的。
脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同一时候存在于两个部分中。
通常的做法是把函数放入 <head>部分中，或者放在页面底部。
这样就能够把它们安置到同一处位置，不会干扰页面的内容。
注意：
提示：我们把 JavaScript 放到了页面代码的底部，这样就能够确保在
元素创建之后再运行脚本。
能够把脚本保存到外部文件里。外部文件通常包括被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 “src” 属性中设置该 .js 文件。
<script src="myScript.js"></script>
在 <head> 或 <body> 中引用脚本文件都是能够的。
实际运行效果与您在 <script> 标签中编写脚本全然一致。可是须要注意，外部脚本不能包括 <script> 标签。
3. JS引入方式
3.1 头部引入（内部）
<script type="text/javascript">
//内容部分
</script>
比如：
<script type="text/javascript">
//警告 alert()语句 加入一条警告
alert('网络错误!');
</script>
显示效果例如以下图所看到的：
3.2 头部引入js文件（外部）
首先,你须要创建一个目录目录比如为js,然后再这个目录中创建一个一个后缀为.js的一个js文件，
比如叫做index.js;
index.js中：
alert("网络错误！");
然后在index.html文件里引入外部的js文件来使用；
<!--另外一种方式：引入js文件 外部引入 src是js文件的路径-->
<script src="js/index.js" type="text/javascript">
</script>显示效果和第一种方式也是一样：
4. js的变量、js的数据类型
对于接下来要学习的js的变量以及js的数据类型，对有C语言基础的朋友们来说，是很easy的。很类似。
变量的定义：变量相当于一个容器，是用来存储数据的。
4.1 变量命名规范：
- 首字母不能是数字
- 首字母仅仅能是数字或者下划线
- 不能用中文
- 多个单词使用驼峰命名法；从第二个单词開始首字母大写
- 要有语义 见名知义
- 不要使用关键字或者保留字，防止和系统重名
var a = 5;//number 数据类型
var b = 10;
var str = "15";//字符串类型（string）
alert(a+b);
alert(a+str);//假设一个number类型加上一个字符串类型，则拼接，结果515
var c = a + str;
alert(c); //+号的功能：1.数学运算 2.字符串连接
var d = a - str; //-号的功能：1.数学运算
alert(d);总结：
变量：它是一个容器，都以var来定义变量，数据类型是由它的值来决定的。
比如：var a = 5,所以，变量a的数据类型是number。var b = “15”,则b是字符串类（string）；
另一种特殊的情况就是”+”号的作用：
+号的功能：1.数学运算 2.字符串连接。这就是为什么上面代码中的alert(a+str);
警告的结果为515的原因，另外alert（）语句的作用仅仅是为了验证结果的，没有什么实质性的意义；
4.2 布尔类型 bool
var bo1 = true;//布尔类型 结果true和false
//typeof()获取变量的数据类型,(在不知道变量类型的情况下。也能够通过ypeof()获取)
alert(typeof(bo1));4.3 拓展 undefined类型
//假设我们不给某个变量设置值，则为undefined类型；
var color;
alert(typeof color);
4.4 if语句
//if语句
//推断语句 == 推断是否相等，
// > 大于
// < 小于
// >= 大于或者等于
// <= 小于或者等于
// != 不等于
// === 全等于;
var a = 5;//number 数据类型
var b = 10;
var c = "5";
if (a == b) {
alert("a等于b");
} else{
alert("a不等于b");
}
//== 仅仅考虑值是否成立，不考虑类型，
//假设既要考虑值。还得考虑数据类型的话。就用 === 全等于
if (a == c) {
alert("a==c成立");
} else{
alert("a == c不成立");
}注意：
在js其中。”==” 仅仅考虑值是否成立，不考虑变量的数据类型。
假设既要考虑值。还要考虑数据类型的话，就用 “===” 全等于.
4.5 逻辑运算符
<!--
逻辑运算符
与 或 非。
与：and 运算符前后的左右条件都成立 &&；
或：or 运算符前后的条件有一个成立，则结果即为真 ||;
非：！
对结果取反；
-->
var a = 5;//number 数据类型
var b = 10;
var c = "5";//字符串类型(string)
if (a < b && a == c) {
alert("成立");
}else{
alert("不成立");
}
if (a < b || a > c) {
alert("成立");
} else{
alert("不成立");
}
if (!(a > b)) {
alert("取反成立！");
} else{
alert("取反不成立！");
}
4.6 for 循环
for (var i = 0;i < 10;i++) {
//警告提示框
alert(i);
}看提示框的提示次数，可知此循环的循环次数为10次；
这里C语言其中for循环其中已经应该很熟悉了。此处不再多说。
4.7 JS 获取对象
<body>
<!--在body其中。创建一个有序列表ol-->
<ol id="olist">
<li><span></span>我是li1</li>
<li><span></span>我是li2</li>
<li><span></span>我是li3</li>
<li><span></span>我是li4</li>
<li><span></span>我是li5</li>
<li><span></span>我是li6</li>
<li><span></span>我是li7</li>
<li><span></span>我是li8</li>
<li><span></span>我是li9</li>
<li><span></span>我是li10</li>
</ol>
</body>
<script type="text/javascript">
<!--依据id获取标签ol对象-->
var ol = document.getElementById("olist");
//获取ol有序列表里全部的span标签。第一种方式
<!--通过ol获取ol列表下的全部span标签-->
var spans = ol.getElementsByTagName("span");
//或者使用另外一种方式：
var spans = document.querySelectorAll("#ol1 span");
//length 长度 能够通过length求长度
alert(spans.length);
//假设想获取某单个span标签对象。能够通过下标来获取.比如：
//spans[0] 下标从0開始
</script>
4.8 JS基础事件（click、mouseover、mouseout）
比如以下代码中的案例：设置一个div的属性为宽为200px、高为200px、颜色为红色。
<body>
<!--onclick 当点击时-->
<!--<input onclick="alert('a')" type="button" name="btn" id="btn1" value="显示" />-->
<input type="button" name="" id="btn" value="显示" />
<div id="div1" style="display: none;"></div>
</body>
头部引入js
<script type="text/javascript">
// 获取操作的标签 从文档里通过id去获取标签
//通常存储在变量里面
var btn = document.getElementById("btn");//得到buttonbutton
var blockDiv = document.getElementById("div");//得到div标签
//当点击buttonbutton时
btn.onclick = function(){
//做一次推断
if (blockDiv.style.display == "none") {
blockDiv.style.display = "block"; //block 属性 display:block 显示
} else{
blockDiv.style.display = "none"; //block 属性 display:none 隐藏
}
//当鼠标移入button上时 onmouseover
btn.onmouseover = function(){
//改变button上显示的内容
btn.value = "显示";
}
//或者写这个属性兼容性更强
//btn.onmouseenter = function(){
// btn.value = "显示";
//}
//当鼠标移除时 onmouseout
btn.onmouseout = function(){
btn.value = "隐藏";
}
//或者写这个属性兼容性更强
//btn.onmouseleave = function(){
// btn.value = "隐藏";
//}
}
</script>通过看下代码实现的效果来验证一下：
(注意点击显示button时。div标签的显示与隐藏，以及鼠标移入和移出button时。button上文字的变化)
2016.3.17__ JavaScript基础_1__第十二天的更多相关文章
- JavaScript基础
JavaScript基础 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处 ...
- JavaScript 基础回顾——对象
JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象 在JavaScript中 ...
- javascript基础07
javascript基础07 1.节点 元素.childNodes : 属性 只读 属性 子节点列表集合 元素.childNodes 只包含子节点,不包含孙节点 DOM节点的类型有很多种,w3c标准有 ...
- 小试牛刀2：JavaScript基础题
JavaScript基础题 1.网页中有个字符串“我有一个梦想”,使用JavaScript获取该字符串的长度,同时输出字符串最后两个字. 答案: <!DOCTYPE html PUBLIC &q ...
- JavaScript基础：数据类型的中的那些少见多怪
原文:JavaScript基础:数据类型的中的那些少见多怪 Javascript共有6种数据类型,其中包括3个基本数据类型(string,number,boolean).2个特殊数据类型(undefi ...
- javascript基础入门知识点整理
学习目标: - 掌握编程的基本思维 - 掌握编程的基本语法 typora-copy-images-to: media JavaScript基础 HTML和CSS 京东 课前娱乐 众人皆笑我疯癫,我笑尔 ...
- JavaScript基础入门06
目录 JavaScript 基础入门06 Math 对象 Math对象的静态属性 Math对象的静态方法 指定范围的随机数 返回随机字符 三角函数 Date对象 基础知识 日期对象具体API 构造函数 ...
- 一步步学习javascript基础篇（0）:开篇索引
索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...
- 前端之JavaScript基础
前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
随机推荐
- Linux Shell Scripting Cookbook 读书笔记 2
cat,script,find, xargs, tr, tmp文件,字符串截取,批量文件重命名,固定大小文件,自动化交互 1. cat的用法 压缩连续的空白行 cat -s file 也可以用tr,将 ...
- Hadoop MapReduce编程 API入门系列之自定义多种输入格式数据类型和排序多种输出格式（十一）
推荐 MapReduce分析明星微博数据 http://git.oschina.net/ljc520313/codeexample/tree/master/bigdata/hadoop/mapredu ...
- lua的Metatables和Metamethods
Metatable: lua中的每一个表都有其Metatable,默认情况下Metatable为nil.可通过setmetatable函数设置或者改变一个表的Metatable, 也可以通过getme ...
- oracle11g安装与拆卸
Oracle 11g安装 1.解压下载的包,然后进入包内,点击setup.exe开始安装 . 2.出现如下:一般把那个小对勾取消,点击下一步进行, 弹出下图这个后点'是' 3.下图后,选择创建和配置数 ...
- （转）50 个 jQuery 小技巧
1. 如何修改jQuery默认编码(例如默认UTF-8改成改GB2312): $.ajaxSetup({ajaxSettings:{ contentType:"application/x-w ...
- Oracle"TNS监听程序找不到符合协议堆栈要求的可用处理程序"解决方案
问题描述:在使用ETL工具通过odbc方式连接Oracle进行数据抽取的过程中,Oracle 监听日志报错如下: 根本原因就是Oracle的process和session已经达到了甚至超过了最大值,解 ...
- linux中errno使用(转)
当linux中的C api函数发生异常时,一般会将errno变量(需include errno.h)赋一个整数值,不同的值表示不同的含义,可以通过查看该值推测出错的原因,在实际编程中用这一招解决了不少 ...
- 图片无损放大工具PhotoZoom如何进行打印设置
我们使用PhotoZoom对照片进行无失真放大后,想将照片给打印出来需要设置一些常规参数时.那么这些参数我们该从哪里设置,怎么设置呢? PhotoZoom下载:pan.baidu.com/s/1cXb ...
- Python代码块缓存、小数据池
引子 前几天遇到了这样一道Python题目:a='123',b='123',下列哪个是正确的? A. a != b B. a is b C. a==123 D. a + b =246 正确答案是B 是 ...
- Win7系统无法记住网络访问的凭据怎么办？
访问内网其他IP时已经打勾记住我的凭据了,但是注销或者重启Win7系统之后,又得重新输入用户名跟密码怎么办? 下面就为大家介绍一下如何让Win7系统记住网络访问的凭据. 以上问题还会引发,重启后无法正 ...