1.1 JavaScript 简介
JavaScript 简称 js。 是一种浏览器脚本语言，给浏览器中的网页内容添加动态特效。
JavaScript和Java一点联系都没有。硬说有联系 就是JavaScript的名字是借鉴了java。
?
JavaScript核心： ECMAScript 语言基础 ? BOM操作 ? DOM操作 ? ES5 ES6 ES7
H5 : HTML5 CSS3 ESMAS6
?
可以写服务器程序 写浏览器程序 写电脑程序 写操作系统 写U3D
?
1.2 JavaScript 的两种形式
1 页内样式
在head或者body中添加一个script标签，在标签里面写 js代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
</script>
</body>
</html>
注意 ： 建议大家在body的结束标签上面写script标签。 因为代码从上往下执行， 如果我们写到上面 会出现一种情况 就是js代码执行了 但是网页上面的标签还没有渲染，就会导致js失效。所以写到 body结束标签上面 就会规避这个问题。 要写到 head中，也可以 ，但是需要添加代码 window.οnlοad=function(){}
?
2 页外样式
A 在 当前工程的 js文件夹中 创建一个 xxx.js文件 在文件中写js代码
B 在需要使用的html中 通过 script标签 添加src 进行引入（注意 css引入使用的是 link 页内用的是 style）
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script src="js/haha.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
</script>
</body>
</html>
注意 ： 如果页内页外的都使用 此时需要创建多个 script标签 ，因为 一个script标签 一旦添加 src 就不能写页内代码了
?
1.3 变量
A 为什么需要使用变量？ --- 没有变量的时候 有什么问题？
?
假如 班主任 需要统计大家的信息
?
小明 18 ? 小红 18 小李 18 小王 18 .... 一万个同学 今年都是18
到明年的时候 所有人的年龄都变成了 19
此时班主任老师 需要一个一个的改成19 需要改一万次。 这就是直接使用数据的结果
此时想了一个新的办法 ? a = 19
小明 a ? 小红 a 小李 a 小王 a .... 一万个同学 今年都是a ? 这就是一种间接的思想
到明年的时候 所有人的年龄都变成了 20
此时我们只需要将 a 改变成 20 改一次 所有人的年龄都变成 20 了。
此时 发现 a能代表数据 并且能根据需求进行改变 所以就将a 命名为 变量。
为什么需要使用变量的概念？ 因为 体现编程中的 “间接” 思想。 以后写代码的时候 会发现 各种的间接操作。
?
B 什么是变量？ ? 编程中用来存储数据的最小存储单元 就是 变量；
?
C 变量的声明
我们在编程中 要使用变量 首先要将其创建出来 （怎么创造变量 不一样的编程语言 代码不一样）
?
<script type="text/javascript">
var ?a = 666;
</script>
?
格式： var 变量名 = 初始值;
?
var ? 在js中 创建变量的关键字 ，也就是说 当我们写完var 浏览器执行到这句代码的时候 它就清楚明白的直到 要为你创建一个变量
?
变量名 名字是我们自己起的。所以我们程序员自己起的名字 都有约定俗成，变量在命名的时候： 英文 有意义 小驼峰
? ? ? 小驼峰就是 首字母小写 如果有多个单词 从第二个单词开始首字母大写 例如： maxAge getElementByClassName
?
= ? ? 赋值符号。代表是 将右边的运行结果 赋值给 左边。 代码执行 从上往下 从右往左。
? ? ? var a = 12 + 30; ?
初始值 就是变量在创建之处 存储的数据是什么。 初始值有很多中情况 与js的数据类型相关。
?
D 变量的应用
?
<script type="text/javascript">
var ?a = 6;
/* ? 变量可以用来赋值 代表是 将当前变量的值赋值给其他变量 */
/* ? 创建了一个变量 b 并且 将a的值 赋值给了 b */
var ?b = ?a;
/* 为什么叫做变量 是因为值能改变 如何改变呢？ 就是给变量 重新赋值 ? 。 变量定义了以后 可以使用多次 */
b = a+a;
/* 变量其实就是一个代号 ? */
b = a+b;
</script>
?
?
E 输出语句
?
console.log( b );
/* js功能代码 */
alert( b );
confirm( b );
prompt( b );
document.write( b );
?
区分大小写。
?
F 错了怎么改
在浏览器控制台 看错误在哪里
?
Uncaught ReferenceError: c0nfirm is not defined ? ? ? ? ? ? <anonymous> http://127.0.0.1:8848/day07-10.25/index.html:29
?
? ?
1.4 运算符
一目 ? ++ --
<script type="text/javascript">
var ?a = 8;
a++;
a--;
document.write( ?a );
</script>
?
?
二目： ? ? ? + ? - ? * ? / ? % 取余 ? += -= ? *= /= ? ? > ?< ?>= <= ? ?== 等于 === 绝对等于 ?!= 不等于 ?
<script type="text/javascript">
var a = 8;
var b = 56;
/* 代表 a 除以 b 的 余数 */
var c = a%b;
document.write( c );
</script>
?
<script type="text/javascript">
var ?a = 8;
a/=3;
document.write( ?a );
</script>
?
三目: ? ? ? (条件表达式) ? (真) :(非真)
?
<script type="text/javascript">
var ?a = 8;
var ?b = 10;
var ?c = (a<20) ? (a<6?a+b:a-b) : ( a*b );
document.write( ?c );
</script>
?
?
1.5 数据类型
不同的值 有着不同的数据类型
?
<script type="text/javascript">
// number数字类型
var ?a1 = 10;
var ?a2 = 20.5;
// string字符串类型
var ?b1 = "你好 世界";
var ?b2 = "你好 110";
var ?b3 = "20.5";
var b4 = "true";
// boolean布尔类型 ? 表示逻辑判断的结果 true真 false 非真
var c1 = true;
var c2 = false;
// object类型
var d1 = null;
// undefined 未定义类型
var e;
/* 输出变量的数据类型 */
console.log( ?typeof ? a1 );
</script>
1.6 字符串拼接
运算符中 + 号 有两种运算形式：
?
A 数学相加运算
如果参与运算的变量 全都是 number类型 则进行数学相加
?
B 字符串拼接运算
如果参与运算的变量 有一个是字符串 则进行字符串拼接
?
?
<script type="text/javascript">
var ?a = 10;
var ?b = "你好";
var ?c = a+b;
console.log( ?c );
</script>
?
<script type="text/javascript">
var ?c = 10+10+10+"10";
var ?c1 = 10+"10"+10+10;
var ?c2 = 10+10+"10"+10;
var ?c3 = "10"+20+"10"+20;
console.log( ?c , c1 , c2, c3);
</script>
?
?
1.7 字符串转数字
在 实际操作中 会出现一种情况 得到的内容是字符串类型 但是我们又希望进行数学相加。
?
所以我们需要将 字符串 转换成 数字类型 再相加。
<script type="text/javascript">
? ? ? /* 弹出一个框 用户进行输入 ? 然后将用户输入的内容 赋值给 a */
? ? ? var ?a = prompt("请输入一个数字");
?
? /* 弹出一个框 用户进行输入 ? 然后将用户输入的内容 赋值给 b */
? var ?b = prompt("请输入一个数字");
? /* parseInt() 取整转换 var c = parseInt(a) + parseInt( b); */
?/* ? var c = parseFloat(a) + parseFloat( b); */
? var ?c = ?Number(a) + Number( b);
? document.write(c);
</script>
|