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

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

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

1.数据类型（这里只是大概提一下）

 /*

     我认为Js里没有明显的数据类型，仅有 字符串、数字、布尔、数组、对象、Null、Undefined

 */

 var temp = 'legth'

 var temp = 1

 var temp = -3.14159

 var temp = 1e9

 var temp = false

 var person {

     name : 'lwc'

     sex : 'male'

     age : 20

 }

 var name = null

 //undefined

 var name

 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 */

}
 //其实我一直用的是另一种方法来声明调用一个函数

 var imageFromPath = function(path) {

     var img = new Image()

     img.src = path

     return img

 }

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

 var Ball = function() {

     var image = imageFromPath('ball.png')

     var o = {

         image: image,

         x: 100,

         y: 200,

         speedX: 10,

         speedY: 10,

         fired: false,

     }

     o.fire = function() {

         o.fired = true

     }

     o.move = function() {

         if (o.fired) {

             // log('move')

             if (o.x < 0 || o.x > 400) {

                 o.speedX = -o.speedX

             }

             if (o.y < 0 || o.y > 300) {

                 o.speedY = -o.speedY

             }

             // move

             o.x += o.speedX

             o.y += o.speedY

         }

     }

     return o

 }

 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的对接了！

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

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

     </head>

     <body>

         <div id="body">

             <form class="from-group" action="index.html" method="post" id="form">

                 <label for="">name</label>

                 <input type="text" name="username" value="">

                 <label for="">password</label>

                 <input type="password" name="password" value="">

                 <input type="submit" name="" value="click me" onclick="return check();">

             </form>

         </div>

         <script type="text/javascript">

             function check() {

                 var re = /^[a-zA-Z0-9]{6,20}$/g

                 var message = document.getElementById('form').username.value

                 console.log(message)

                 if(!re.test(message)){

                     alert('用户名或密码格式不正确')

                     return false

                 }

                 else {

                     alert('Ok!')

                     return true

                 }

             }

         </script>

     </body>

 </html>

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

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

     </head>

     <body>

         <div class="active">

             <select id="selector" required="required">

                 <option value="red">red</option>

                 <option value="green">green</option>

                 <option value="black">black</option>

                 <option value="blue">blue</option>

             </select>

             <button type="button" name="button" class='btn'>add</button>

             <button type="button" name="button" class='btn'>remove</button>

         </div>

         <script type="text/javascript">

             var p = document.getElementsByClassName('btn')

             p[0].addEventListener('click', function(event){

                 var s = document.querySelector('#selector')

                 var addP = new function(){

                     var para = document.createElement('p')

                     var node = document.createTextNode('这是一个新段落。')

                     para.appendChild(node)

                     para.style.color = s.value

                     document.querySelector('#body').appendChild(para)

                 }

             })

             p[1].addEventListener('click', function(event){

                 var b = document.querySelector('#body')

                 var arrayp = document.getElementsByTagName('p')

                 console.log(arrayp);

                 while(arrayp.length != 0) {

                     b.removeChild(arrayp[0])

                 }

             })

         </script>

     </body>

 </html>

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

诶西，JavaScript学习记录。。。。。。的更多相关文章

  1. JavaScript学习记录二

    title: JavaScript学习记录二 toc: true date: 2018-09-13 10:14:53 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  2. JavaScript学习记录四

    title: JavaScript学习记录四 toc: true date: 2018-09-16 20:31:22 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  3. JavaScript学习记录三

    title: JavaScript学习记录三 toc: true date: 2018-09-14 23:51:22 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  4. JavaScript学习记录一

    title: JavaScript学习记录一 toc: true date: 2018-09-11 18:26:52 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...

  5. Javascript学习记录——原生JS实现旋转木马特效

    昨天学习到了JS特效部分,然后老师讲了旋转木马特效的实现,如上图.不过只是讲了通过点击箭头实现图片的切换,对于点击图片本身以及二者联动却是没有讲解. 本着一颗追求完美的心,今天花费了一个中午终于将整个 ...

  6. JavaScript学习记录总结（七）——dom对象应用之用户简单管理

    <!DOCTYPE html><html><head><title>users.html</title> <meta name=&qu ...

  7. html+css+javascript学习记录1

    <p> 最近在学一部分前端,知识点很多,却没怎么系统地应用过,因而理解可能不够深吧.所以我想做点片段似的东西,不懂的再在网上搜一搜,这样可能会更有意思点,所以做了这个记录,希望自己坚持下去 ...

  8. JavaScript学习记录总结（九）——移动添加效果

    <!DOCTYPE html><html><head><title>moveOption.html</title> <meta nam ...

  9. JavaScript学习记录总结（十）——几个重要的BOM对象

    一.弹出框 <script type="text/javascript">    window.onload=function(){         window.al ...

随机推荐

  1. 福州大学软件工程1816 | W班 第8次作业[团队作业,随堂小测——校友录]

    作业链接 团队作业,随堂小测--校友录 评分细则 本次个人项目分数由两部分组成(博客分满分40分+程序得分满分60分) 博客和程序得分表 评分统计图 千帆竞发图 总结 旅法师:实现了更新,导出,查询, ...

  2. MyBatis使用注解开发

  3. Python之字符串格式化

    1)     占位符%s: %s是通用的占位符,所有类型不管是string还是int还是float全都代表. 如果使用%d,则只能代表整数:如果是%f,则只能代表小数: 2)     直接用加号+连接 ...

  4. JMeter学习non-gui模式运行

    -h, --help print usage information and exit #打印帮助信息 -v, --version print the version information and ...

  5. 上传图片（photoClip）

    首先我们需要引入4个js包(这4个包总共106.6KB) <script src="__STATIC__/hammer.min.js" ></script> ...

  6. Day3-2 函数之递归

    递归 定义:一个函数在 内部调用自己,就称为递归. # 如何让10不停的除以2,直到不能除为止. n = 10 while True: n = int(n /2) print(n) if n == 0 ...

  7. vue环境搭建+vscode

    https://blog.csdn.net/junshangshui/article/details/80376489

  8. Windows Server2008、IIS7启用CA认证及证书制作完整过程

    1         添加活动目录证书服务 1.1          打开服务器管理器,右键点击角色,选择“添加角色”,在“添加角色向导”窗口左侧面板选择“服务器角色”,然后勾选“Active Dire ...

  9. Luogu1137 旅行计划(拓扑排序)

    题目传送门 拓扑排序板子题,模拟即可. 代码 #include<cstdio> #include<iostream> #include<cmath> #includ ...

  10. url.openconnection() 设置超时时间

    System.setProperty("sun.net.client.defaultConnectTimeout", "30000"); System.setP ...