JavaScript入门及进阶知识点整理01
一、JavaScript简介与作用
JavaScript是运行在浏览器端的脚本语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互，JavaScript是浏览器解释执行的，是一种解释型语言。
前端的三大块：
1.HTML 负责页面结构
2. CSS 负责页面的表现 如颜色 元素大小 位置 显示等
3.JavaScript 负责页面行为 部分动画效果 页面与用户的交互，页面的功能
二、JS的三种书写方式
1.行内式写法
行内式写法是将JS语句写在HTML语句中，不推荐使用行内式写法，只需知道怎么使用的即可
<body>
<!-- 1.行内式 不推荐 -->
<div style="color:red" onclick="alert('这是行内式写法!')">div标签</div>
</body>
2.嵌入式写法
将JS语句写在script语句中，与HTML语句分离开来
<script>
// alert('这是嵌入式写法');
</script>
3.外链式写法
外链式顾名思义就是将JS语句放到外部文件中，然后通过地址链接来获取到JS语句，但是必须保证所给文件地址是正确的 且目标文件类型是js文件类型
<script src="./js/hello.js">
//在外链式写法里面不要写入其他JS语句了，写了也不会执行，因为外链式的JS语句会把这块区域覆盖，包括你加入的任何语句
</script>
三、JS中的变量
1.变量的类型
基本数据类型
- 数字类型 int float
- 字符串 string
- 布尔类型 true false
- 未定义undefined变量未赋值就是undefined、
- 空类型 null
复合数据类型
var oObj = { name:"张三", age:16, }使用typeof（）方法可以查看数据的类型
2.JS中变量名的命名规范
- 严格区分字母大小写
- 由字母数字下划线$符号组成
- 首字母可以是字母 下划线 $
技巧：定义变量的时候使用var+变量名的方式进行定义 变量名除了要见名知义以外，还要做到首字母为变量类型的第一个字母，即如果定义一个字符串，可以这样定义-----var sStr="这是一个字符串"; 以此类推
四、JS中的语句和注释
- 每条语句 结尾以 英文的分号结尾
变量 属性 函数 名称尽量见名知意
-
单行注释
- win系统: ctrl + /
- Mac系统: command + /
-
多行注释
- win系统: alt + shift + a
- mac系统: option + shift + a
五、函数
1.函数的定义
<script>
function fnTest() {
alert("这是一个没有参数的函数");
}
function fnTest1(a, b) {
//返回函数的结果或者停止函数的执行
return a + b;
}
fnTest();
//将函数返回结果保存在变量中
var sResult=fnTest1(1,2);
alert(sResult);
</script>
2.预解析
解释器在未执行代码之前先读一遍代码
（1）、变量的预解析
如果前面先使用变量，后面再定义变量，此时变量的值为undefined
（2）、如果前面先调用函数，后面再写函数的定义，系统会提前解析出函数的定义，从而使得函数能正常调用，这一点跟python中函数的定义与调用有很大区别
3.匿名函数
匿名函数就是在函数定义的时候没有给定名字的函数，就成为了匿名函数。
注意：单独使用匿名函数会报错，匿名函数必须要赋值给变量或者属性才能生效
如果一个函数只被调用一次且还是触发时间后才会执行的函数，那么就可以把这个函数定义为匿名函数，如果一个函数被多次调用，就不能定义成匿名函数。
六、条件语句
- "==" js中会默认转换数据类型,将数据类型转换成统一类型后再比较
- "===" 不会转换数据类型,如果类型不一样就是不相等了
- "&&" 一假则假,只要有一个条件不成立那就不成立
- "||" 一真则真,只要有一个条件成立那就为真
- "!" 取反 真变假 假变真
<script>
if(2>1){
alert("2>1成立");
}else if(2<1){
alert("2<1成立");
}else{
alert("这个地方我也不知道写啥好");
}
</script>
七、JS获取元素标签、设置标签属性及标签元素
在此处要说明一下：当获取到标签对象后，对于设置标签的样式和标签自带的属性这两种写法是不一样的，具体不同请参照一下程序片段。
1.获取并设置标签的样式
<script>
// onload是当网页加载完成之后才会执行的动作，而此处的网页代码执行完毕并不渲染网页而是在js中渲染
window.onload=function(){
var oDiv=document.getElementById('div1');
//利用获取到的对象来设置对象的style， style值要用引号括起来
// 在JS中 原本CSS中带“-”的属性都会被去掉“-” 然后把“-”后面的首字母大写
<body>
<div id="div1">div标签</div>
</body>
2.获取并设置标签自带的属性
<script>
window.onload=function(){
var oA=document.getElementById('aflag');
// 在此处修改标签的自带属性的时候不需要加入style，可以直接进行修改
oA.href="http://www.baidu.com";
oA.target='_self';
}
</script>
<body>
<a id="aflag" href="#" target="_blank">这是一个a标签</a>
</body>
3.获取标签对象并获取标签元素及设置（修改）元素
<script>
window.onload=function(){
// 获取标签对象
var oDiv=document.getElementById('div1');
// 获取标签的元素 可以用innerHTML也可以用innerText 但是innerText永远只是返回字符串对象
// 如果标签内的元素是一个嵌套的标签，那使用innerText就把嵌套的标签变成了字符串，失去了原本的标签意义
alert(oDiv.innerHTML);
// 进行修改元素
oDiv.innerHTML="这是修改后的标签元素";
alert(oDiv.innerHTML);
// 把原本文本元素修改成一个嵌入的标签
oDiv.innerHTML='<a href="#" class="a01" id="link01">a标签</a>';
alert(oDiv.innerHTML);
// 此时网页上显示的标签元素也会相应的变为a标签中的元素并带有超链接功能
}
</script>
body>
<div id="div1">这是一个div标签</div>
</body>
八、零碎知识点
1.明确未定义和没有定义的含义
undefined : 只声明不赋值 (js给变量的默认值)
iNum02 is not defined : 没有定义 : 没有声明直接使用 (这是一个错误)
2.变量或者函数如果没有指定返回值，都会返回undefined
3.为了避免JS找不到标签对象，可以把JS语句放在body里面
4.JS通过style属性操作的属性都是行内样式，这是因为行内样式的权重值较高，这样才能保证JS修改的内容不会被高权重的样式覆盖掉。
5.可以使用parseint（）将一个字符串转换为数字类型
6.JS中的一部分属性和方法的命名并没有按照驼峰命名法，这是历史遗留的问题
7.函数的参数, 就是一个变量 , 不加关键字: var
8.alert（“弹框内容”） 浏览器弹出警示框 onclick:当点击对象的时候执行的操作 onload：当网页加载完成后执行的操作