JavaScript入门及进阶知识点整理01
一、JavaScript简介与作用
JavaScript是运行在浏览器端的脚本语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互,JavaScript是浏览器解释执行的,是一种解释型语言。
前端的三大块:
1.HTML 负责页面结构
2. CSS 负责页面的表现 如颜色 元素大小 位置 显示等
3.JavaScript 负责页面行为 部分动画效果 页面与用户的交互,页面的功能
二、JS的三种书写方式
1.行内式写法
行内式写法是将JS语句写在HTML语句中,不推荐使用行内式写法,只需知道怎么使用的即可
<body>
<!-- 1.行内式 不推荐 -->
<div style="color:red" οnclick="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.οnlοad=function(){
var oDiv=document.getElementById('div1');
//利用获取到的对象来设置对象的style, style值要用引号括起来
// 在JS中 原本CSS中带“-”的属性都会被去掉“-” 然后把“-”后面的首字母大写
<body>
<div id="div1">div标签</div>
</body>
2.获取并设置标签自带的属性
<script>
window.οnlοad=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.οnlοad=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:当网页加载完成后执行的操作