由于大学课程缘故，老师巨爱叫人问问题，还记分呢，随便记录一下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. 百度地图开发者API学习笔记二

    一,地图上多个覆盖物(Marker). 当有多个覆盖物时,我们需要获取每个点的信息.如下图,每个Marker的经度都不相同 二,代码: <!DOCTYPE html> <html&g ...

  2. excel vba 不可查看

    打击共享工作簿 去掉[允许多用户同事编辑,同事允许工作簿合并]

  3. Java 验证码详解

    1 使用Servlet实现验证码,涉及的知识点主要为java 绘图技术与session保存数据. HTML页面 <html> <image src='images/logo1.jpg ...

  4. Eclipse打开java文件繁体字

    右键-->properties-->Resource-->Text file encoding, 改成utf-8 .

  5. css 别人找的css特效

    https://blog.csdn.net/m0_37809478/article/details/76619207

  6. outline，box-shadow，border-radius小例子

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 【转】Java基础——容器分类

    Java容器可以说是增强程序员编程能力的基本工具,本系列将带您深入理解容器类. 容器的用途 如果对象的数量与生命周期都是固定的,自然我们也就不需要很复杂的数据结构. 我们可以通过创建引用来持有对象,如 ...

  8. python爬虫-1

    import resquests #import urllib.request from bs4 import BeautifulSoup from collections import Ordere ...

  9. java 静态成员访问

    public class MqConfig { @Getter private static IProducerProcessor callBackProducerRetry; @Getter @Va ...

  10. delphi中 dataset容易出错的地方

    最近写delphi项目,用到的数据集中的dataset,一直修改exception啊,写下过程. 在对数据集进行任何操作之前,首先要打开数据集.要打开数据集,可以把Active属性设为True,例如: ...