前端-常用javascript基础篇

一。JavaScirpt简介

　　JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格

　　JavaScript最初由Netscape的Brendan Eich设计，最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java，但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。微软同时期也推出了JScript来迎战JavaScript的脚本语言。

　　主要功能：

　　1.嵌入动态文本于HTML页面。

　　2.对浏览器事件做出响应。

　　3.读写HTML元素。

　　4.在数据被提交到服务器之前验证数据。

　　5.检测访客的浏览器信息。控制cookies，包括创建和修改等。

　　6.基于Node.js技术进行服务器端编程。

　　JavaScript脚本语言具有以下特点:

　　　　(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

　　　　(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

　　　　(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

　　　　(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

　　　　(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支持JavaScript脚本语言,JavaScript已被大多数的浏览器所支持。不同于服务器端脚本语言，例如　　　　　　　　　　　　　　　　　　　　　　PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题：安全性。

　　　　而随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能（如AJAX）必须依赖JavaScript在客户端进行支持。

　　运行模式：

　　　　JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

1. 是一种解释性脚本语言（代码不进行预编译）。
2. 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
3. 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
4. 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
5. JavaScript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。JavaScript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

二。引入方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js引入页面的方式</title>
<!--    第三种方式，链接外部的js文件-->
<!--    <script src="js/test01_js.js"></script>-->
<!--    注意点：在头部中引入js时，要放在window.onload中。原因：加载页面时从上往下加载，若js代码放在head中的话会先执行，但是body的页面信息没有加载出来，针对页面的js代码也会报错-->
    <script type="text/javascript">
        window.onload= function () {
            document.getElementById("box1").innerText= "python"

        }
    </script>
</head>
<body>
<!--window.onload注意点-->
<div class="box1" id="box1">C+</div>


<!--方式一，在标签中绑定js实践-->
<!--<input type="button" value="点击按钮" onclick="alert('js弹框')">-->
<!--方式二，js引入页面的第二种方式，放在script标签中-->
<!--<input type="button" value="按钮2" onclick="func111()">-->
<!--<script type="text/javascript">-->
<!--    function func111() {-->
<!--        alert("方式二，通过script标签绑定")-->

<!--    }-->
<!--</script>-->
</body>
</html>


三。基础语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js基本语法</title>
<!--    链接外部的js文件-->
    <script src="js/test02_js.js"></script>

</head>
<body>


</body>
</html>

对应js文件：

window.onload= function () {
    //js中的注释：单行注释：// 多行注释:/* 内容 */
    //定义 a 变量
    // var a = 100;
    // //定义一个变量b,不进行赋值
    // var b;
    // //同时定义多个变量
    // var c =100, d = 200, e =300;
        }

//js中的注释：单行注释：// 多行注释:/* 内容 */
//定义 a 变量
// var a = 100;
// //定义一个变量b,不进行赋值,(默认内容为：undefined)
// var b;
// //同时定义多个变量
// var c =100, d = 200, e =300;


//js中的数据类型

//字符串
// var aStr = "python";

//数字,不区分整数，小数
// var x = 100;
// var y = 100.12;

//空类型
// var n = null ;

//布尔类型数据
// var t = true;
// var f = false;

//数组--->与python中的列表差不多,push-新增；pop-删除最后一位
// var aList = Array=[1,2,3];
//对象 --->与python中的字典差不多
// var aObj ={
//     a:11,
//     b:22,
//     c:33
// }


//运算符
//加减乘除 +(加),-(减),*(乘),/(除),%(求余)

//赋值运算符
//=,+=,-=,*=,/=,%=,++(在原来的基础上+1)

//条件运算符：==(不会判断数据类型)，===（会判断数据及类型是否相等），>,>=,<,<=,!=
// var aa='111',bb=111;
// console.log(aa==bb);
// console.log(aa===bb);


//逻辑运算符
//&&(与)，||(或)，!(否)


//条件语句
//if -- else 语句
// var i = 10;
// if (i<200){
//     console.log("i小于200,条件成立");
// }else {
//     console.log("i小于200，条件不成立")
// }


//if --else if ---else语句
// if (i ===100){
//     console.log("i等于100，条件成立");
// }else if (i <100){
//     console.log("i小于100");
// }else {
//     console.log("i大于100");
// }


//函数
// function func1() {
//     console.log("这个是func1函数")
// }
//函数调用
// func1();

//带参数的函数
// function func2(var1,var2) {
//     var sum = var1+var2;
//     console.log("var1+var2的结果是",sum);
// }
//调用
// func2(11,22);

//带返回值的函数：return
// function func3(var1,var2) {
//     return var1+var2;
// }
//调用,创建变量进行接收
// var res = func3(11,223);
// alert(res)



//对象
//创建对象的方式1:var
// var aObj ={a:100,b:200};
// console.log(aObj)

//创建对象的方式2:new
// var Bobj = new Object();


//对象中的方法
// var cObj ={
//     name:"小明",
//     age:18,
//     //对象方法的定义
//     fun:function (var1,var2) {
//         console.log(var1+var2);
//
//     }
// }



//循环
//外循环
// var i =0;
// while (i<10){
//     console.log(i)
//     i++
// }

//for循环

//第一种遍历
var aList = Array=[11,22,33,44,55];
// 对象 --->与python中的字典差不多
var aObj ={
    a:11,
    b:22,
    c:33
}
//遍历数组，遍历出来的是数组的下标
// for(i in aList){
//     console.log(i,aList[i]);
//     //通过break跳出循环
//     if (i == 3){
//         break
//     }
// }

//遍历对象：遍历出来的是对象的属性名
// for(i in aObj){
//     console.log(i,aObj[i]);
// }


//for 循环的第二种用法,类似于java，t=0 for循环执行之前执行，t<10 成立的条件；t++ for循环执行完后执行
for(t=0;t<10; t++){
    console.log(t)
}

四。document树操作，修改元素
1）定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document树</title>
<!--    链接外部的js文件-->
    <script src="js/test03_js.js"></script>

</head>
<body>
<div id="box1">box1</div>
<a href="">a标签</a>

</body>
</html>

对应js操作：

window.onload = function () {
    var box = document.getElementById("box1")
    //获取box1的标签的文本输出到控制台
    console.log(box.innerText);
    //更改标签的文本内容
    box.innerText = "python"

}

2）修改元素，添加事件

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/test01.js"></script>
</head>
<body>
<div class="box1" id="box1">box1
    <span>00000</span>
</div>

<div class="box2" id="box2">box2</div>

<a href="http://www.baidu.com">百度</a>
</body>
</html>


js操作方法：

window.onload = function () {
    //js选择页面元素
    var box1 = document.getElementById("box1")
    //更改标签内容
    //HTML修改标签及文本内容
    //box1.innerHTML = "python"
    //Text只修改文本内容
    //box1.innerText = "java"
    // console.log(box1.innerHTML)
    // console.log(box1.innerText)


    // 更改标签属性
    var a = document.getElementsByTagName("a")[0]
    //读取属性
    console.log(a.href)
    a.href = "http://hao123.com"
    console.log(a.href)


    //添加事件
    var box2 = document.getElementsByClassName("box2")[0]
    //为box2增加一个点击事件，当点击的时候提示“000”
    box2.onclick = func1



}
//添加一个函数
function func1() {
    alert("000")

}

爱折腾的小测试