Python 前端 js基础

Javascript 概述

      JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。

1、JavaScript代码存在形式

1
2
3
4
5
6
7
<!-- 方式一 -->
<script type"text/javascript" src="JS文件"></script>
 
<!-- 方式二 -->
<script type"text/javascript">
    Js代码内容
</script>

2、JavaScript代码存在位置

  • HTML的head中
  • HTML的body代码块底部(推荐)

　　由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

1
2
3
4
5
6
如：
 
<script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>
<script>
    alert('123');
</script>

3、变量

  • 全局变量
  • 局部变量

JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量

1
2
var name = "seven"  # 局部变量
age = 18            # 全局变量

注：注释 // 或 /* */

　　js压缩：一般js文件都被压缩，然后子再传递给浏览器端，jquery.min.js就是jquery.js压缩后的，格式发生了改变，例如，函数是被压缩成一行。

4、基本数据类型

数字（Number）

1
2
3
4
5
var page = 111;
var age = Number(18);
var a1 = 1,a2 = 2, a3 = 3;      #统一一行来定义多个局部变量
parseInt("1.2");               #字符串转换为int类型
parseFloat("1.2");　　　　　　　 #字符串转换为浮点型

　　console.log(age, typeof age)         #typeof 查看数据的类型

字符串(String)

1
2
3
4
5
6
7
8
9
10
var name = "wupeiqi";
var name = String("wupeiqi");
var age_str = String(18);
 
常用方法：
    obj.trim()                      #去除空格
    obj.charAt(index)               #根据索引来取值
    obj.substring(start,end)        #获取序列，和python的切片一样
    obj.indexOf(char)               #获取想要字母的下标
    obj.length                      #获取字符串的长度

　　如python 一样，js也是可以对字符串做操作的，

布尔(Boolean)

1
2
3
var status = true;          #注意首字母是小写
var status = false;
var status = Boolen(1==1)

数组(Array)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var names = ['alex', 'tony', 'eric']
var names = Array('alex', 'tony', 'eric')       #创建数字的两种方法
 
常用方法：
    添加
        obj.push(ele)                           #追加
        obj.unshift(ele)                        #最前插入
        obj.splice(index,0,'content')           #指定索引插入，索引，中间必须是0，content
    移除
        obj.pop()                               #数组尾部获取,并移除
        obj.shift()                             #数组头部获取,并移除
        obj.splice(index,count)                 #数组指定位置后count个字符
      
    切片
        obj.slice(start,end)          
    合并
        newArray ＝ obj1.concat(obj2)  
    翻转
        obj.reverse()
      
    字符串化
        obj.join('_')
    长度
        obj.length
 
 
字典
var items = {'k1': 123, 'k2': 'tony'}

更多操作见：http://www.shouce.ren/api/javascript/main.html

javascript的序列化与反序列化：

　　

　　

 

 

undefined

1
2
undefined表示未定义值
var name;

null

1
null是一个特殊值

 

5、循环语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var names = ["alex", "tony", "rain"];
 
 
// 数组：方式一
for(var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i]);
}
 
 
// 数组：方式二
for(var index in names){
    console.log(index);
    console.log(names[index]);
}
 
var names = {"name": "alex", "age": 18};
 
 
// 字典：方式一               #因为字典的key不是数字，所以只有这一种循环的模式
for(var index in names){
    console.log(index);
    console.log(names[index]);
}
 
 
// while循环
while(条件){
    // break;
    // continue;
}

6、条件语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//if条件语句
 
    if(条件){
 
    }else if(条件){
         
    }else{
 
    }
 
var name = 'python';
var age = 1;
 
// switch,case语句
    switch(name){
        case '1':
            age = 123;
            break;
        case '2':
            age = 456;
            break;
        default :
            age = 777;
    }

7、异常处理

1
2
3
4
5
6
7
try{
 
}catch(e) {
 
}finally{
 
}

8、函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
函数的声明
    function func(arg){
        return true;
    }
         
匿名函数
    var func = function(arg){
        return "tony";
    }
 
自执行函数
    (function(arg){
        console.log(arg);
    })('123')

9、面向对象

1
2
3
4
5
6
7
8
9
10
11
function Foo (name,age) {
    this.Name = name;
    this.Age = age;
    this.Func = function(arg){
        return this.Name + arg;
    }
}
 
var obj = new Foo('alex', 18);
var ret = obj.Func("sb");
console.log(ret);

 

Dom 概述

      文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

注：一般说的JS让页面动起来泛指JavaScript和Dom

　　Dom等于把整个页面封装起来，可以利用，document.getXXX的方式来调用其的内容。

 

1、选择器

1
2
3
document.getElementById('id');
document.getElementsByName('name');
document.getElementsByTagName('tagname');

　　

 

　

　 获取这个id=‘hello’正行的代码

　　

　　

 

 

2、内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
innerText
innerHTML
 
var obj = document.getElementById('nid')
obj.innerText                       # 获取文本内容
obj.innerText = "hello"             # 设置文本内容
obj.innerHTML                       # 获取HTML内容
obj.innerHTML = "<h1>asd</h1>"      # 设置HTML内容
 
 
特殊的：以下这些都需要value来获取值
    input系列
    textarea标签
    select标签
 
    value属性操作用户输入和选择的值

让网页动起来：

 1     <p id="hello">1</p>
 2     <button type="button" onclick="abc()">+1</button>
 3 
 4     <script>
 5         function abc(){
 6             var a = document.getElementById("hello");
 7             var text = a.innerText;
 8             var text = parseInt(text);
 9             text += 1;
10             a.innerText = text
11 
12         }
 1     <input type="text" id="search" value="请输入关键字" onfocus="abc()" onblur="cba()">
 2 
 3 
 4     <script>
 5         function abc(){
 6             var ndi = document.getElementById('search')
 7             var value = ndi.value;
 8             if(value == '请输入关键字'){
 9                 ndi.value = '';
10             }
11         }
12 
13         function cba(){
14             var ndi = document.getElementById('search')
15             var value = ndi.value;
16             if(!value.trim()){
17                 ndi.value = '请输入关键字'
18             }
19         }
20 
21     </script>
输入框显示值

 

 

3、创建标签

 

dd

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
方式一：
    var obj = document.createElement('a');
    obj.href = "http://www.etiantian.org";
    obj.innerText = "老男孩";
 
    var container = document.getElementById('container');
    //container.appendChild(obj);
    //container.insertBefore(obj, container.firstChild);
    //container.insertBefore(obj, document.getElementById('hhh'));
 
方式二：
    var container = document.getElementById('container');
    var obj = "<input  type='text' />";
    container.innerHTML = obj;
    // 'beforeBegin', 'afterBegin', 'beforeEnd',  'afterEnd'
    //container.insertAdjacentHTML("beforeEnd",obj);
 
 1 <body>
 2 
 3     <div id="container"></div>
 4     <a href="http://www.baidu.com" onclick="return addevent()">添加</a>
 5 
 6 
 7 <script>
 8         function addevent(){
 9             var nid = document.getElementById("container")
10             var tag = "<input type='text' />"
11             nid.innerHTML = tag;
12             return false;
13         }
14 
15 </script>
16 
17 </body>

　　自定义的函数优先执行，然后再执行自带的函数。

 

 

 

4、标签属性

1
2
3
4
5
6
7
8
9
10
11
var obj = document.getElementById('container');
固定属性
    obj.id
    obj.id = "nid"
    obj.className
    obj.style.fontSize = "88px";
 
自定义属性
    obj.setAttribute(name,value)
    obj.getAttribute(name)
    obj.removeAttribute(name)

5、提交表单

1
document.geElementById('form').submit()

6、事件

特殊的：

1
2
3
window.onload = function(){}
        //jQuery：$(document).ready(function(){})
        //onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的，不等图片加载完毕。图片还么有渲染，就可以进行事件的执行。

特殊参数：this，event

 

posted @ 2017-07-24 10:45  IT小工Joey  阅读(241)  评论(0)  编辑  收藏  举报