重点 (五) : JavaScript

JavaScript
什么是JavaScript
JavaScript是一门脚本语言，简称JS
JS的常见作用有
给HTML网页添加动态功能，比如响应用户的各种操作
操纵HTML元素，比如添加、删除、修改网页元素

常见的JavaScript函数
alert(10); 弹框
document.getElementById(‘test’); 根据ID获得某个DOM元素

OC中调用JavaScipt
如何在OC中调用JavaScript代码
使用UIWebView的stringByEvaluatingJavaScriptFromString方法即可

**************************笔记************************

JS语法
1.介绍javascript，对着ppt

2,介绍js在浏览器上的操作
动态的添加一些东西
js写服务器代码---NodeJS
为甚以前不行？
没有解析器。利用Google的V8的引擎开发了NodeJS
分析下用js写服务器代码的前景

3、JS的编写形式
用js写一个helloWord
alert("hello world")

利于调试：
console.log('hello world')
比较下alter和console在调试的优缺点
进百度----> console.log 招聘信息

4、js的基本语法

  • 数据类型
  • 函数
  • 对象
    -----创建代码
    (1)
    var age = 10; number
    var money = 10.5; number
    var name = "jack"; string
    var name2 = 'rose'; boolean
    *推荐使用单引号
    <button onclick = "alter("10")">
    var result = true; true false
  • 可以不写var

打印类型，加深印象：
console.log(typeof age)

(2)字符串的拼接
var prefix = 'I am';
var name = 'jack'
var str = prefix + name + 'sb' + 20;

(3) 字符串与数字拼接
出题：
var str1 = 10 + 10 + '10';
var str2 = '10' + 10 + 10;
var str3 = '10' + （10 + 10）
var str4 = 10 + '10' + '10'
注意点：运算从左往右，任何类型与字符串相加都是字符串类型

（4）数组
var names = []; 比较下js和oc和java的数组区别
var names = [10, 20, 'jack', 10.8, true, false];
console.log(names.length)
console.log(names[0])
console.log(typeof names)

var dog = {
name : 'jack',
age : 10
};
console.log(dog.name)
console.log(dog.name + '-' + dog.age)

var dog2 = {
name : 'hhh',
age : 10,
height : 1.55 (身高已经超过郭敬明了)
};
console.log ....

（5）函数
*函数的定义格式
function 函数名（参数列表）{
函数体

函数没有返回类型

}
js中定义变量必须用var
加法运算
function sum(num1, num2){ 参数列表不需要标明类型
return num1 + num2
}
cosole.log(sum(1, 2))

写一个万能的加法函数
对比前面一个，突出新方法
function sum(numbers){
var count = 0;
for(var i = 0; i < numbers.count; i++){
count += numbers[i];
}
return count;
}
改进版
function sum(){ arguments
var count = 0;
for (var i = 0; i < arguments.length; i++){
count += arguments[i];
}
return count
}

总结：js非常灵活，有很多写法，其他语言办不到

  • 数据类型
    number:包括所有的数字（整数、小数）
    boolean:正常取值（true 或者 false）
    string: 字符串，可以用双引号和单引号引住内容（建议使用单引号）
    object: 对象类型，（注意：数组[]也是对象类型）、{}
  • 函数
  • 对象

1.回顾下昨天上的内容，强调必须要掌握JS 过一遍上一课js的内容

增加函数的调用格式： var result = 函数名（参数值）

上代码 名称：02 - 对象语法 补充下 函数 function sum(num1, num2){ return num1+num2; } console.log(sum(100, 200)); console.log(typeof sum);

还有一种方式，匿名函数
var sum = function (num1, num2){
return num1 + num2;
}
console.log(sum(100, 200));
console.log(typeof sum);
对象： 写一个dog var dog = { name : 'aaa', age : 20 }; 提出问题，狗对象只有属性没有行为： var dog = { name : 'aaa', age : 20, run : function(){ console.log('run'); }; eat : function{ console.log('eat'); }; }; 提出问题，如何调用狗对象的方法？ dog.run(); dog.eat(); 传肉进去---狗跑起来，吃起来

提出问题？哪只狗跑起来，如何用name 通过OC比较如何调用成员变量， 引出this this在这里代表狗对象
当前函数属于哪个对象，this就代表这个对象

提出这种对象存在问题，不能量产？ function Dog(){ 有点类的感觉 console.log('Dog------') } Dog(); console.log(typeof Dog);

引出 new 普通的函数调用 var dog1= Dog();  调用了构造函数Dog(),创建了一只新的Dog对象 var dog1 = new Dog(); [[Dog alloc] init];

---->通过创建对象 function Dog（） = { this.name = null; this.age = null; this.run = function(){ console.log(this.name + '-run'); }; this.eat = function(meat){ console.log(this.name + '-eat-' + meat); };
    
}

var dog1 = new Dog(); var dog2 = new Dog();

dog1.name = 'wangcai'; dog1.run();

dog2.run();

增加参数 function Dog(name, age) = { this.name = name; this.age = age; this.run = function(){ console.log(this.name + '- run'); }; this.eat = function(meat){ console.log(this.name + '-eat-' + meat);

}; };

var dog1 = new Dog('wangcai', 5); var dog2 = new Dog('hhhhh'); dog1.run(); dog2.run();

如果没有传值，则会是undifiend console.log(dog1.age + '-' + dog2.age);

JS中比较灵活的写法： || && a || b a && b 提出需求： var name1 = 'name1'; var name2 = 'name2'; var name3 = 'name3'; 找出这三个中第一个有值的赋给name 常规的做法 var name if (name1){ name = name1; }else if(name2){ name = name2; }else if(name3){ name = name3; } 新做法 var name = name1 || name2 || name3; js中||运算符的返回值：返回第一个为真（有值就为真）的值

var age = 20; if (age > 20){ console.log('可以结婚了！！！'); }

（age >= 20） && console.log('可以结婚了');

JS语法
要想把我们学习的JS运用到iOS开发中，我们还需要学习两个知识点：
两个内置对象：系统自带的对象，全局对象
内置对象：window 和 document

1.window的特点：
1> 所有全局变量都是它的属性；
2> 所有全局函数都是它的函数；

var age = 20;

function run(){
var age = 20;
console.log('---run----');
}

run();
window.run();
window.run();
window.run();

console.log(age);
console.log(window.age);
把age变成局部变量
做出区别

alert('10');
window.alert('10');
当前函数属于哪个对象，this就代表这个对象
function Dog(){
console.log(this);
}

Dog(); window.dog
new Dog(); 通过构造函数产生了一个新的对象，this代表这个狗对象

function Dog(){
this.alter('10');
}
Dog();

new Dog();

var age = 20;
function Dog(){
console.log(this.age);
}
Dog();
new Dog();

alter('10'); 阻塞操作
window.location.href = ''; 通过这句代码改变浏览器的指向，实现用JS代码自动跳转；
location.herf = '';

总结笔记：

掌握对象的函数调用：
var result = 对象.函数名(参数值);

2.内置对象 - window
1> window的特点
所有全局变量都是它的变量
所有全局函数都是它的函数
2> 通过JS代码动态跳转页面
location.href = 'http://www.baidu.com';
window.loction.href = 'http://www.baidu.com';

回顾上节课上的内容 打开 w3cschool 可以学习更多东西

1.document的用途： 1> 可以用来获得网页中的任何一个元素 2> 可以创建HTML元素 3> ....
document.write('');写一些内容，展示给学生看 * 测试下内容会不会被覆盖
提出需求: 1.点击按钮，改变图片； 升级： 2.点击按钮，互相切换图片；
通过getElementByID 引出 getElementsByTagName getElementsByClassName getElementsByname 分别切换图片 function btnClick(){ 获取图片对象 var icon = document.getElementById('icon'); var icon = document.getElementsByTagName('img')[0]; var icon = document.getElementsByClassName('tom')[0]; var icon = document.getElementsByName('cat')[0];

切换图片
if (icon.src.indexof('test.png') == -1){
    icon.src = 'test.png';
}else{
    icon.src = 'other.png';
}

} ID太多也不好，对比iOS尽量少使用tag,举例子：有些公司通过文档限定tag的取值

另一种做法： 全部用JS获取 *注意点：调用方式

3.其他的方法 1> 点击图片 var icon = document.getElementByTagName('img'); icon.onclick = function(){ console.log('点击了图片'); }; 2> 点击body document.body.onclick = function (){ console.log('点击了body'); }; 3> 鼠标事件 icon.onmousemove = function(){ console.log('鼠标在图片上移动'); }; icon.onmouseover = function(){ console.log('鼠标滑入图片'); }; icon.onmouseout = function(){ console.log('鼠标滑出图片'); };

icon.onkeyDown
icon.onkeyUp
4.倒计时函数

JS在iOS中的简单运用
一、在当前应用中显示某个网页

  1. 在storyboard中拖入webView,设置约束
  2. 拖线
  3. 在viewDidLoad中加载网页
    [self.webview loadHtmlString:@"<img src="123.png">" baseURL:nil];
    4.加载某个特定网页
    NSAppTransportSecurity
    NSAllowsArbitraryLoads
    *解析请求原理
    移动客户端 （发送请求，返回网页代码 ）服务器

三步加载一个网页
http://v3.bootcss.com
(有的公司应用很复杂，内部就三句代码)
*响应缓慢，应该在前后加菊花，浏览webView的代理方法
*做笔记：
响应式设计、响应式布局（先百度）：@media

5.提出需求：希望iOS端显示简洁的风格，把广告去除
*设置代理
网页加载完毕后调用（在这个方法中才能拿到所有的HTML元素）
webViewDidFinishedLoad
*提出如何在OC中调用js

  • 首先通过动态的切入脚本，在网页上测试删除
    var footer = document.getElementsByTagName('footer')[0]; footer.remove();
    连着写
  • 在OC中执行js代码
    *引导思考：在oc中执行js,要通过webView
    引出：stringByEvaluatingJavaScriptFromString
  • 返回值，返回值的作用？
    function test() {return 10;} test();
    打印返回值：执行完最后一句js得到的值
    如果慢的话，执行：www.baidu.com
    用途：
    document.getElementById('userName').value;
    拿到用户的账号等信息，保存在本地沙盒，或者上传到服务器
    *举例子进一步说明：
    写一个登录界面：
    抽方法：testLoadHTML;
    加载login.html
    设置默认值：张三，在OC中打印张三
    *最后一个需求：如果加载公司的网页，可能一成不变，但是内容很多，第一次加载的时候缓存网页，写到沙盒中，方便下次使用
  • 拿到网页源代码
  • 判断沙盒中是否有用代码
  • 如何拿到网页用代码？
    document.getElementsByTagName('html')[0].innerHTML;
    打印：
    引入outerHTML
    写入沙盒：
    [html writeToFile:... atomically:YES encoding:NSUTF8StringEncoding error:nil];

提出需求：如何在js中调用OC代码（目前不说，后面学多线程的时候会使用）

  • 加个 拍照 按钮，
    在OC中写个拍照方法，在html中如何调用：
    <button onclick="[self openCamera]">拍照</button> 怎么办
    在安卓中可以直接调：this.openCamera;

整理笔记：
1> 加载网页
*加载网页源代码
[webView loadHTMLString:@"<img src="123.png">" baseURL:nil];
*加载网页请求
[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://baidu.com"]]];

2> 利用webView执行js
[webView stringByEvaluatingJavaScriptFromString:@"JS代码"];

canvas简介

  1. 回顾下上节课的知识点
  2. 提出问题：如果执行的JS很长？
    两次调用
    拼接
    NSMutableString *js = [NSMutableString string];
    [js appendString:];

[webView stringByEvaluatingJavaScriptFromString:];
*方案：多个字符串之间用双引号隔开
@“”

  1. JS的绘图技术
    <canvas></canvas>
    <script>
    获取画布
    var canvas = document.getElementsByTagName('canvas')[0];
    获得上下文
    var ctx = canvas.getContext("2d");
    ctx.beginPath();

ctx.strokeStyle = 'red';
ctx.lineCap = 'round';
ctx.lineWidth = 10;

ctx.moveTo(10, 10);
ctx.lineTo(100, 100);

ctx.lineTo(100, 20);
ctx.closePath();
</script>

如果要更深入学习JS，可以百度JS库
impress

1.用W3C分析JS学习重点

  • JS HTML DOM
    利用JS可以进行DOM操作

2.代码演示
<button>显示</button>
<button>隐藏</button>
<p>444444444444444444444444444<p>

  • 监听按钮点击:
    演示在行内显示, var age = 20; alert(age);

  • 在JS中实现方法:
    function show(){
    先打印
    }

function hide(){
先打印
}

document相当于一颗DOM树

  • 查看一个对象里面所有属性

JS切换图片
1.换一种方式绑定按钮 在JS内部切换

2.其他事件方法 移动 进去 出来

其他节点操作
用外部样式来写 测试: alter(1);
不能外部\内部结合使用 只要script中使用src属性引用了其他文件,就不能我往里面写JS

节点的增删改查操作

(1) document.write()

(2) var img = document.createElement('img'); img.src = 'images/icon_01.png'; document.body.appendChild(img)

创建多个标签
(3) 往div中加个p标签 var div = document.getElementById('content'); var p = document.createElement('p'); 设置p标签里面的内容 p.innerHTML = '123'; div.appendChild(p);

(4) 删除节点 删除一个节点,要拿到父控件删除子控件 var mj = document.getElementByClass.. document.body.removeChild(mj)

CRUD
增删改查

如果父节点不是body
mj.parentNode.removeChild(mj);
(5) 查看body所有的节点 var len = document.body.childNodes.length; for(var i=0; i<len; i++){ var ele = list[i]; alert(ele.tagName); } 空白也算节点

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,376评论 6赞 491
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,126评论 2赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 156,966评论 0赞 347
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,432评论 1赞 283
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,519评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,792评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,933评论 3赞 406
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,701评论 0赞 266
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,143评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,488评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,626评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,292评论 4赞 329
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,896评论 3赞 313
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,742评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1赞 265
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,324评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,494评论 2赞 348

推荐阅读更多精彩内容

  • js十大设计模式
    工厂模式类似于现实生活中的工厂可以产生大量相似的商品，去做同样的事情，实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,724评论 2赞 17
  • js设计模式笔记
    单例模式 适用场景：可能会在场景中使用到对象，但只有一个实例，加载时并不主动创建，需要时才创建 最常见的单例模式，...
    Obeing阅读 2,058评论 1赞 10
  • javascript
    @转自GitHub 介绍js的基本数据类型。Undefined、Null、Boolean、Number、Strin...
    YT_Zou阅读 1,145评论 0赞 0
  • JavaScript-知识总结-1（GitHub更新）
    转载请著名出处 GitHub-TYRMars 文章Github地址 JavaScript基础知识剖析 01 01-...
    TYRMars阅读 555评论 0赞 7
  • 爸爸：没有你，我怎么成为男子汉？
    今天是教师节后的第一个工作日，微信公众号“黑芝麻小学”选择在这一天向家长师生推送小学与玖光年（北京）文化传播有限公...
    林文斌阅读 557评论 0赞 0