诶西,JavaScript学习记录。。。。。。

  由于大学课程缘故,老师巨爱叫人问问题,还记分呢,随便记录一下Js的学习情况,以后复习什么的也比较方便吧。。。。。。

开始咯,就按照C语言学习那样的方法来吧!

==================================割割割==================================

1.数据类型(这里只是大概提一下)

 1 /*
 2     我认为Js里没有明显的数据类型,仅有 字符串、数字、布尔、数组、对象、Null、Undefined
 3 */
 4 
 5 var temp = 'legth'
 6 
 7 var temp = 1
 8 var temp = -3.14159
 9 var temp = 1e9
10 
11 var temp = false
12 
13 var person {
14     name : 'lwc'
15     sex : 'male'
16     age : 20
17 }
18 
19 var name = null
20 
21 //undefined
22 var name
23 log(name)

2.变量声明

var ans
var mark = false
var i = 0,j = 0,k = 0
var t
log(t)
//这种情况t是undefined
var name = 'Volvo'var name
//这种情况name依然是Volvo
var name = 'Volvo'var name = 'ben'//这种情况name就会被重新赋值

3.数组

//方法1
var ans = []

//方法2
var ans = new Array()

原地址:http://www.w3school.com.cn/jsref/jsref_obj_array.asp

4.函数

//JavaScript的函数的传参并不需要类型声明
function log(a) {
    console.log(a)
}

function functionname(param1, param2, ...)
{
    /* code here */
}
1 //其实我一直用的是另一种方法来声明调用一个函数
2 var imageFromPath = function(path) {
3     var img = new Image()
4     img.src = path
5     return img
6 }

这里我感觉js的规定有点太自由了,类用函数也能定义......

 1 var Ball = function() {
 2     var image = imageFromPath('ball.png')
 3     var o = {
 4         image: image,
 5         x: 100,
 6         y: 200,
 7         speedX: 10,
 8         speedY: 10,
 9         fired: false,
10     }
11     o.fire = function() {
12         o.fired = true
13     }
14     o.move = function() {
15         if (o.fired) {
16             // log('move')
17             if (o.x < 0 || o.x > 400) {
18                 o.speedX = -o.speedX
19             }
20             if (o.y < 0 || o.y > 300) {
21                 o.speedY = -o.speedY
22             }
23             // move
24             o.x += o.speedX
25             o.y += o.speedY
26         }
27     }
28     return o
29 }
30 
31 var ball = Ball()
基础语法就到这里吧,接下来写一下常见对象的常用方法

 5.String

其实常用的也就那么几个
1.indexOf()
stringObject.indexOf(searchvalue, fromindex)返回值为匹配串的起始位置
searchvalue为字符或字符串
fromindex是起始位置
如果找不到返回-1


2.replace()
stringObject.replace(regexp/substr, replacement)


3.str.split(a, [b])以'a'为标识切割str,
返回一个元组并保留前b个
4.match()
该方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。
该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。
stringObject.match(searchvalue) searchvalue必需。规定要检索的字符串值。只检索一次,返回一个字符串,找不到返回null

stringObject.match(regexp) regexp必需。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象,则需要首先把它传递给 RegExp 构造函数,将其转换为 RegExp 对象。返回一个元组,找不到返回null
var str = "1 plus 2 equal 3"
console.log(str.match(/d+/g))
// ["1", "2", "3"]

6.Math

7.Date

8.Events

*9.之前是把Js当做一门语言来讲,接下来比较重要的就是,Js和html的对接了!

  ⑴首先,最常用的就是验证某些信息是否合法

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
10     </head>
11     <body>
12         <div id="body">
13             <form class="from-group" action="index.html" method="post" id="form">
14                 <label for="">name</label>
15                 <input type="text" name="username" value="">
16                 <label for="">password</label>
17                 <input type="password" name="password" value="">
18                 <input type="submit" name="" value="click me" onclick="return check();">
19             </form>
20         </div>
21         <script type="text/javascript">
22             function check() {
23                 var re = /^[a-zA-Z0-9]{6,20}$/g
24                 var message = document.getElementById('form').username.value
25                 console.log(message)
26                 if(!re.test(message)){
27                     alert('用户名或密码格式不正确')
28                     return false
29                 }
30                 else {
31                     alert('Ok!')
32                     return true
33                 }
34             }
35         </script>
36     </body>
37 </html>

        ⑵插入、删除一些元素,并修改他们的样式

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5     </head>
 6     <body>
 7         <div class="active">
 8             <select id="selector" required="required">
 9                 <option value="red">red</option>
10                 <option value="green">green</option>
11                 <option value="black">black</option>
12                 <option value="blue">blue</option>
13             </select>
14             <button type="button" name="button" class='btn'>add</button>
15             <button type="button" name="button" class='btn'>remove</button>
16         </div>
17         <script type="text/javascript">
18             var p = document.getElementsByClassName('btn')
19             p[0].addEventListener('click', function(event){
20                 var s = document.querySelector('#selector')
21                 var addP = new function(){
22                     var para = document.createElement('p')
23                     var node = document.createTextNode('这是一个新段落。')
24                     para.appendChild(node)
25                     para.style.color = s.value
26                     document.querySelector('#body').appendChild(para)
27                 }
28             })
29             p[1].addEventListener('click', function(event){
30                 var b = document.querySelector('#body')
31                 var arrayp = document.getElementsByTagName('p')
32                 console.log(arrayp);
33                 while(arrayp.length != 0) {
34                     b.removeChild(arrayp[0])
35                 }
36             })
37         </script>
38     </body>
39 </html>

evermore更多请参照http://www.w3school.com.cn/jsref/dom_obj_window.asp

原文地址:https://www.cnblogs.com/liwenchi/p/7533526.html