javascript编程基础 案例,javascript基础入门案例
大家好，本文将围绕javascript编程基础 案例展开说明，javascript基础入门案例是一个很多人都想弄明白的事情，想搞清楚javascript入门项目需要先了解以下几个事情。
JS入门学习笔记目录
-
-
- 1、JS简介
- 2、组成部分
- 3、特点
- 4、作用
- 5、JS三种添加方式
- 6、变量
- 7、数据类型
- 8、检测数据类型
- 9、逗号运算符
- 10、算术运算符
- 11、关系运算符
- 12、逻辑运算符
- 13、三目运算符
- 14、赋值运算符
- 15、自定义函数
- 16、匿名函数
- 17、条件语句
-
-
- （1） if…else语句
- （2）switch…case语句
-
- 18、循环语句
-
-
- （1）for语句
- （2） while语句
- （3）do…while语句
-
- 19、数组
-
-
- （1）数组的创建
- （2）遍历数组
- （3）检测数组属性
-
- 20、DOM
-
- （1）什么是DOM?
- （2）DOM查找
-
- 1、按id属性查找
- 2、按标签名查找
- 3、通过name属性查找
- 4、通过class查找
- （3）DOM修改
-
- 1、读取属性值（了解即可）
- 2、修改属性值
- 3、判断是否包含指定属性
- 4、移除属性
- 5、修改样式
- （4）DOM添加
-
- 1、创建空元素
- 2、设置关键属性
- 3、将元素添加在DOM树中
- 21、BOM
-
- （1）什么是BOM？
- （2）浏览器对象模型
- （3）获取窗口大小
- （4）定时器
-
- 1、周期性定时器
- 2、一次性定时器
- 3、停止定时器
- 22、魔方案例
- 23、JS事件实例
-
- （0）JS事件
- （1）JS直接写入html输出流
- （2）JS对事件的反应
- （3）JS改变html中的内容
- （4）JS改变html的样式
- （5）JS验证输入
-
1、JS简介
- JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
2、组成部分
| 组成部分 | 作用 |
|---|---|
ECMA Script |
构成了JS核心的语法基础 |
BOM Browser Object Model |
浏览器对象模型，用来操作浏览器上的对象 |
DOM Document Obiect Model |
文档对象模型，用来操作网页中的元素 |
（1）核心（ECMAScript）：描述了该语言的语法和基本对象Python中的所有运算符号。
（2）DOM：Document Object Model（文档对象模型）：描述处理网页内容的方法和接口。
html加载到浏览器的内存中，可以使用js的DOM技术对内存中的html节点进行修改，用户从浏览器看到的是js动态修改后的页面。
（3）BOM：Brower Object Model（浏览器对象模型与浏览器进行交互的方法和接口。
例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等。
3、特点
（1）开发工具简单，记事本即可
（2）无需编译，直接由数据 JS引擎负责执行
（3）弱类型语言由数据来决定 数据类型
（4）面向对象
4、作用
（1）嵌入动态文本与HTML页面
（2）对浏览器时间做出相应
（3）读写HTML元素
（4）在数据被提交到服务器之前验证数据
（5）检测访客的浏览器信息
（6）控制cookies，包括创建和修改等。
（7）基于node.js技术进行服务器端编程。
5、JS三种添加方式
（1）行内式
（2）内嵌式
<>
alert('内嵌js');
（3）外链式
< src="js文件路径地址">这里不能写js语句
6、变量
定义：就是内存中的一段存储空间
1、 声明变量：
var 变量名称 = 存储的数据; (variable 变量)
2、变量命名规范
1. 只能由字母、数字、_（下划线）、$（美元符号）组成。
2. 不能以数字开头。
3. 命名中不能出现-（js会理解成减号进行减法的操作），不能和关键字冲突。
3、js是弱类型语言，不重视类型的定义，js会根据为变量赋值的情况自定判断该变量是何种类型：
数值型：var i = 1; var d = 3.25;
字符串：var str = "学无止境";
布尔型：var a = true;
7、数据类型
数值型：number（凡是数字都是数值型，不区分整数和小数）
字符串：string（凡是引号包括起来的内容全部都是字符串）
布尔：boolean（true、false）
对象类型：object（声明对象未赋值取值null）
未定义型：undefined
8、检测数据类型
typeof(value); 或 typeof value; 返回这个变量的类型
说明 : 同一个变量, 可以进行不同类型的数据赋值.
- 实例
< type="text/java">
var a;
alert(typeof a); // undefined
a = 123;
alert(typeof a); // number
a = "学无止境";
alert(typeof a); // string
a = true;
alert(typeof a); // boolean
9、逗号运算符
- 使用逗号可以在一条语句中执行多次操作
var age1=16,age2=17,age3=18;
- 使用逗号运算符分隔的语句会 从左到右 依次执行
10、算术运算符
+ - * / % ++ --
- 实例
<>
alert(1234 / 1000 * 1000); // 1234
var s = "12";
s -= 10;
alert(s); // 2
var s = "aa";
s -= 10;
alert(s); // NaN Not a Number 不是一个数字
var s = "12";
s += 10;
alert(s); // 1210
- 注意
- js中的小数和整数都是number类型，不存在整数除以整数还是整数的结论。
- 字符串和其他的数据使用+号运算，会连接成一个新的字符串。
- 字符串使用除了+以外的运算符：如果字符串本身是一个数字，那么会自动转成number进行运算，
否则就会返回一个NaN的结果，表示这不是一个数字。NaN：not a number
11、关系运算符
> >= < <= !=
- 实例
<>
// 请问: 2 > 5, 结果为 ?
alert(2 > 5); // false
// 请问: “22” == 22 结果为 ?
alert("22" == 22); // true (仅仅判断数值)
// 请问: “22” === 22 结果为 ?
alert("22" === 22); // false (恒等于, 数值和类型都要相等)
12、逻辑运算符
&& 逻辑与 true&&false ====>false
|| 逻辑或 true||false ====>true
！ 逻辑非 !true ====>false
针对 && : 有一个假即为假。
针对 || : 有一个真即为真。
true（理解）： true, 非0, 非null, 非undefined
false（理解）：false, 0, null, undefined
- 实例
<>
// 请问 1: 8 < 7 && 3 < 4,结果为 ?
alert(8 < 7 && 3 < 4); // false
// 请问 2: -2 && 6 + 6 && null 结果为 ?
alert(-2 && 6 + 6 && null); // null
// 请问 3: 1 + 1 && 0 && 5 结果为 ?
alert(1 + 1 && 0 && 5); // 0
// 请问1 : 0 || 23 结果为 ?
alert(0 || 23); // 23
// 请问2 : 0 || false || true 结果为 ?
alert(0 || false || true); // true
// 请问3 : null || 10 < 8 || 10 + 10 结果为 ?
alert(null || 10 < 8 || 10 + 10); // 20
// 请问4 : null || 10 < 8 || false 结果为 ?
alert(null || 10 < 8 || false); // false
13、三目运算符
- 语法
条件?表达式1:表达式=2
如果条件为true，返回表达式1的结果
如果条件为false，返回表达式2的结果
- 实例
<>
// 请问1 : var score=80 >= 60 ? "合格" : "不合格" 结果为 ?
alert(var score=80 >= 60 ? "合格" : "不合格"); // 合格
// 请问2 : 1 > 5 ? "是的" : "不是" 结果为 ?
alert(1 > 5 ? "是的" : "不是"); // 不是
14、赋值运算符
运算符 x=10 y=5 结果
= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0
15、自定义函数
- 语法
function 函数名(形式参数){函数体}
调用函数：函数名(实际参数);
- 函数只有被调用后才会执行
- 如果函数需要返回值、直接使用return 返回
< type="text/java">
// 定义一个函数 : function
function demo1() {
return 你好;
}
// 调用函数 :
alert(demo1());
- 如果函数需要传递参数、不需要指定参数的类型、直接使用变量即可
< type="text/java">
// 定义一个函数 : function
function demo2(a, b) {
return a + b;
}
// 调用函数 :
alert(demo2(20, 20));//调用函数后显示40
- JS如果出现二个重名的函数名、后者会把前者的覆盖掉
< type="text/java">
// 定义一个函数 : function
function demo3() {
alert("调用...");
}
function demo3() {
alert("你好");
}
//这里不会显示"调用..."，而是显示"你好"
16、匿名函数
-
定义：即没有名字的函数
-
语法
function(形式参数){函数体}
定义函数并赋值给变量：var fn = function(形式参数){函数体}
调用方式：将匿名函数赋值给一个变量，通过变量名调用函数
调用函数：fn(实际参数);
- 实例
< type="text/java">
// 匿名函数 : 即没有名称的函数
var func = function(i, u) {
alert(i + " 喜欢 " + u);
}
// 调用函数 :
func("我", "你");//显示 我喜欢你
17、条件语句
（1） if…else语句
1、形式一
if(条件){
statement
}
var age = 17;
if (age < 18) {
console.log("未成年");
}
2、形式二
if(条件)
statement
else
statement
var age = 17;
if (age < 18) {
console.log("未成年");
}
else {
console.log("已成年");
}
3、形式三
if(条件1)
statement
else if(条件2)
statement
else
statement
var age = 18;
if (age < 18) {
console.log("小于18岁");
} else if (age == 18) {
console.log("刚好18岁");
} else {
console.log("大于18岁")
}
（2）switch…case语句
- switch语句更适用于多条分支使用同一条语句的情况
switch (语句) {
case 表达式1:
语句...
case 表达式2:
语句...
case 表达式3:
语句...
default:
语句...
}
- 注意：一旦符合case的条件，所以我们一般会在case中添加break作为语句的结束。
var today = 7;
switch (today) {
case 1:
console.log("星期一");
break;
case 2:
console.log("星期二");
break;
case 3:
console.log("星期三");
break;
case 4:
console.log("星期四");
break;
case 5:
console.log("星期五");
break;
case 6:
console.log("星期六");
break;
case 7:
console.log("星期日");
break;
default:
console.log("输入错误");
}
18、循环语句
（1）for语句
for(初始化表达式 ; 条件表达式 ; 更新表达式){
语句
}
- 实例：输出1-5
for (var i = 1; i <= 5; i++) {
console.log(i);
}
（2） while语句
while(条件表达式){
语句
}
- 实例：输出1-5
var i = 1;
while (i <= 5) {
console.log(i);
i++;
}
（3）do…while语句
- do…while循环会至少执行一次。
do{
语句
}while(条件表达式);
- 实例：输出1-5
var i = 1;
do {
console.log(i);
i++;
} while (i <= 5);
19、数组
- 数组是用于储存多个相同类型数据的集合
- 数组内的各个值被称作元素，每一个元素都可以通过索引来读取，索引是从零开始的整数
（1）数组的创建
形式一 使用字面量创建
同类型数组创建
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
不同类型数组创建
var arr = [1, "2", 3, "4", 5, "6", 7, "8", 9];
形式二 使用对象创建数组
var arr = new Array();
arr[0] = 1;
arr[1] = "2";
arr[2] = 3;
arr[3] = "4";
arr[4] = 5;
arr[5] = "6";
arr[6] = 7;
arr[7] = "8";
arr[8] = 9;
（2）遍历数组
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
（3）检测数组属性
var arr = [1,2,3,4];
console.log(arr.constructor);
- constructor：返回创建数组对象的原型函数
20、DOM
（1）什么是DOM?
- DOM (文档对象模型)
- DOM是W3C(万维网联盟)的标准，是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
- 对网页进行增删改查的操作。
HTML DOM 模型被构造为对象的树：
（2）DOM查找
1、按id属性查找
var elem=documentgetElementById("id")
- 只用于精确查找一个元素
- getElementById只能用在document上
- 实例：
- 首页
企业介绍联系我们
var ul = document.getElementById('myList')
console.log(ul);
2、按标签名查找
var elems=parentgetElementsByTagName("tag");
- 不仅查直接子节点，而且查所有子代节点
- 返回一个动态集合
- 即使只找到一个元素，也返回集合；必须用[0],取出唯一元素
- 实例：
- 首页
企业介绍联系我们
var ul =documentgetElementById('menuList');
var list = ul.getElementsByTagName('li');
console.log(list);
3、通过name属性查找
document.getElementsByName(name属性值’)
- 可以返回DOM树中具有指定name属性值的所有子元素集合
var list = document.getElementsByName( 'boy');
console.log( typeof list);
4、通过class查找
var elems=parentgetElemnetsByClassName("class")
- 查找父元素下指定class属性的元素
- 实例：
新闻标题1
新闻标题2
新闻标题3
var div=documentgetElementById('news');
var list =div.getElementsByClassName('mainTitle');
console.log(list);
（3）DOM修改
1、读取属性值（了解即可）
第一种 先获得属性节点对象，再获得节点对象的值
var attrNode=elemattributes[下标/属性名];
var attrNode=elemgetAttributeNode(属性名)
attrNodevalue 属性值
第二种 直接获得属性值
var value=elemgetAttribute("属性名")
2、修改属性值
elem.setAttribute("属性名"，value);
- 实例：找到id为al的元素，修改name属性对应的属性值。
var hl=document.getElementById(“al");
hl.setAttributeNode(“name”， zhangji);
3、判断是否包含指定属性
var bool=elem.hasAttribute("属性名")
- 返回 true 或 false
4、移除属性
elem.removeAttribute("属性名")
- 实例：删除 id 为 alink 元素的class属性
百度搜索
var a=documentgetElementById('alink');
a.removeAttribute('class');
5、修改样式
内联样式: elem.style.属性名
强调: 属性名:去横线，变驼峰
比如: css: background-color=>backgroundColor
list-style-type=>listStyleType
（4）DOM添加
在DOM中，添加元素有三步：
- 创建空元素
- 设置关键属性
- 将元素添加到DOM树中
1、创建空元素
var elem=document.createElement(“元素名”)
var tr=document.createElement(“tr”)
var td=document.createElement(“td”)
2、设置关键属性
- 在创建好空元素之后要给空元素设置样式
（1）设置关键属性 元素.属性名
注意：element.属性对class属性无效，因为class可能有多个，这个时候用element.setAttribute(“class”,value)；来设置属性，element.getAttribute(“class”)；来访问属性.
a.innerHTML="go to tmooc";
a.herf="http://tmooc.cn";
结果为：
go back tmooc
（2）设置关键样式
a.style.opacity="1";//单独设置样式
a.style.cssText="width: 100px;height:100px";//统一设置样式
3、将元素添加在DOM树中
(1) parentNode .appendChild(childNode)
var div=document.createElement("div");
var txt=document.createTextNode("版权声明")；
div.appendChild(txt);
document.body.appendChild(div);
(2) parentNode.insertBefore(newChild,pos)
用于在父元素中的指定子节点之前添一个新的子节点：
< type="text/java">
var ul=document.getElementById("menu");
var newLi=document.createElement("li");
ul.insertBefore(newLi,ul.lastChild);
由于每次修改DOM树都会展开搜索一遍（layout）这样一来会导致时间空间开销，所以我们尽量在插入之前处理好子节点以达到优化的目的 :
(1)若同时创建父元素和子元素时，在内存中先将子元素添加到父元素节点上，再将父节点插入DOM树中。
（2）若只添加多个同级子元素，我们可以先将所有子元素临时添加到一个虚拟文档片段中（即为临时父节点），然后将文档片段整体添加到页面中:
1、先创建文档片段：
var frag=document.createDocumentFragment（）;
2、将子元素加入frag中：
frag.appendChild(child);
3、将frag插入到DOM中
parent.appendChild(frag);
append之后frag会自动释放，不会占用元素。
//var arr=document.querySelectorAll(".page");
var arr=document.getElementsByClassName("page");//通过css选择器或类名来查找
for(var i=0;i21、BOM
（1）什么是BOM？
- （Browser Object Model）
专门操作浏览器窗口的API——没有标准，有兼容性问题
（2）浏览器对象模型
- window: 代表整个窗口
- history: 封装当前窗口打开后，成功访问过的历史url记录
- navigator: 封装浏览器配置信息
- document: 封装当前正在加载的网页内容
- location: 封装了当前窗口正在打开的url地址
- screen: 封装了屏幕的信息
- event: 定义了网页中的事件机制
（3）获取窗口大小
获取当前窗口大小
完整窗口大小:
window.outerWidth/outerHeight
文档显示区大小:
windowinnerWidth/innerHeight
（4）定时器
- 定义：让程序按指定时间间隔自动执行任务——网页动态效果、计时功能等
如何选择定时器？
- 只要反复执行，就用周期性
- 只要只执行一次，就用一次性
1、周期性定时器
- 让程序按指定的时间间隔反复执行一项任务
- 语法：
setInterval(exp,time):周期性触发代码exp
exp:执行语句
time:时间周期，单位为毫秒
setInterval(function(){
console.log("Hello World");},1000);
2、一次性定时器
- 让程序延迟一段时间执行
- 语法：
setTimeout(exptime):一次性触发代码exp
exp:执行语句
time:间隔时间，单位为毫秒
setTimeout(function(){
alert("恭喜过关");
},3000);
3、停止定时器
- 暂停定时器执行
1、给定时器取名
var timer =setInterval(function(){
console.log("Hello World");},1000);
2、停止定时器 clearInterval(timer);
22、魔方案例
- 效果图（动态）
- 创建img文件夹，放六张jpg图片重命名为0到6，即可实现魔方
魔方案例
< type="text/java" >
var arr=document.querySelectorAll(".box-page");
//便利6个面中的每一个面
for (var i =0; i 23、JS事件实例
（0）JS事件
- HTML 事件是发生在 HTML 元素上的事情。
- 当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
- 常见的JS事件：
（1）JS直接写入html输出流
JavaScript 能够直接写入 HTML 输出流中：
<>
document.write("这是一个标题
");
document.write("这是一个段落。
");
您只能在 HTML 输出流中使用 document.write。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
（2）JS对事件的反应
我的第一个 JavaScript
JavaScript 能够对事件作出反应。比如对按钮的点击：
（3）JS改变html中的内容
我的第一段 JavaScript
JavaScript 能改变 HTML 元素的内容。
<>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
（4）JS改变html的样式
我的第一段 JavaScript
JavaScript 能改变 HTML 元素的样式。
<>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
（5）JS验证输入
我的第一段 JavaScript
请输入数字。如果输入值不是数字，浏览器会弹出提示框。
<>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("不是数字");
}
}
