JS （JavaScript）
<pre><span style="color: rgba(255, 0, 0, 1)">JavaScript简介</span><span style="color: rgba(51, 102, 255, 1)">1、JS介绍</span>
全称：JavaScript，简称JS
JS是由NetScape(网景)提供的一门嵌入在浏览器中执行的脚本语言（一段小程序）
主要作用：用于实现网页中的动画效果和实现表单验证
JS可以运行在服务器端（Node.js）
<span style="color: rgba(51, 102, 255, 1)">2、JS的特点</span>
JS是一门直译式的语言（JS不需要编译,执行的就是源代码）
JS是一门基于对象的语言（JS可以通过某些机制模拟面向对象）
JS是一门弱类型的语言（Java是强类型）
Java: String str = "Hello World";
int number = 100;
JS: var str = "Hellow World";
alert(str);
str = 100;
alert(str);
str = true;
alert(str);
str = ;
alert(str);
<span style="color: rgba(51, 102, 255, 1)">3、JS的优势</span>
JS具有良好的交互性
JS具有一定的安全性(运行在浏览器内部)
JS具有跨平台性
Java语言具有跨平台性,是因为有JVM,JVM跨平台吗?
JVM不跨平台
JS语言具有跨平台性,是因为有浏览器,浏览器跨平台吗?
浏览器不跨平台!
<span style="color: rgba(51, 102, 255, 1)">4、如何在HTML中引入JS？</span>
4.1.方式一: 在head或者body内部可以添加一个script标签
在script标签内部可以直接书写JS代码
<!-- 方式一: 在script标签内部直接书写JS代码
type:可以省略,指定语言类型是JS -->
<script type="text/javascript">
console.log("引入JS的方式一!!");
//alert("引入JS的方式一!!");
document.write("引入JS的方式一!!!<br/>");
</script>
4.2.方式二: 在head或者body内部可以添加一个script标签
在script标签上通过src属性,可以引入外部的JS文件
<!-- 方式二: 引入外部的JS文件 -->
<script src="demo.js"></script>
需要注意的是,第二种方式script标签内部不要写JS代码,写了也不会执行!
<script src="js/demo.js">
console.log("Hello JS...333");//不会执行!
</script>
4.3.方式三:将JS代码写在标签上
<!-- 方式三: 直接在标签上书写JS代码 -->
<button onclick="console.log('引入JS的方式三...')">
别点我!
</button>
<input ondblclick="console.log('引入JS的方式三===')"
type="button" value="也别点我!"/>
<span style="color: rgba(51, 102, 255, 1)">4.4.onclick、ondblclick事件</span>
onclick是点击事件,在被绑定了该事件的元素上点击后,会立即触发事件,执行所指向的函数
ondblclick是点击事件,区别是需要双击才可以触发事件,执行所指向的函数<br><br></pre>
<pre><span style="color: rgba(255, 0, 0, 1)">二、JS的语法</span>
<span style="color: rgba(51, 102, 255, 1)">1、JS的注释</span>
// 单行注释
/* 多行注释 */
<span style="color: rgba(51, 102, 255, 1)">2、JS数据类型</span>
2.1.基本数据类型
1)数值类型(number)
在JS的底层,所有的数值都是浮点型
但在处理和显示的过程中,如果可以显示为整型,会自动的在整型和浮点型之间进行转换
2.4+3.6=6
Infinity(正无穷大)
-Infinity(负无穷大)
NaN(Not a Number)非数值
2)字符串类型(string)
JS中的字符串类型是基本数据类型,字符串可以使用双引号或者单引号引起来
例如:
var str1 = "Hello JS";
var str2 = 'Hello JS';
console.log( typeof str1 ); // string
console.log( typeof str2 ); // string
JS中提供了字符串的包装对象--String
var str3 = new String("Hello JS");
console.log( typeof str3 ); // object
str1和str2也可以当做对象使用,在使用时,和str3没有什么区别
3)布尔类型(boolean)
布尔类型值: true 和 false
4)undefined类型
undefined: 表示声明了变量,但是没有为变量赋值,该变量的值就是undefined
var x;
alert(x); //undefined
5)null类型
null: 表示空值,可以作为函数的返回值,表示函数返回的是一个空的对象
undefined和null都不能调用属性或方法,否则就会抛异常!
2.2.复杂数据类型
对象,数组,函数
<span style="color: rgba(51, 102, 255, 1)">3、JS的变量声明</span>
JS中是通过var关键字声明变量,通过var声明的变量不区分类型,可以指向任意的数据
var s1 = "Hello World";
s1 = 123;
s1 = false;
s1 = [];
s1 = function(){alert("s1方法执行了...")}
JS中有自动断句功能,即使一行后面不加分号,也可以正常执行,但是建议加上分号;
JS中如果重复声明变量,也不会报错, 因为JS中声明一个已存在的变量不会生效;
var x = "abc"; //var x; x = "abc";
var x = 123; //var x; x = 123;
alert(x);
JS在书写时,是严格区分大小写的!
<span style="color: rgba(51, 102, 255, 1)">4、JS的运算符</span>
JS中的运算符和Java中的运算符大致相同
算术运算符: +，-，*，/，%，++，--
赋值运算符: =，+=，-=，*=，/=，%=
比较运算符: ==，!=，>，>=，<，<=
位运算符: & ， |
逻辑运算符: && ，|| ( false && 表达式, true || 表达式 )
前置逻辑运算符: ! (not)
三元运算符: 表达式 ? 表达式1 : 表达式2
。。。</pre>
<pre><span style="color: rgba(51, 102, 255, 1)">5、JS的语句</span>
5.1.if分支
if(){...}
if(){...}else{...}
if(){...}else if{...}else{...}
5.2.switch分支
switch(变量/表达式){
case opt1:
代码块;
break;
case opt2:
代码块;
break;
...
default:
代码块;
}
5.3.循环结构
for(){}
while(){}
do while(){}
<span style="color: rgba(51, 102, 255, 1)">6、JS数组</span>
JS的数组声明方式:
//声明一个空数组,长度为零
var arr1 = [];
//声明一个具有初始值的数组
var arr2 = ;
//声明一个空数组,长度为零
var arr3 = new Array();
//声明一个具有初始值的数组
var arr4 = new Array(100,"abc",false,new Date());
//指定长度的数组(只有一个参数并且是数值,这个数值是长度)
var arr3 = new Array(10);
JS数组的特点:
1) JS中的数组可以存储任意类型的数据
2) JS数组的长度可以被任意改变
<span style="color: rgba(51, 102, 255, 1)">7、JS函数</span>
JS的函数相当于Java中的方法
就是一个具有功能的代码块,通过函数名可以反复执行!
声明方式1:
function 函数名([参数列表]){
函数体...
}
声明方式2:
var 变量/函数名 = function([参数列表]){
函数体...
}
声明方式3:
(function([参数列表]){
函数体...
})([参数列表]);
<span style="color: rgba(255, 0, 0, 1)">
三、JS的DOM操作</span>
DOM: Document Object Model,文档对象模型
其实就是JS专门为操作html元素所提供的一套API。
<span style="color: rgba(51, 102, 255, 1)">
1、获取html元素</span>
1) document.getElementById(id值);
-- 通过元素的id属性值获取一个html元素，返回值就是这个元素所对应的JS对象
2) document.getElementsByTagName(标签名);
-- 通过元素名称,获取该名称对应的所有元素组成的数组,可以通过数组[下标]的形式获取其中的每一个元素,也可以通过循环遍历。
3) document.getElementsByClassName(class值);
-- 通过元素的class属性值,获取该class值对应的所有元素组成的数组,可以通过数组[下标]的形式获取其中的每一个元素,也可以通过循环遍历。
4) ele.parentNode -- 获取当前元素的上级元素(父元素)
5) ele.innerHTML -- 获取元素的所有内容, 或者设置元素的内容(原内容会被覆盖)
<div>这是一个测试的div</div>
ele.innerHTML = "xxx"
6) ele.value -- 获取或设置表单项元素的value值
<span style="color: rgba(51, 102, 255, 1)">2、增删改查元素</span>
1)创建一个html元素
document.createElement(元素名/标签名);
-- 创建一个指定名称的元素,返回值就是这个创建的元素所对应的JS对象
2)添加子元素
parentEle.appendChild( childEle );
-- 父元素调用方法添加一个子元素到父元素内部
3)删除子元素
parentEle.removeChild( childEle )
-- 父元素调用方法删除内部的子元素</pre>
<pre><br><br></pre><br><br>
来源：https://www.cnblogs.com/liang-shi/p/13921974.html
頁:
[1]