pycharm怎么方便写javascript代码 pycharm javascript

javaScrip的完整实现是由以下三个部分组成
 核心(ECMAScript)
 文档对象模型(DOM)DOcment object model(整合js，css，html)
 浏览器对(BOM) Droswer object model (整合js和浏览器)
 javascript在开发中绝大多数情况是基于对象的，也是面向对象的
 简单的说，ECMAScript描述了一下内容：
 语法，类型，语句，关键字，保留字，运算符，对象(封装，继承，多态)基于对象的语言，使用对象

基于pycharm中执行js文件
 JavaScript引入方式
 1，直接建立html文件在html标签中的title标签下写：
 如：
    <title>学习js</title>
    <script>在这里写你的js代码</script>
2，引入js文件，先建立一个html文件，在建立js文件，将js文件导入html文件中即可
如：
    在html中：<script src='myscript.js'></script>
    在js文件中写js代码。

运行：在pycharm中的html文件中写好代码点击右上方的浏览器跳转到空白页面，在空白页面中右击鼠标找到检查进去就可看到结果。

javascript的语言规范
注释(注释代码之母)
//-----单行注释
/**/-----多行注释

结束符：JavaScript中的语句要以分号(;)位结束符

JavaScript语言基础
变量声明
1，javasript的变量名可以使用_,数字，字母，$组成，不能以数字开头
2，声明变量使用var变量名；的格式来金星声明
var---关键字，相当于函数中的def
var name = 'Alex';
var age = 18;
注意：
变量名是区分大小写的，推荐使用驼峰式命名规则。

JavaScript数据类型
JavaScript拥有动态类型
var x; //此时x是undefined
var x = 1；  //此时x是数字
var x = 'Alex';  //此时x是字符串

数字类型(Number)
JavaScript不区分整形和浮点型，就只有一种数字类型。
var a = 12.34;
var b = 20;
var c = 123e5;  //1230000
var d = 123e-5;   //0.00123

常用方法：
parseint('123')  //返回123
parseint('ABC')  //返回NaN，NaN属性是代表非数字值的特殊性值，该属性用于知识某个值不是数字。
parseFloat('123.456')   //返回123.456

字符串(String)
var a = 'Hello';
var b = 'world';
var c = a+b;
console.log(c);
字符串可拼接，

常用方法：
length-----返回长度
trim()-----移除空白
trimLeft()------移除左边空白
trimRight()-----移除右边空白
charAt(n)-------返回第n个字符
concat(value,....)-------拼接
indexOf(substring,start)-------子序列位置
substring(from,to)-------根据索引取子序列
slice(start,end)-------切片
toLowerCase()----------小写
toUpperCase()----------大写
split(delimiter，limit)---------分隔
*****拼接字符串一般使用“+”

布尔类型
true和flase(与python相比较首字母都是小写)
var a = true;
var b = flase;

数组(类似于python中的列表)
var a = [123,'ABC'];
console.log(a[1]);    //这里索引取值，取到'ABC'
常用方法：
length--------数组的大小
push(ele)-----尾部追加元素
pop()---------获取尾部的元素(输出最后一个值，有返回值)
unshift(ele)-------头部插入元素
shift()------------头部移除元素(删除第一个值，有返回值)
slice()------------切片
reverse()----------反转
join(seq)----------将数组元素连接成字符串
concat(val,....)-----连接数组
sort()-------------培训


遍历数组中的元素
var a = [10,20,30,40];
for(var i = 0;i<a.length;i++){
console.log(i);
}


null 和 undefined
undefined表示的是当生命的变量未初始化时，该变量的默认值是undefined，还有就是函数无明确返回值时，返回的是undefined
如下：
在js文件中：
var a;   只有变量没有初始化
console.log(a);    打印undefined

var sum = function(a,b){
    在这里没有返回值
}
console.log(sum(1,2));   打印undefined
或
function sum(a,b) {
    // 无返回值
}
console.log(sum(1,2))   返回undefined


null表示值不存在
function sum(a,b) {
    return null;
}
console.log(sum(1,3));   返回null，所以sum只打印null，不会因为赋值改变

var a = null;
console.log(a);   值为null
undefined表示声明了变量，但是还没有赋值，null声明了变量并且变量是空值。


类型查询(typeof)
字符串
var name = 'egon';
console.log(name,typeof(name));   name = 'egon',   typeof为：string

空
var a = null;   给变量赋值null
console.log(a,typeof(a));   打印a = null，typeof为object(对象)

布尔
var b = true;
console.log(b,typeof(b));   b = true,  typeof为boolean

var b = false;
console.log(b,typeof(b));   b = false， typeof为boolean

数字
var a = 123;   定义数字变量
console.log(a,typeof(a));   a = 123，  typeof为number
注：typeof是一个一元运算符(就像++，--，！，-等一元运算符)，不是一个函数，也不是一个语句。

运算符
算数运算符   +，-，*，++，--

比较运算符 >,>=,<,<=,!=(不等于),==(等于),===(全等于),!==(不全等于)
注意：== 和 ===区别
==(等于)
var a = 1;
var b = '1';
if (a == b){
    console.log('true')
}else{
    console.log('false')
}

===(全等于)
var a = 1;
var b = '1';
if (a === b){
    console.log('true')
}else{
    console.log('false')
}

逻辑运算符
&&(and)，||(或)，！(取反)
&&：与python中的and用法一样，&&左右两边都为真结果为真
x && y 时：当x为非零的数字(True)时,结果为y，否则反之
如：
alert(1 && 2);  //结果为2
alert(0 && 2);  //结果为0

||：与python中的or用法一样，只要有一边为真，结果就为真
x || y 时：当x为非零的数字时，结果为x，否则反之
alert(1 || 2);  //结果为1
alert(0 || 2);  //结果为2

！：取反
// alert(!2);       false
// alert(!true);    false
// alert(!0);       true
// alert(!false);   true

赋值运算符
 =，+=，-=，*=，/=
=：
var a = 10;
console.log(a);

+=：
var a = 10;  定义两个变量
var b = 2;
b += a;      赋值运算
console.log(b);   打印


-=：
var b = 10;
var a = 3;
b -= a;
console.log(a);

*=：
var x = 10;
var y = 20;
console.log(x *= y);
console.log(y *= x);

/=:
var a = 20;
var y = 40;
x /= y;
console.log(x);

流程控制
if-else：如果.....否则，，，，判断
var a = 10;    //定义一个变量
if (a > 5){    //如果a大于5(对应上面定义的变量做比较)
    console.log('yes'); //  符合条件打印yes
}else{        //否则
    console.log('no')  // 不符合条件打印no
}

if-else  if-else
var a = 10;   //定义变量 a = 10
if (a > 5){    //判断如果 a > 5
    console.log('a > 5');   //打印 a > 5
}else if(a < 5){  //如果 a < 5
    console.log('a < 5');   //打印a < 5
}else{     //否则
    console.log('a = 5');   //打印a = 5
}


swicth-----判断
var a = 4;    拿定义的a变量去找case中的值对应。
switch (a){
    case 1:
        alert('星期一');
        break;
    case 2:
        alert('星期二');
        break;
    case 3:
        alert('星期三');
        break;
    case 4:
        alert('星期四');
        break;
    case 5:
        alert('星期五');
        break;
    case 6:
        alert('星期六');
        break;
    default:    //其他的都找不到，就找default默认
        alert('星期天');
}

for  循环
for (var i=0;i<10;i++){   //i:定义一个变量，i<10:规定取值范围，i++:设定步长
    console.log(i);  打印出符合条件的i值
}

// while  循环
var i = 0;   //定义一个变量并规定从哪个数开始
while (i < 10){   //设定一个取值范围
    console.log(i);   //打印这些符合条件的值
    i++;    // 自增
}


三元运算
// var a = 1;   //定义变量a
// var b = 2;   //定义变量b
// var c = a < b ? a : b;   //  条件为真，取？后面的值，条件为假时，取：后面的值
// console.log(c);   //打印c  1

var a = 1;   //定义变量a
var b = 2;   //定义变量b
var c = a > b ? a : b;   //  条件为真，取？后面的值，条件为假时，取：后面的值
console.log(c);   //打印c  2


函数
函数定义
JavaScript中的函数和Python中的非常类似,只是定义方式有点区别

普通函数定义:
1，function a() {    定义函数a
     console.log('德胜');   打印
 }
a();  函数调用
2，function f1() {
    console.log('Hello world!');
    function f2() {
        console.log('大卫')
    }
    return f2;   //返回一个内存地址
}
f1()();   //f()是调用f1这个函数，f()()是f1在调用f2

带参数的函数
function f2(a,b){   //定义带参数的f2函数
    console.log(arguments);  //内置的arguments对象
    console.log(arguments.length);  //参数的长度
    console.log(a,b);  //打印a和b的值
}
f2(10,20);  //函数的调用传值

带返回值的函数
function sum(a,b){   //定义带参数的函数sum，
    return a + b;   //返回参数之和
}
sum(1,2);  //调用sum函数，给a和b参数传值

匿名函数方式
var sum = function (a,b) {   //定义函数并赋值给一个变量
    return a + b;   //返回两个参数的和
};
sum(1,2);   //调用函数并传值

立即(自)执行函数
console.log((function (a,b) {
    return a + b;
    console.log('自执行函数：'+ (a+b))
})(1,3));   ------------4

函数的全局变量和局部变量
局部变量：
在JavaScript函数内部声明的变量（使用var）是局部变量，所以只能在函数内部访问
该变量的作用域是函数内部，只要函数运行完毕，本地变量就会被删除。

全局变量：
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问到它，

变量生存周期：
JavaScript变量的生命期从他们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

作用域：
在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层
1，
由函数从上而下执行
var city = 'Beijing';           1步
function f(){                   2步
    var city = 'ShangHai';      4步
    function inner(){           5步
        var city = 'ShenZhen';  7步
        console.log(city);      8步
    }
    inner();                    6步 //调用：inner()，自身有就拿到自身的，自己没有就去父类中找
}
f();                            3步

2，
var city = 'Beijing';         1步
function Bar(){               2步
    console.log(city);        7步
}

function f() {               3步
    var city = 'ShangHai';          在这里只是定义了一个变量，只是调用了
    return Bar;              6步           返回的是Bar函数，但自己没有值，就去全局找
}
var ret = f();              4步
ret();                      5步


3，闭包
var city = 'Beijing';        //1步
function f(){                 //2步
    var city = 'Shanghai';   //5步   就近原则
    function inner() {       //6步
        console.log(city);   //8步
    }
    return inner;            //7步
}
var ret = f();               //3步
ret();                       //4步


内置对象和方法
JavaScript中的所有事物都是对象：字符串、数字、数组、日期、等等。在JavaScript中，
对象是拥有属性和方法的数据

自定义对象
类似于Python中的字典数据类型
var a = {'name':'alex','age':180};
console.log();   //#只拿到alex
console.log(a.age);    //只拿到age

遍历对象中的内容
var a = {'name':'alex','age':18,'sex':'男'};  //定义函数
for (var i in a){        //for循环遍历变量中的每一对元素
    console.log(i,a[i]);  //打印并取值(索引取值)
}


创建对象
var person = new Object();    创建一个person对象
 = 'Alex';         person对象的name属性
person.age = 18;              person对象的age属性


扩展：
父类结构函数
var Car = function(loc){
    this.loc = loc;
};

父类方法
Car.prototype.move = function(){
    this.loc ++;
}


子类构造函数
var Van = function(loc){
Car.call(this,loc);
};

继承父类的方法
var.prototype = object.create(Car.prototype);
修复constructor
van。prototype.constructor = Van;
扩展方法
van.prototype.grab = function(){
/*.......*/}
};


Date对象
创建Date对象
方法1：不指定参数
var d1 = new Date()';

方法2：参数为日期字符串
var d2 = new Date('2004/3/20 11:12');
console.log(d2.toLocaleString());
var d3 = new Date('04/03/20 11:12');
console.log(d3.toLocalestring());

方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCstring());

方法4：参数为年月日小时分钟秒豪秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());   //毫秒并不直接显示

Date对象的方法：
var d = new Date();
getDate()             获取日
getDay()              获取天
getMonth()            获取月(0-11)
getFullYear()         获取完整年份
gerYear()             获取年
getHours()            获取小时
getMinutes()          获取分钟
getSeconds()          获取秒
getMilliseconds()     获取毫秒
getTime()             返回累计毫秒数(从1970/1/1午夜)


json对象
var str1 = '{'name':'Alex','age':15}';
var obj1 = {'name':'Alex','age':15};
//JOSN字符串转成对象
var obj = JOSN.parse(strl);
//var srt = JSON.stringify(obj1);


正则表达式
RegExp对象
创建正则表达式1
//参数1 正则表达式(不能有空格)
//参数2 匹配模式：常用g(全局匹配；找到所有的匹配，而不是在第一个匹配后停止)和i(忽略大小写)
//用户名只能是英文字母，数字和_,并且是字母是英文字母。长度最短不能少于6位，最长不能超过12位

//创建RegExp对象方式(逗号后面不要加空格)
var reg1 = new RegExp('^[a-zA-Z][a-zA-Z0-9_]{5,11}$');

//匹配响应的字符串
var s1 = 'bc123';

//RegExp对象的test方法，测试一个字符串是否符合对应的正则规则，返回值是true或false
reg1.test(s1);   //true


创建方式2
填写正则表达式/匹配模式(逗号后面不要加空格)
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
reg2.test(s1); //true

String对象与正则结合的4个方法
var s2 = 'hello world';
// s2.match(/o/g);
// console.log(s2.match(/o/g));   /*查找字符串中符合正则的内容*/
// s2.split(h/g);
// console.log(s2.search(/h/g));   /* 查找字符串中符合正则表达式的内容/
// s2.split(o/g);
// console.log(s2.split(/o/g));    /*以o分隔   按正则分隔/切割*/
// s2.replace(o/g,'s');
// console.log(s2.replace(/o/g,'s'));  /*替换*/按正则进行替换


//关于匹配模式：g和i的简单示例
var s1 = 'name:Alex age:18';
// console.log(s1.replace(/a/,'哈哈哈'));    //这里替换的是键
// console.log(s1.replace(/a/g,'哈哈'));      ///全局匹配
// console.log(s1.replace(/a/gi,'哈哈哈'));    //要替换的值有几个替换几个
// 注意事项1：
// 如果regExpObject带有全局标志g，test()函数不是从字符串的开头开始查找，而是从属性regExpObject.lastIndex所指定的索引处开始查找。
// 该属性值默认为0，所以第一次仍然是从字符串的开头查找。
// 当找到一个匹配时，test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。
// 当再次执行test()函数时，将会从该索引位置处开始查找，从而找到下一个匹配。
// 因此，当我们使用test()函数执行了一次匹配之后，如果想要重新使用test()函数从头开始查找，则需要手动将regExpObject.lastIndex的值重置为 0。
// 如果test()函数再也找不到可以匹配的文本时，该函数会自动把regExpObject.lastIndex属性重置为 0。

var reg3 = /foo/g;
// 此时 regex.lastIndex=0
reg3.test('foo'); // 返回true
// 此时 regex.lastIndex=3
reg3.test('foo'); // 返回false
// 所以我们在使用test()方法校验一个字符串是否完全匹配时，不推荐添加全局匹配模式g。

// 注意事项2(说出来你可能不信系列)：
// 当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test("undefined"), 并且/undefined/.test()默认返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true


Math对象
abs(x)     返回数的绝对值
exp(x)     返回e的指数
floor(x)   对数进行下舍入
log(x)     返回数的自然对数(底为e)
max(x，y)  返回x和y中的最高值
min(x，y)  返回x和y中的最低值
pow(x,y)   返回x的y次幂
random(x)  返回0-1之间的随机数
round(x)  把数四舍五入为最接近的整数
sin(x)     返回数的正弦
sqrt(x)    返回数的平方根
tan(x)     返回角的正切


Bom和Dom
Bom：指的是浏览器窗口对象模型，顶级对象是window
Dom：指的是文档对象模型，并非一个对象

window对象
window对象表示一个浏览器窗口
在客户端JavaScript中，window对象是全局对象，
alert()        显示带有一段消息和一个确认按钮的警告框
setInterval()  按照指定的周期(以毫秒计)来调用函数或计算表达式
clearInterval()  取消由 setInterval()设置的timeout
setTimeout()     在指定的毫秒数后调用哈数或计算表达式
clearTimeout()   取消由setTimeout()方法设置的timeout
scrollTo()       把内容滚动到指定的坐标
confirm()     显示带有一段消息以及确认按钮和取消按钮的对话框
prompt()      显示课题是用户输入的对话框
open()        打开一个新的浏览器窗口或查找一个以命名的窗口
close()       关闭浏览器窗口


                        BOM与DOM
前戏：
javaScript分为：ECMAScript，DOM，BOM。
BOM(Browser Object Model)是指浏览器窗口对象模型，顶级对象是window
DOM(Document Object Model)是指文档对象模型，并非一个对象。
window，document都是一个实例对象，他们都属于Object，表示浏览器中打开的窗口。
Window对象是客户端JavaScript最高层对象之一，由于window对象是其他大部分对象的共同祖先，在调用Window对象的方法和属性时，可以省略window对象的引用，
如：window.document.write()可以简写成：document.write().

window对象
window对象表示一个浏览器窗口
在客户端JavaScript中，Window对象是全局对象，所有的表达式都在当前的环境中计算，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用，
如：可以只写document、而不必写window.document同样，可以把当前窗口对象的方法当做函数来使用，如只写alert(),而不必写Window.alert().

alert()                      显示带有一短消息和一个确认按钮的警告框
serInterval()             按照指定的周期(以毫秒计)来调用函数或计算表达式
clearInterval()          取消由serInterval()设置的
timeout。                 在指定的毫秒后调用函数或计算表达式
clearTimeout()          取消由serTimeout()方法设置的
timeout。
scrollTo()                 把内容滚动到指定的坐标
confirm()                 显示带有一短消息以及确认按钮和取消按钮的对话框
prompt()                 显示可提示用户输入的对话框
open()                    打开一个新的浏览器窗口或查找一个以命名的窗口
close()                    关闭浏览器窗口

View Code

//每隔一段时间执行一次相应函数
var timer = serIntval(function(){
    console.log(123);},3000)         //3000表示毫秒

//取消setInterval设置
clearInterval(timer)；


//在指定时间之后执行一次相应的函数
var timer = serTimeout(function(){
    alert(123);},3000)

//取消setTimeout设置
clearTimeout(timer);

几个例子

window的子对象
navigator对象
浏览器对象，通过这个对象可以判定所使用的浏览器，包含了浏览器相关信息

navigator.appName            //Web浏览器全称
navigator.appVersion         //Web浏览器厂商和版本的详细字符串
navigaror.userAgent          //客户端绝大部分信息
navigator.platform            //浏览器运行所在的操作系统

console.log(navigator.appName);
console.log(navigator.appVersion);
console.log(navigator.userAgent);
console.log(navigator.platform);

演示

screen对象(屏幕对象，不常用。)

history对象

浏览器对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以用来前进或后退一个页面

history.forward()         //前进一页
history.back()             //后退一页
history.go(n)              //前进n页

location对象

location.href                //获取URL
location.href = 'URL'    //跳转到指定页面
location.reload()          //重新加载页面

 

DOM

DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法

他是一个系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态的对文档的内容，结果

和央视进行访问和修改，简单讲：DOM是一种API(应用接口)。

JavaScript对DOM进行实现，对应于JavaScript中的document对象，通过该对象对DOM文档进行程序级别的控制。

DOM标准规定HTML文档中的每一和成分都是一个节点(node)：

　　文档节点(document对象)：代表整个文档

　　元素节点(elemen对象)：代表一个元素(标签)

　　文本节点(text对象)：代表元素(标签)中的文本

属性节点(attribute对象)：代表一个属性，元素(标签)才有属性
　　注释是注释节点(comment对象)

document.gerElementById              //根据ID获取一个标签
document.getElementsByName       //根据name属性获取标签集合
document.getElmentsByclassName  //根据class属性获取
document.getElementsByTagName  //根据标签名获取标签合集

查找标签

间接查找

parentNode      //父节点
childNodes       //所有子节点
firstChild         //第一个子节点
lastChild         //最后一个子节点
nextSibling     //下一个兄弟节点
previousSibling      //上一个兄弟节点

//注意节点和标签的区别，主要记下面的
parentElement         //父节点标签元素
children                  //所有字标签
firstElementChild     //第一个字标签元素
lastElementChild      //最后一个字标签元素
nextElementSIbling  //下一个兄弟标签元素
previousElementSibling      //上一个兄弟标签元素

document对象的属性和操作
属性节点

attributes -----------获取所有标签属性
getAttribute---------获取指定标签属性
setAttribute---------设置指定标签属性
removeAttribute---------移除指定标签属性

var s = document.createAttribute(‘age’)
    s.nodeValue = '18'     ---------------------创建age属性设置属性值为18

View Code