前端开发之JavaScript
Javascript（简称‘JS’）,是一门解释型编程语言，主要用于Web、和浏览器中网页中的动态渲染
是一门前端工程师的编程语言，相比于python它的逻辑并不是那么严谨
语法注释
单行注释
//注释内容
多行注释（与css注释相同）
/*注释内容*/
引入JS的多种方式
1、<head>标签内<script>标签内编写
2、<haed>标签内<script>标签src属性引入外部JS资源
3、<body>标签内最底部通过<script>标签src属性引入外部JS资源（最常用）
网页的加载顺序是由上至下，所以操作标签的JS代码一定要等待标签加载结束后运行
结束符
分号 ;
JavaScript中的语句要以分号（;）为结束符。
编写JS代码的方式
1、浏览器 （零时使用）
打开浏览器，右键检查，在console内部编写
2、pycharm创建JS文件或者HTML文件
适合编写较为复杂的JS代码（便于长久保存）
变量
变量的声明：
变量名的命名规范：
var 与 let 区别：
var
var 变量名 = '值';
let
let 变量名 = '值';
常量
JS中支持定义常量（定义后无法被修改）
关键字：const
const 常量名 = '值';
查看数据类型的方法:
typeof(绑定数据的变量名);
Number（数值类型）
区别于Python，JS中整型和浮点型都叫做：Number
NaN也属于数值类型：不是一个数字（Not A Number）
String（字符类型）
定义字符类型可使用单、双引号
模板字符串使用：``
var 变量名 = '值';
var 变量名 = "值";
var 变量名 = `我是第一列
我是第二列
我是第三列`
内置方法
| 序号 | 关键字 | 说明 |
|---|---|---|
| 1 | .length | 返回长度 |
| 2 | .trim() | 移除空白 |
| 3 | .trimLeft() | 移除左边的空白 |
| 4 | .trimRight() | 移除右边的空白 |
| 5 | .charAt(n) | 返回第n个字符 |
| 6 | .concat(value, ...) | 拼接 |
| 7 | .indexOf(substring, start) | 子序列位置 |
| 8 | .substring(from, to) | 根据索引获取子序列 |
| 9 | .slice(start, end) | 切片 |
| 10 | .toLowerCase() | 小写 |
| 11 | .toUpperCase() | 大写 |
| 12 | .split(delimiter, limit) | 分割 |
var name = ' kang kang '
var gender = 'male'
1.name.length // 13 返回字符长度
2.name.trim() // 'kang kang' 去除字符串左右两边空格（区别于Python，JS只能去除空格）
3、name.trimLeft() // 'kang kang ' 去除字符串左边空格
4、name.trimRight() // ' kang kang' 去除字符串右边空格
5、name.charAt(5) // 'g' 类似于Python的索引取值
6、name.concat(gender) // ' kang kang male' 拼接，针对字符的拼接还可以用‘+’号
7、name.indexOf('ng') // 4 根据输入的字符获取字符对应索引的位置
8、name.substring(1,5) //' kan' 类似于Pyhon的切片操作
9、name.slice(1,5) // ' kan' 类似于Pyhon的切片操作
10、name.toUpperCase() // ' KANG KANG ' 将字符串所有英文字母转大写
11、name.toUpperCase() // ' kang kang ' 将字符串所有英文字母转小写
13、name.split(' ') //(6) ['', '', 'kang', 'kang', '', ''] 按指定字符·分割字符串， 第二个参数可控制获取分割后的字符串的个数
/*
string.slice(start, stop)和string.substring(start, stop)：
两者的相同点：
如果start等于end，返回空字符串
如果stop参数省略，则取到字符串末
如果某个参数超过string的长度，这个参数会被替换为string的长度
substirng()的特点：
如果 start > stop ，start和stop将被交换
如果参数是负数或者不是数字，将会被0替换
silce()的特点：
如果 start > stop 不会交换两者
如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)
*/
boolean（布尔值）
区别于Python，JS的布尔值首字母不用大写
JS布尔值纯小写
var a = true;
var b = false;
（空字符串）、0、null、undefined、NaN都是False
null和undefined
表示值是空，一般在需要指定或清空一个变量时才会使用
表示曾经有过，但是现在没有了
eg：name= null
null表示变量的值是空(null可以手动清空一个变量的值，使得该变量变为object类型，值为null)，undefined则表示只声明了变量，但还没有赋值。
JaveScript中所有的事务都是对象：字符串、数值、数组、函数...此外JavaScript允许用户自定义对象
JaveScript提供多个内建对象，比如String、Date、Array等
对象是带有属性和方法的特殊数据类型
数组类似于Python中的列表
使用单独的变量名来存储一系列的值
创建数组的方法
let a = [1,2,3,4,5];
常用方法
| 序号 | 方法 | 说明 |
|---|---|---|
| 1 | .length | 数组的大小 |
| 2 | .push(ele) | 尾部追加元素 |
| 3 | .pop() | 获取尾部的元素 |
| 4 | .unshift(ele) | 头部插入元素 |
| 5 | .shift() | 头部移除元素 |
| 6 | .slice(start, end) | 切片 |
| 7 | .reverse() | 反转 |
| 8 | .join(seq) | 将数组元素连接成字符串 |
| 9 | .concat(val, ...) | 连接数组 |
| 10 | .sort() | 排序 |
| 11 | .forEach() | 将数组的每个元素传递给回调函数 |
| 12 | .splice() | 删除元素，并向数组添加新元素。 |
| 13 | .map() | 返回一个数组元素调用函数处理后的值的新数组 |
let a = [1,2,3]
let b = ['ABC','DEF']
1、a.length // 3 返回数组内部数据的数量
2、a.push(4) // 在数组尾部添加值
3、a.pop() // 弹出数值尾部的值
4、a.unshift(1) // 在数值头部插入数值，可一次插入多个
5、a.shift // 移出数组头部数据，一次只能移除一个
6、a.slice(1,3) // 数组切片取值，设置起始和结束位置的索引
7、a.reverse() // 反转元组内数据
8、a.join() // '3,2,1,1,5' 将数组内数据转成字符类型
9、a.concat(b) //(7) [3, 2, 1, 1, 5, 'ABC', 'DEF'] 拼接数组
10、a.sort() // 将数组内数值由小到大排序
11、 var obj = {
'1' : 'abc',
'3' : 100,
'5' : 'hello'
}
var arr = [1, 3, 5];
arr.forEach(function(item){
// console.log(item);
},obj);//返回值： 1 3 5
12、a.splice('a','b','c') //删除数组内现有数据，添加新的数据
13、et array = [1, 2, 3, 4, 5];
let newArray = array.map((item) => {
return item * item;
})
console.log(newArray) // [1, 4, 9, 16, 25]
字典同于Python中的字典
字典是一种以键-值对形式存储数据的数据结构，比如：名字-电话号码，通过名字就能找到对应的电话号码，名字就是键(key)，电话号就是值(value)；
创建字典的方法
1、方式一: 创建字典的同时直接添加键值对
let 字典名 = {键1：值1，
键2：值2
}
2、方式二： 创建一个空字典，然后再添加键值对
let 字典名 = new Object();
字典的基本用法
let d1 = {name: 'kangkang', age: 18, hobby: 'read'}
1、索引取值
d1.name // 'kangkang'
d1[name] // 'kangkang'
2、添加键值对
d1.键名 = 值
d1[键名] = 值
| 符号 | 描述 |
|---|---|
| + | 加 |
| - | 减 |
| * | 乘 |
| / | 除 |
| % | 取余 |
| ++ | 自增1 |
| -- | 自减1 |
var x=10;
var res1 = x ++; 加号在后面 先赋值后自增
var res2 = ++ x; 加号在前面 先自增后赋值
| 符号 | 描述 |
|---|---|
| ！= | 不等于（弱） |
| == | 等于（弱） |
| === | 等于（强） |
| ！=== | 不等于（强） |
| 符号 | 描述 |
|---|---|
| && | 与 |
| || | 或 |
| ！ | 非 |
1.单if分支
if (条件){
条件成立执行的代码
}
2.if...else分支
if(条件){
条件成立执行的代码
}else{
条件不成立执行的代码
}
3.if...else if...else分支
if(条件1){
条件1成立执行的代码
}else if(条件2){
条件1不成立条件2执行的代码
}
else{
条件1和2都不成立执行的代码
}
4.如果分支结构中else if很多还可以考虑使用switch语法
switch(条件){
case 条件1:
条件1成立执行的代码;
break; 如果没有break会基于某个case一直执行下去
case 条件2:
条件2成立执行的代码;
break;
case 条件3:
条件3成立执行的代码;
break;
case 条件4:
条件4成立执行的代码;
break;
default:
条件都不满足执行的代码
}
"""
三元运算
python中: 值1 if 条件 else 值2
JS中: 条件?值1:值2
"""
for循环
for(起始条件;循环条件;条件处理){
循环体代码
}
for(let i=0;i<10;i++){
console.log(i)
}
let dd = {'name':'jason','age':18}
for(let k in dd){
console.log(k)
}
while循环
while(循环条件){
循环体代码
}
1.JS中函数的形参与实参个数可以不对应
传少了就是undefined 传多了不用
2.函数体代码中有一个关键字arguments用来接收所有的实参
3.函数的返回值如果有多个需要自己处理成一个整体
function 函数名(形参){
// 函数注释
函数体代码
return 返回值
}
# 匿名函数
var s1 = function(a, b){
return a + b;
}
# 箭头函数
var f = v => v;
var f = function(v){
return v;
}
var f = () => 5;
var f = function(){return 5};
var sum = (num1, num2) => num1 + num2;
var sum = function(num1, num2){
return num1 + num2;
}
var d = new Date();
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
let dd = {name: 'jason', age: 18}
JSON.stringify(dd) 序列化
JSON.parse(ss) 反序列化
定义正则两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
1.全局模式的规律
lastIndex
2.test匹配数据不传默认传undefined
我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div
总的来说，我对ruby还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc
我正在尝试设置一个puppet节点，但rubygems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由rubygems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我想了解Ruby方法methods()是如何工作的。我尝试使用“ruby方法”在Google上搜索，但这不是我需要的。我也看过ruby-doc.org，但我没有找到这种方法。你能详细解释一下它是如何工作的或者给我一个链接吗？更新我用methods()方法做了实验，得到了这样的结果:'labrat'代码classFirstdeffirst_instance_mymethodenddefself.first_class_mymethodendendclassSecond使用类#returnsavailablemethodslistforclassandancestorsputsSeco
我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer
我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当
设置:狂欢ruby1.9.2高线(1.6.13)描述:我已经相当习惯在其他一些项目中使用highline，但已经有几个月没有使用它了。现在，在Ruby1.9.2上全新安装时，它似乎不允许在同一行回答提示。所以以前我会看到类似的东西:require"highline/import"ask"Whatisyourfavoritecolor?"并得到:Whatisyourfavoritecolor?|现在我看到类似的东西:Whatisyourfavoritecolor?|竖线(|)符号是我的终端光标。知道为什么会发生这种变化吗？ 最佳答案
我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用？ 最佳答案 我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击