JavaScript简介
1995年由Netscape公司在网景导航者浏览器上首次设计而成。Netscape在最初将其脚本语言命名为LiveScript 。后来因为Netscape与Sun合作,网景公司管理层希望它外观看起来像Java,因此取名为JavaScript。
JavaScript是一门客户端脚本语言,主要运行在浏览器中,浏览器中负责运行JavaScript脚本代码的程序叫JavaScript引擎。
笔记大纲
- js基础概念
- js基本语法
- 事件驱动
- 嵌入方式
- DOM操作(重点是查询)
今日推荐:★★★☆☆
基础概念
js是一门弱类型语言,对数据类型要求比较弱,不严格。(用var声明,不赋值没有意义)
js是一种动态型语言,常见的动态的赋值(使用期间可以修改变量的值)。
js是一种基于对象和事件驱动的脚本语言。
js脚本语言特点:直接运行在浏览器中,因为各个浏览器厂商都会提供js引擎!
1.基本语法
(1)变量
a.使用var声明变量时无数据类型,使用typeof()验证变量的数据类型。
代码示例:
<script type="text/javascript">
var i =18;
alert(i); <!--数值18-->
var i =18;
alert(typeof(i)); <!--number 数值型-->
var i="daxia";
alert(typeof(i));<!--string 字符型-->
var i=false;
alert(typeof(i));<!--boolean 布尔型-->
var i=18;
i="daxia";
alert(typeof(i));<!--动态的赋值 最终是string-->
</script>
页面效果1:
页面效果2:
b.在js中可以不声明变量,就直接赋值使用。(不建议)
<script type="text/javascript">
i =18;
alert(typeof(i));
</script>
c.变量严格区分大小写
e.变量命名规则:只能是数字(0-9)、字母(a-z)、_、$,其中数字不能放在首位(与Java的命令规则是一致的)。
[1]基本数据类型(7种)
数据类型 | 说明 |
---|---|
①number 数值型(代替java中的整型与非整型) | |
②string 字符型(s是小写) | |
A.基本类型 | ③boolean 布尔型 |
④null | |
⑤undefined 未定义(没有赋值) | |
⑥数组:typeof(arr)返回的是object | |
B.对象类型 | ⑦对象 |
函数 |
代码示例(数组):
<script type="text/javascript">
<!-- Js表示数组方式1 -->
var arr =["codinglin","JavaScript",809];
alert(arr); <!-- codinglin,JavaScript,809-->
<!-- Js表示数组方式2 -->
var arr2 =new Array("codinglin","JavaScript",809);
alert(typeof(arr2)); <!-- object -->
var arr3 =new Array("codinglin","JavaScript",809);
alert(arr3[0]); <!-- codinglin -->
alert(typeof(arr3[0]));<!-- string -->
</script>
代码示例(对象):
<script type="text/javascript">
<!--Js表示对象方式1-->
var info = new Object();
info.name="codinglin";
info.age=18;
info.skill=function(){
alert("专业技术10年");
}
<!--skill是一个函数-->
info.skill(); <!--专业技术10年-->
alert(info.name);<!--codinglin-->
<!--Js表示对象方式2 json方式-->
var jsonObj ={"name":"林大侠","age":18,"study":function(){
alert("学习总结JavaScript");
}};
jsonObj.study();<!--学习总结JavaScript-->
alert(jsonObj.name);<!--林大侠-->
</script>
[2]运算符(与java一致)
[3]流程控制(与java一致)
代码示例(Js应用):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HelloWorld空白</title>
<script type="text/javascript">
//借助window.onload事件,在这个页面加载完成后执行程序代码
window.onload = function(){ <!--相当于java中的main方法-->
//获取按钮对象
var btnEle =document.getElementById("btnId");
//给按钮对象绑定单击响应函数
btnEle.onclick =function(){
//弹出警告框
var luckyNum ="0110"; <!-- string类型-->
alert("https://coding"+luckyNum +"lin.blog.csdn.net");
};
};
</script>
</head>
<body>
<button id="btnId">欢迎关注林大侠博客</button>
</body>
</html>
页面效果:
(2)函数(重点理解)
A.函数声明
在js中使用function声明函数
格式:
【非匿名函数】a.function 函数名([参数类型]){}
【匿名函数】b.function([参数类型]){}
注意:
如果需要返回值类型,直接return值。
B.有名函数调用
js中调用函数,不检查形参与实参的匹配情况。
形参>实参(形参少了) :
此时数据类型为number型,返回NaN(not a number)
本质是:数值+undefined
此时数据类型为string型,输出结果为:值+undefined【拼接方式】
形参<实参(实参多了):
自动忽略后面多余的参数!
C.匿名函数调用
a.与事件结合定义。
b.使用变量名指向函数。
注意:调用函数时,使用函数名||函数名()区别
A.函数名:使用函数的引用
B.函数名():直接触发(执行)函数
代码示例a:
<!--a.与事件结合定义-->
<script type="text/javascript">
window.onload=function(){
alert("匿名函数--与事件结合定义测试");
}
</script>
代码示例b:
<!--b.使用变量名指向函数。-->
<script type="text/javascript">
var method =function(){
alert("匿名函数--使用变量名指向函数测试");
}
method();
</script>
(3)对象
Js一般分为内置对象(window、document、location、Array、Date等)和自定义对象两种,函数也是对象。
<script type="text/javascript">
<!--a.与事件结合定义-->
var method =function(){
alert("函数也是对象测试");
}
method.blog="https://coding0110lin.blog.csdn.net";
alert(method.blog);<!--https://coding0110lin.blog.csdn.net-->
}
</script>
2.事件驱动
(1)事件分类
系统事件 比如:window.onload。
用户事件 比如:btnEle.onclick||onblur||onsubmit等。
(2)常用事件
onload事件:加载事件。
onclick事件:鼠标单击事件,鼠标单击时触发。
onblur事件:失去焦点事件。如点击用户名文本框,会有蓝色的边框色,这叫聚焦。
onchange事件:文本改变且失去焦点时触发。
onsubmit事件:提交表单事件。
代码案例:
onchange事件:文本改变且失去焦点时触发。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>event</title>
<script type="text/javascript">
<!--借助window.onload事件,在这个页面加载完成后执行程序代码-->
window.onload = function(){
<!--例如注册校验用户是否存在(假设数据库只有一个用户,名为lindaxia)-->
var btnUserName =document.getElementById("username");
btnUserName.onchange=function(){
var username =btnUserName.value;
if("lindaxia" == username){
alert("用户名已存在,请重新输入");
}else{
alert("用户名可用");
}
alter(username);
}
};
</script>
</head>
<body>
用户名:<input type="text" name="username" id="username">
</body>
</html>
页面效果:
(3)事件驱动成功三要素
A.声明事件
B.绑定到指定控件上
C.触发事件
3.嵌入方式(Js)
注意:window.onload:当前文档完全加载后触发执行!
window.onload:当前文档只能书写一次,书写多次,后边会覆盖前面的代码!
完全加载:即使有图片、音频、视频等资源,先等资源加载完毕后,才会触发函数。
(1)行内(不建议使用)
写到标签的事件属性中,结构与行为相耦合!
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内--嵌入方式测试</title>
</head>
<body>
<!--alert()是单引号-->
<button id="btnId" onclick="alert('代码诚可贵,生命价更高');">行内嵌入测试</button>
</body>
</html>
(2)内部(不建议使用)
代码示例(方式一):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内--嵌入方式测试</title>
</head>
<body>
<button id="btnId">行内嵌入测试</button>
</body>
<!-- 必须要注意位置! -->
<!-- 位置不正确会报错Uncaught TypeError: Cannot set property 'onclick' of null -->
<script type="text/javascript">
var btnEle = document.getElementById("btnId");
btnEle.onclick=function(){
alert("加油加油!");
}
</script>
</html>
代码示例(方式二):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内--嵌入方式测试</title>
<script type="text/javascript">
window.onload=function(){<!--window.onload表示当前文档加载后执行-->
var btnEle = document.getElementById("btnId");
btnEle.onclick=function(){
alert("加油加油!");
}
};
</script>
</head>
<body>
<button id="btnId">行内嵌入测试</button>
</body>
</html>
(3)外部
书写xxx.js中
使用<script src="路径"> 标签引入外部js文件,注意一旦<script>标签中存在src属性,此时该标签的作用为:引入外部js,不能在该标签中书写js代码。
代码示例(外部outertest.js文件):
window.onload=function(){<!--window.onload表示当前文档加载后执行-->
var btnEle = document.getElementById("btnId");
btnEle.onclick=function(){
alert("加油加油!");
}
};
代码示例(html文件):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内--嵌入方式测试</title>
<!-- 引入Js文件-->
<script type="text/javascript" src="outertest.js">
</script>
</head>
<body>
<button id="btnId">行内嵌入测试</button>
</body>
</html>
4.DOM操作(重点是查询)
DOM(Document Object Model)是文档对象模型,DOM定义了访问和处理HTML文档的标准方法。
(1)节点
(节点)Node——构成HTML文档最基本的单元。
对象模型分型:
A.文档节点对象(Document):整个HTML文档的相关信息封装后得到的对象。
B.元素节点对象(Element):构成HTML文档最基本的元素,对应HTML文档中的HTML标签。
C.文本节点对象(Text):HTML 元素内的文本内容。
D.属性节点对象(Attribute):每个 HTML 元素的属性。
E:注释节点:注释
示例:
(2)查询
①元素【必须掌握!!!】
A.基于整个文档范围内查询元素节点
▲ 根据id值查询【返回一个具体节点】: document.getElementById(“id值”)
▲ 根据标签名查询【返回节点数组】: document.getElementsByTagName(“标签名”)
▲ 根据name属性值查询【返回节点数组】: document.getElementsByName(“name值”)
B.基于具体元素节点范围内查找子节点
▼ 查找全部子节点【返回节点数组】: element.childNodes
▼ 查找第一个子节点【返回节点对象】: element.firstChild
▼ 查找最后一个子节点【返回节点对象】: element.lastChild
▼ 查找指定标签名的子节点【返回节点数组】: element.getElementsByTagName(“标签名”)
▼ 查找指定元素节点的父节点: element.parentNode
查找指定元素节点的兄弟节点
▼ 查找前一个兄弟节点: node.previousSibling
▼ 查找后一个兄弟节点: node.nextSibling
注意:IE版本>=9,识别空白文本;IE版本<9,不识别空白文本
②属性
A.读取属性值 元素对象.属性名
B.修改属性值 元素对象.属性名 = 新的属性值
③文本(三步曲)
A.获取文本节点父节点
B.获取父节点的第一个子节点::parentEle.firstChild
C.获取文本节点的节点值:parentEle.firstChild.nodeValue
innerText:获取html节点元素的内部文本值。
innerHTML:获取html节点元素的内部HTML标签值。
value:获取表单项的value属性值。
(3)增删改(无)
☝上述分享来源个人总结,如果分享对您有帮忙,希望您积极转载;如果您有不同的见解,希望您积极留言,让我们一起探讨,您的鼓励将是我前进道路上一份助力,非常感谢!我会不定时更新相关技术动态,同时我也会不断完善自己,提升技术,希望与君同成长同进步!
☞本人博客:https://coding0110lin.blog.csdn.net/ 欢迎转载,一起技术交流吧!