1.简介
- JavaScript 是脚本语言
- JavaScript 是一种轻量级的编程语言。
- JavaScript 是可插入 HTML 页面的编程代码。
- JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
- JavaScript 很容易学习。
注释的意义：解释说明代码的作用
单行注释：// 注释
多行注释：/* 注释 */
文档注释：/** 注释 */2.基础
编程语言：以处理数据为核心的
编程语言中表示数据：
数据类型：表示数据的类型
变量：编程语言中用来临时存储数据的容器
数据类型：
1. 基本数据类型
String：字符串
Number：数字【整数、浮点数】
Boolean：布尔类型【true/false】
undefined：未定义类型
null：表示为空的类型
2. 引用数据类型：一般情况用来表示对象的
object对象类型
变量：
准备：JavaScript是一个面向对象的弱类型的脚本语言
>变量定义：使用var关键字来定义变量【推荐】
>变量命名规则：变量名称只能以下划线(_)，$符号或者字母开头。
>变量的命名规范：1驼峰命名法(一个或者多个单词组成，第一个单词全部小写，后面每个单词首字母大写)；2见名知意
>变量的使用规则：先声明，后使用
> JavaScript变量，一般以下划线开头[近年出来的规范]
> 可以使用它typeof（）来判断某个数据的类型
数据类型的转换：
字符串->数字 Number()
字符串->整数 parseInt()
字符串->浮点数 parseFloat()
JavaScript错误调试
1.代码开发过程中，不一定会提示错误！
2.在浏览器的F12窗口中，如果JavaScript代码执行出现错误，就会在Console(控制台)提示错误信息和错误代码的位置！
运算符：
算数运算符：+ - * / %
赋值运算符：= += -= *= /= %=
关系运算符：> >= < <= != == ===
逻辑运算符：与运算&& 或运算|| 非运算 !
三元运算符： 简化的if-else判断
(条件)?(条件为真执行的代码):(条件为假执行的代码)3.循环
/*
JS中提供了三种普通循环结构
for循环
while循环
do-while循环
*/
/*for(var i = 0; i < 10; i++) {
// alert("差一点一米八" + i);
console.log("for循环执行结果：" + i);
}*/
/*var x = 0;
while(x > 10){
console.log("while循环执行结果：" + x);
x++;
}*/
/*var m = 0;
do{
console.log("do-while循环：" + m);
m++;
}while(m > 10);*/
/*
循环中的continue和break
*/
// continue是结束本次循环，直接开始下一次循环
for(var i = 0; i < 100; i++) {
if(i % 33 == 0){
// continue;/*终止本次循环，直接开始下次循环*/
// break;/*跳出循环*/
}
console.log(i);
}
// break;直接跳出循环九九乘法表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>九九乘法表</title>
<style type="text/css">
span{
display: inline-block;
width: 100px;
height: 20px;
border:solid 1px red;
}
</style>
<script type="text/javascript">
for (var i = 1; i<=9; i++) {// 控制的行数
document.write("")
for (var m = 1; m<=i; m++) {// 控制的是列数
document.write("<span>"+m+"x"+i+"="+(i*m)+"</span>");
}
document.write("<br/>");
}
var m=1;
while(m<=9){
var n=1;
while(n<=m){
document.write("<span>"+n+"x"+m+"="+(n*m)+"</span>");
n++;
}
document.write("<br/>");
m++;
}
var x=1;
do{
var y=1;
do{
document.write("<span>"+y+"x"+x+"="+(x*y)+"</span>");
y++;
}while(y<=x);
document.write("<br>");
x++;
}while(x<=9);
</script>
</head>
<body>
</body>
</html>
九九乘法表
4.函数操作
函数：是封装了一段代码，方便这段代码的重复使用
def <func_name>(参数列表):
函数中的代码
return 返回值
javascript中可以通过function关键字来定义函数函数中的参数:函数要执行必须需要的数据
定义在函数中的变量：形式参数
实际调用函数时传递的数据：实际参数函数的返回值：函数执行完成之后返回的结果
通过return关键字来返回函数执行的结果
5.字符串操作
JS中，包含在一对单引号或者双引号中间的字符，称为字符串
var _str = " hello javascript! "
// 字符串的长度
console.log(_str.length);
// 判断某个字符第一次出现的位置
console.log(_str.indexOf("a"))
// 判断某个字符最后一次出现的位置
console.log(_str.lastIndexOf("a"))
// 截取一段字符串
console.log(_str.substring(4,10))
// 剔除字符串两边的空格
console.log(_str);
console.log(_str.trim());6.Math对象
Math对象，可以通过Math...直接使用它的函数
Math.random() 获取一个0~1之间的随机数
Math.floor(x) 向下取整；获取一个数据的最大整数
Math.ceil(x) 向上取整
Math.round(x) 四舍五入
Math.pow(x, y) 获取x的y次方
Math.sqrt(x)开平方
声明数组，使用方括号
var _names = ["柯景腾", "沈佳宜", "许博淳", "谢明和"]7.函数操作
这里主要指字符串的各种函数str.length() 获取字符串长度str.charAt(index)获取指定位置的字符str.indexOf(char)获取指定字符在字符串中出现的位置str.lastIndexOf(char)获取指定字符在字符串中最后出现的位置str.substring(start, end)截取字符串str.slice(start, end)截取字符串
8.数组的使用
pop()删除最后一个元素push()末尾追加一个元素shift()删除开头的一个元素unshift()开始位置增加一个元素indexOf()查看某个元素的位置length获取数组的长度
9.内置日期时间对象Date
创建日期对象new Date()
获取年份：getFullYear()
获取月份：getMonth() 注意：获取月份 0~11
获取天数：getDate()
获取星期：getDay()
获取小时：getHours()
获取分钟：getMinutes()
获取秒钟：getSeconds()
获取毫秒：getMilliseconds()
延时函数：setTimeout(fn, time)
计时函数：setInterval(fn, time)
10.js中innerHTML与innerText的用法与区别
用法：
<div id="test">
<span style="color:red">test1</span> test2
</div>
在JS中可以使用：
test.innerHTML
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。
test.innerText
从起始位置到终止位置的内容, 但它去除Html标签
上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。
test.outerHTML
除了包含innerHTML的全部内容外, 还包含对象标签本身。
上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>
getElementById()方法可返回对拥有指定 ID 的第一个对象的引用。document.getElementById(id)说明
HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有getElementsByName()和getElementsByTagName()。
不过，如果您需要查找文档中的一个特定的元素，最有效的方法是getElementById()。
在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。