为什么要学习javaScript
网页三部分：
HTML：控制网页的 结构
CSS：控制网页的 样式
JavaScript：控制网页的行为
不同于HTML和css，JavaScript是一门编程语言，因此要比HTML和css复杂一些，学习的时间也更长。
JavaScript的组成(掌握)
js是有三个部分组成的 ECMAScript、BOM、DOM
图片.png
- ECMAScript - JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准,与具体实现无关
- DOM：一套操作网页元素的API(方法)
- BOM：一套操作浏览器功能的API(方法)
js使用方式
<script src="js文件路径"></script>
这是一对html标签，原则上可以放在html页面的任意位置,src后链接的是JavaScript文件，文件的扩展名为.js，如index.js,在里面直接写js文件即可.
<script type="text/javascript" src="/admin/lib/layer/2.4/layer.js"> </script>
注意:一般是将js代码放到body最后,多以当执行到js代码时,html页面都已载入完成,避免找不到元素而报错.
外联方式
第一步: 新建demo.js
图片.png
第二步:在html页面中引入
图片.png
注意:此时的js的html文件在同一个目录下面
总结:外联方式在写项目的时候,使用.
内联方式
直接减js写在html中,要使用script标签
<script type="text/javascript">
//在script标签内写js脚本
</script>
简写:
<script>
//在script标签内写js脚本
</script>
错误的写法：
<script src="js文件路径">
//在script标签内写js脚本
</script>
注意:js代码要写在script标签之内.
行内写法:
直接在html标签中写js,只有绑定事件才这么写
<a href="#" onclick="var a=1;alert(a)"> 点我</a>
js的输出(记忆)
例1:在页面上输出'I have a dream'
document.write('I have a dream');
例2:输出'I have a dream'切加粗
// 文本加粗输出
document.write('<strong> I have a dream</strong>');
例3:控制台中的输出
console.log('I have a dream');
打开浏览器,按住F12键,即可召唤出控制台,后面js的效果调试都在这里
例4:以弹出框的形式输出内容
alert(123);
例5: confirm 确认框
//confirm弹出一个确定框
confirm("我帅吗？");
例6: prompt : 输入框
//prompt:弹出一个输入框，可以输入值
prompt("请输入你的真是年龄");
javaScript的注释(掌握)
行注释 //
表识当前行的代码不注释,或者解释下一行代码的意思
块注释 /代码块/
多用来多行代码注释不执行,或者解释某一块代码的功能.
var name; // 声明一个变量 name name = '乘风破浪'; // 一个等号 是赋值,,后面的值赋值给前面的-
同时声明+赋值
var name = '峰哥好帅'; var str = "帅的飞起来"; console.log(name,str);
-
同时声明多个变量并赋值
var age = 10,name= 'zs' // 相当于 var age = 10; var name = 'zs'; console.log(name,age);
-
不声明变量，直接赋值(不会报错，但是不推荐)
// 没有用 var 修饰的不管代码在哪里都是全局的 // 不推荐 height=100; console.log(height);
-
不声明变量，也不赋值变量，直接使用（会报错）
// weight is not defined 要知道是没有定义,,估计是变量名写错了 console.log(heightt);
结论：
-
变量需要声明之后，才能使用，养成一个良好的编程习惯。
-
javascript代码一旦报错了，后面的代码就不再执行了。
-
规则 : ( 必须遵守的,不遵守会报错 )
-
由字母、数字、下划线、$符号组成 ;
-
不能以数字开头
-
区分大小写
-
不能是关键字和保留字 (不用死记 , 慢慢就见多了)
//关键字：对于js来说有特殊意义的一些单词 //保留字：js保留了一些单词，这些单词现在不用，但是以后要用。
-
-
规范 : (建议遵守的 不遵守不会报错)
-
变量名必须有意义
-
遵守驼峰命名法。 首字母小写,后面单词的首字母需要大写!
myName, userPassword
-
关键字(了解)
以下这些关键字用于执行特定操作等。按照规则，关键字也是语言保留的，不能用做标识符
| break | do | instanceof | typeof |
|---|---|---|---|
| case | else | new | var |
| catch | finally | return | void |
| continue | for | switch | while |
| debugger* | function | this | with |
| default | if | throw | delete |
| in | try |
保留字(了解)
未来可能做为关键字的存在
| abstract | enum | int | short |
| boolean | export | interface | static |
| byte | extends | long | super |
| char | final | native | synchronized |
| class | float | package | throws |
| const | goto | private | transient |
| debugger | implements | protected | volatile |
| double | import | public |
例1:以数字开头的变量
var a = 'I have a dream!';
console.log(a);
var 2a = 'Hello';
console.log(2a);
例2:以关键字开始的变量
<script>
var do = '测试';
console.log(do);
</script>
-
规则 : ( 必须遵守的,不遵守会报错 )
-
由字母、数字、下划线、$符号组成 ;
-
不能以数字开头
-
区分大小写
-
不能是关键字和保留字 (不用死记 , 慢慢就见多了)
//关键字：对于js来说有特殊意义的一些单词 //保留字：js保留了一些单词，这些单词现在不用，但是以后要用。
-
-
规范 : (建议遵守的 不遵守不会报错)
-
变量名必须有意义
-
遵守驼峰命名法。 首字母小写,后面单词的首字母需要大写!
myName, userPassword
-
关键字(了解)
以下这些关键字用于执行特定操作等。按照规则，关键字也是语言保留的，不能用做标识符
| break | do | instanceof | typeof |
|---|---|---|---|
| case | else | new | var |
| catch | finally | return | void |
| continue | for | switch | while |
| debugger* | function | this | with |
| default | if | throw | delete |
| in | try |
保留字(了解)
未来可能做为关键字的存在
| abstract | enum | int | short |
| boolean | export | interface | static |
| byte | extends | long | super |
| char | final | native | synchronized |
| class | float | package | throws |
| const | goto | private | transient |
| debugger | implements | protected | volatile |
| double | import | public |
例1:以数字开头的变量
var a = 'I have a dream!';
console.log(a);
var 2a = 'Hello';
console.log(2a);
例2:以关键字开始的变量
<script>
var do = '测试';
console.log(do);
</script>
类型之间的转换
为什么要进行类型转换???
服务器拿回来的数据,有可能是字符串,比如age='18',
var age = '18';
console.log(age+1);
查看变量的类型
typeof关键字可以查看数据的类型
var num = 11;
console.log(typeof num);
num = "abc";
console.log(typeof num);
小技巧：在控制台可以根据颜色来判断数据的类型哦(__) **
转换成 数值 -number
- 1 Number()
console.log(Number('55'));
Number()可以把任意值转换成数值类型，但是如果字符串中有不是数字的字符，返回NaN
- 2 parseInt() 和 parseFloat()
- parseInt() 把字符串类型的整数或者小数都转化为整数;
- parseFloat() 把字符串类型的整数转化整数,把小数转化为小数
var num1 = parseInt("12"); // 12
var num1 = parseInt("12.3"); //12
var num1 = parseFloat("12"); //12
var num1 = parseFloat("12.3");//12.3
var num1 = parseInt("12.3abc"); // 返回12，如果第一个字符是数字会解析知道遇到非数字结束
var num2 = parseInt("abc123"); // 返回NaN，如果第一个字符不是数字或者符号就返回NaN
- 3 算术运算 (最常用)
var str = '500';
console.log(+str); // 取正
console.log(-str); // 取负
// 强制将 - 两边的非数字,转化为数字
console.log(str - 0); +0呢???拼接
转换成 字符串类型 - string
- 1. String ( )
var num = 5;
num = String(num);
console.log(num);
- 2. toString ( )
var num = 5;
console.log(num.toString());// 把数值5变成字符串5
//将来所有的数据都会有toString()方法，除了null和undefined
- 3. 拼串，(最常用)
var num = 5;
num = num + "";
console.log(num);
转换成布尔类型
所有的值都可以转换成布尔类型
其中 0, "", undefined，null， NaN，这几个值会转换成false，其他值都会转换成true
这个代表的五大基本类型
// 没有值 => false
// 有值 => true
// number string undefined null
// 0 ''
注意 :
1. 'false' 它是字符串
2. NaN => false
- Boolean() 转化为布尔值
console.log(Boolean(1));
console.log(Boolean(0));
- !! 第一个! 将值转为 bool且取反,第二个则是转为本身
var a = "abc";
console.log(!!a);
网友评论