由于大学课程缘故，老师巨爱叫人问问题，还记分呢，随便记录一下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. git [command line] fatal: Authentication failed for

    fatal: Authentication failed for https://www.jianshu.com/p/8a7f257e07b8 git.exe fetch -v --progress ...

  2. mysql之找回误删数据

    场景:我们开发阶段,经常要有一些测试数据在我们测试相关功能的时候,是十分必要的.后期由于引入了正式的数据,但是测试数据并没有被及时清理.这个时候由于一个误删除,导致一些正式的数据被删除,由此,一场追找 ...

  3. node path

    1.path.basename(path[, ext]) ● path <string> ● ext <string> An optional file extension ● ...

  4. 2 Modals of necessity

    1 情况动词must 和词组have to, need to ,have got to 都表示必须做某事或者要求做某事. need to  have to  must have got to When ...

  5. 理解根目录，classpath, getClass().getResourceAsStream和getClass().getClassLoader().getResourceAsStream的区别

    一: 理解根目录 <value>classpath*:/application.properties</value> <value>classpath:/appli ...

  6. 在编写wpf界面时候中出现如下错误： 类型引用不明确。至少有两个名称空间(“System.Windows”和“System.Windows”)中已出现名为“VisualStateManager”的类型。请考虑调整程序集 XmlnsDefinition 特性。

    wpf中类型引用不明确.至少有两个名称空间(“System.Windows”和“System.Windows”)中已出现名为“VisualState 你是不是用了WPFToolKit?如果是的,那原因 ...

  7. java中集合Collection转list对象

    参考:java中集合Collection转list对象 首先我的需求是获取到购物车列表,购物车列表是一个Map对象,构造方法获取购物项,这里购物项是Collection对象 // 购物项集合,K商品I ...

  8. spring 给一个类 生成test

    右击一个类,然后:GoTo==>test ,就可以新建这个类的测试用例了,简单粗暴, 如果想要不污染数据库,就在一个测试用例 的标签@Test 下面在加上@RollBack 这样: @Test ...

  9. linux 查看TCP端口

    如有转载,不胜荣幸.http://www.cnblogs.com/aaron-agu/ netstat –nat

  10. MySQL函数GROUP_CONCAT

    该函数返回带有来自一个组的连接的非NULL值的字符串结果.该函数是一个增强的Sybase SQL Anywhere支持的基本LIST()函数. 语法结构: GROUP_CONCAT([DISTINCT ...