JavaScript总结

    1.什么是JavaScript
    2.JS的特点和优势
    3.在html中书写JS代码
    4.JS的基本数据类型
    5.JS的变量声明
    6.JS中的循环语句基本和JAVA类似
    7.JS声明数组
    8.JS函数
    9.DOM操作


1.什么是JavaScript
  • JavaScript是一中内嵌在浏览器中运行的脚本语言,简称JS。
  • JS在浏览器中运行,实现浏览器中的动画效果;或者实现提交表单的校验等功能.
    • *
2.JS的特点和优势
  • 特点:

(1)JS是一门直译式的语言,即一边解释一边执行,不需要编译。
java-->编写时xxx.java-->jVM编译为xxx.class-->运行class文件。
js-->编写时xxx.html文件,编写时js文件,直接运行。
(2)JS是一门基于对象的语言;JS中没有类的概念。
(3)jS是一门弱对象语言。

//在java中,变量一旦被声明,变量的类型就不变了。
String a = "aaa";
int b = 10;
//在JS中不同
var c = "ccc";
c = true;
c = 123;
c = [];
c = function (){};
c = //;
...
  • 优势:

(1)JS有良好的交互性(可能就是人机交互体验比较好吧,从电脑输入代码后,通过浏览器很好的展示在界面上)
(2)JS安全性较好,因为只能在浏览器内部运行,不能访问浏览器之外的资源。
(3)JS具有跨平台性。因为JS只能在浏览器上运行,所有只要有浏览器,都能被执行。


3.在html中书写JS代码
  • (1)可以在<head>或者<body>中添加一个<script type="text/javascript">标签。
<script type="text/javascript">
    //JS的单行注释
    /* JS的多行注释 */
    alert( "在html中引入JS的第一种方式..." );//alert在浏览器上弹出一个窗口
    
</script>
  • (2)通过<script>标签引入外部JS文件。
<script src="JS文件路径"/> //自闭的是因为<script>中的代码不会被执行
  • (3)也可以直接将代码写在标签中。
    • *
4.JS的基本数据类型
  • (1)数值类型
    *在JS中所有的数值类型底层都是浮点类型,但是在处理和显示过程中,会自动切换整型。
    *特殊值:Infinity无穷大/-Infinity负无穷大/NaN非数字
  • (2)布尔类型
    *true/false
  • (3)字符串类型
var s1 = 's1';   
var s2 = "s2";  // 简单数据类型 , String
var s3 = new String("s3");//复杂数据类型,Object
  • (4)undefined类型
    *只变量只定义,但没有赋值
var ss;
alert(ss); //undefined
alert(zz); //抛异常
  • (5)null类型
    *可以作为函数的返回值,表示此函数的返回值为空。
  • (6)复杂数据类型
    *主要指对象(JS的内置对象、自定义的对象、函数、数组等)
  • undefined和null不能调用函数或属性。

5.JS的变量声明

js通过var声明变量:

var a = 1;
a = "abc";
a = [];
a = {};
a = new Object();
a = function(){};

6.JS中的循环语句基本和JAVA类似

7.JS声明数组
  • 数组中可以传入任何类型的值,并且数组的长度可以任意改变。
方式1:
//声明一个空数组
var ar = [];
//声明数组并赋值
var ar = [123, "ahhah", true, false, new Object];

方式2:
var ar = new Array();
var ar = new Array(123, "ahhah", true, false, new Object);
8.JS函数
  • JS函数格式:
funcrion([参数]){
    //函数体
}
//或者
var 函数名 = function([参数列表]){
    //函数体
}

9.DOM操作
  • DOM(Document Object Model),文档对象模型;是JS访问html元素提供的一套API。
  • document是一个js对象,用于表示当前html网页。当浏览器加载完成,会用document来表示整个html网页对象。
// 根据标签id返回一个标签,返回的是一个js对象
// 返回一个id为img1的图片标签
var oImg = document.getElementById("img1");
// 通过获取的js对象可以操作标签中属性的值
oImg.src="";//设置图片标签的图片路径
  • 增删改元素
// 增删改元素
//1.增加一个div元素到body中
function(){
    // 创建一个div
    var oDiv = document.createElement("div");
    oDiv.innerHTML = "div中的内容";//   在div中插入内容
    var oBody = document.body;  //  获取body元素
    oBody.appendChild(oDiv);    //将div添加到body中
}

// 删除id为id2的元素
function(){
    //1.获取id为id2的元素
    var oId2 = document.getElementById("id2");
    //2.获取id2元素的父类元素
    var id2_fa = oId2.parentNode;
    //3.通过父类元素删除子类元素
    id2_fa.removeChild(oId2);
}

// 更新div_3中的内容为当前时间
function(){
    //1.获取div_3
    var d3 = document.getElementById("div_3");
    //2.获取当前时间
    var now_Date = new Date().toLocaleString();
    //3.插入时间
    d3.innerHTML = now_Date;
}

流浪成疯
7 声望3 粉丝

学习