由于大学课程缘故，老师巨爱叫人问问题，还记分呢，随便记录一下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. 开发工具之Sublime编辑器

    sublime是一款轻量级的编辑器,可以从官网上进行下载最新版本.它有很多使用并且强大的功能支持.例如:GOTO,package 等快捷操作.但有时候下载的版本不能进行安装package contro ...

  2. 了解真实的rem手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  3. mybatis出现NoSuchMethodException异常

    今天在idea中调试项目(ssm搭建的项目)的时候,mybatis突然出现了NoSuchMethodException异常,具体的异常时: java.lang.NoSuchMethodExceptio ...

  4. [转帖] 百度知道: KMS 和OSPP

    https://zhidao.baidu.com/question/1819332749671662308.html Key Management Service (KMS).目前Windows Se ...

  5. day 7-19 Mysql索引原理与查询优化

    一,介绍 1.什么是索引? 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,在生产环境中,我们遇到最多的,也是最容易出问题的,还是一些复杂的查询操作,因此对查询语 ...

  6. Spring Boot+Jsp启动异常

    No Java compiler available for configuration options compilerClassName 加入maven配置 <dependency> ...

  7. 牛客练习赛13B 幸运数字2

    题目链接:https://ac.nowcoder.com/acm/contest/70/B 题目大意: 略 分析: 先DFS求出所有幸运数,然后暴力即可 代码如下: #pragma GCC optim ...

  8. kprobe原理解析

    参考  http://www.cnblogs.com/honpey/p/4575928.html kprobe是linux内核的一个重要特性,是一个轻量级的内核调试工具,同时它又是其他一些更高级的内核 ...

  9. Armstrong公理

    从已知的一些函数依赖,可以推导出另外一些函数依赖,这就需要一系列推理规则,这些规则常被称作“Armstrong 公理”. 设U 是关系模式R 的属性集,F 是R 上成立的只涉及U 中属性的函数依赖集. ...

  10. QTP自动化测试-按行取值（win10下输入？问题）-笔记20181119

    在win10下运行qtp10 所有输入汉字都会为?,在win7下可以.查询了百度.bingo没有解决问题.当前的解决办法 ,在脚本中使用DataTable取数据值,添加2行记录,一行使用汉字,一行使用 ...